{"id":2090,"date":"2017-12-19T16:02:29","date_gmt":"2017-12-19T14:02:29","guid":{"rendered":"https:\/\/webanalyst.ro\/?p=2090"},"modified":"2019-10-09T12:38:47","modified_gmt":"2019-10-09T09:38:47","slug":"amp-google-analytics","status":"publish","type":"post","link":"https:\/\/webanalyst.ro\/blog\/2017\/amp-google-analytics\/","title":{"rendered":"Pagini AMP cu Google Analytics, direct \u0219i prin Tag Manager"},"content":{"rendered":"

Accelerated Mobile Pages (AMP) este numele ini\u021biativei Google de a optimiza viteza de \u00eenc\u0103rcare a paginilor \u00een versiunea pentru telefoane mobile. A ap\u0103rut ca un r\u0103spuns la tehnologii asem\u0103n\u0103toare de la Facebook \u0219i Apple. Paginile AMP sunt statice \u0219i sunt create \u00eentr-un HTML simplificat, optimizat pentru a oferi rapid con\u021binut \u0219i\u2026 reclame. Majoritatea CMS-urilor populare au deja plugin-uri pentru generarea paginilor AMP.<\/p>\n

\u00cen aceste pagini se poate implementa analytics, \u00eens\u0103 la \u00eenceput Google cerea s\u0103 fie folosit\u0103 o proprietate diferit\u0103 de Google Analytics, ceea ce i-a descurajat pe mul\u021bi utilizatori. Situa\u021bia s-a schimbat, iar \u00een prezent exist\u0103 versiuni decente de AMP pentru analytics, dar \u0219i tag manager.<\/p>\n

<\/p>\n

Google Analytics pe pagini AMP<\/h2>\n

Google\u2019s AMP Client ID API se nume\u0219te ultimul update GA pentru AMP. A fost anun\u021bat \u00een aceast\u0103 toamn\u0103 \u0219i este primul care unific\u0103 vizitatorii de pagini AMP (inclusiv din cache-ul Google) cu cei din versiunea clasic\u0103 (non-AMP) a paginilor. De-asta l-am numit mai sus \u201edecent\u201d…<\/p>\n

Dezavantajul este, \u0219i de data aceasta, c\u0103 trebuie schimbat codul de tracking, inclusiv pentru cei care aveau AMP analytics deja instalat \u00een pagini.<\/p>\n

Cei care aveau deja Google Analytics \u00een paginile AMP, pot \u00eencepe de la pasul 2, adic\u0103 update-ul la ultima versiune!<\/strong><\/p>\n

Pasul 1. Instalarea de Google Analytics \u00een paginile AMP<\/h3>\n

Mai \u00eent\u00e2i, \u00een header-ul paginilor AMP avem linia:<\/p>\n

<script async custom-element=”amp-analytics” src=”https:\/\/cdn.ampproject.org\/v0\/amp-analytics-0.1.js”><\/script><\/p><\/blockquote>\n

Ulterior, \u00een sec\u021biunea boby a paginilor avem scriptul care trimite informa\u021bii despre trafic (pageviews):<\/p>\n

<amp-analytics type=”googleanalytics”><\/p>\n

<script type=”application\/json”><\/p>\n

{<\/p>\n

„vars”: {<\/p>\n

„account”: „UA-XXXXX-Y”<\/p>\n

},<\/p>\n

„triggers”: {<\/p>\n

„trackPageview”: {<\/p>\n

„on”: „visible”,<\/p>\n

„request”: „pageview”<\/p>\n

}<\/p>\n

}<\/p>\n

}<\/p>\n

<\/script><\/p>\n

<\/amp-analytics><\/p><\/blockquote>\n

Acest cod va desc\u0103rca local un fi\u0219ier json personalizat cu datele site-ului (cum ar fi ID-ul de analytics). De notat c\u0103 desc\u0103rcarea acestui fi\u0219ier va \u00eencepe doar dup\u0103 ce pagina este vizibil\u0103 \u00een browser, adic\u0103 \u00een tab-ul activ.<\/p>\n

Pasul 2. Ad\u0103ugarea urm\u0103toarei linii \u00een zona <head> a paginilor AMP<\/h3>\n

<meta name=”amp-google-client-id-api” content=”googleanalytics”><\/p><\/blockquote>\n

Prin aceasta, este dat acordul pentru folosirea comun\u0103 de Client ID, dup\u0103 cum scriam mai sus.<\/p>\n

Pasul 3. Ad\u0103ugarea unei linii noi \u0219i \u00een codul de analytics pentru paginile non-AMP<\/h3>\n

Altfel spus, codul de analytics din site-ul \u201e\u00eentreg\u201d, este completat cu:<\/p>\n

ga(‘create’, ‘UA-XXXXX-Y’, ‘auto’, {‘useAmpClientId’: true});<\/p><\/blockquote>\n

Pe l\u00e2ng\u0103 modific\u0103rile de front end, Google recomand\u0103 \u0219i excluderea referral-ului cu domeniul cdn.ampproject.org.<\/em><\/p>\n

GA prin Google Tag Manager pentru AMP<\/h2>\n

\u00cen urm\u0103 cu un an se lansa container-ul special pentru pagini AMP. A\u0219adar, \u00een contul de GTM trebuie creat un container special pentru versiunea AMP de site.<\/p>\n

\"\"<\/p>\n

Contul de GTM al unui site va avea un container Web \u0219i un container AMP:<\/p>\n

\"\"<\/p>\n

Cei care au curiozitatea, vor observa c\u0103 pentru GTM au de instalat \u00een site un cod aproape identic cu cel de mai sus de Google Analytics. Asta pentru c\u0103 AMP este restrictiv \u0219i este folosit acela\u0219i modul AMP<\/a>.<\/p>\n

Crearea tag-ului de Google Analytics este aproape identic\u0103 \u00een GTM-ul de AMP cu cel clasic. \u00cen schimb, pentru update-ul GA de care vorbeam mai sus, utilizatorii de GTM trebuie s\u0103 fac\u0103 o modificare \u00een tag-ul de analytics din GTM Web<\/strong>! Practic, aceasta este similar\u0103 pasului 3 de mai sus, dar \u00een tag manager:<\/p>\n

\u00cen tag-ul Google Analytics pentru pageviews (deci tag-ul obi\u0219nuit, din site-ul clasic), se adaug\u0103 la More Settings<\/strong> \\ Fields to Set<\/strong> un c\u00e2mp useAmpClientId<\/em> cu valoarea true<\/em>. Adic\u0103 a\u0219a:<\/p>\n

\"\"<\/p>\n

\u00cen cazul site-urilor care \u00eencarc\u0103 greu pe telefoane mobile, ar trebui luat \u00een calcul update-ul la pagini AMP. A\u0219a cum spuneam mai sus, majoritatea CMS-urilor ofer\u0103 aceast\u0103 posibilitate, iar serviciile de analytics \u0219i advertising \u00eencep s\u0103 func\u021bioneze decent.<\/p>\n","protected":false},"excerpt":{"rendered":"

Accelerated Mobile Pages (AMP) este numele ini\u021biativei Google de a optimiza viteza de \u00eenc\u0103rcare a paginilor \u00een versiunea pentru telefoane mobile. A ap\u0103rut ca un r\u0103spuns la tehnologii asem\u0103n\u0103toare de la Facebook \u0219i Apple. Paginile AMP sunt statice \u0219i sunt create \u00eentr-un HTML simplificat, optimizat pentru a oferi rapid con\u021binut \u0219i\u2026 reclame. Majoritatea CMS-urilor populare […]<\/p>\n","protected":false},"author":1,"featured_media":2100,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,730],"tags":[846,717,718,107,719],"class_list":["post-2090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-analytics","category-google-tag-manager-2","tag-amp","tag-google-tag-manager","tag-gtm","tag-mobile","tag-tag-management"],"_links":{"self":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts\/2090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/comments?post=2090"}],"version-history":[{"count":9,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts\/2090\/revisions"}],"predecessor-version":[{"id":2599,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts\/2090\/revisions\/2599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/media\/2100"}],"wp:attachment":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/media?parent=2090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/categories?post=2090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/tags?post=2090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}