{"id":1549,"date":"2014-09-15T10:37:43","date_gmt":"2014-09-15T07:37:43","guid":{"rendered":"https:\/\/webanalyst.ro\/?p=1549"},"modified":"2014-11-09T21:09:45","modified_gmt":"2014-11-09T19:09:45","slug":"gtm","status":"publish","type":"post","link":"https:\/\/webanalyst.ro\/blog\/2014\/gtm\/","title":{"rendered":"No\u021biuni de Google Tag Manager"},"content":{"rendered":"<p>Sistemele de tag management au ap\u0103rut din nevoia de a gestiona \u0219i a controla u\u0219or num\u0103rul tot mai mare de coduri (tag-uri) care se adaug\u0103 \u00een aplica\u021bii pentru a func\u021biona cu diverse servicii (ex: analytics, retargeting, testing, personaliz\u0103ri, sondaje, feedback, heatmaps, recomand\u0103ri de produse etc.). Cu un astfel de sistem, \u00een paginile site-lui este ad\u0103ugat tag-ul unui container, dup\u0103 care celelalte tag-uri sunt ad\u0103ugate \u00een container din interfa\u021b\u0103, f\u0103r\u0103 a mai face modific\u0103ri la codul site-ului.<\/p>\n<p>Majoritatea furnizorilor importan\u021bi de solu\u021bii de analytics au \u00een portofoliu \u0219i un produs de tag management, dar acestea au devenit mai populare de c\u00e2nd Google a lansat \u0219i oferit gratuit Google Tag Manager (GTM). A fost <a href=\"https:\/\/webanalyst.ro\/blog\/2012\/google-tag-manager\/\" target=\"_blank\">lansat<\/a> \u00een octombrie 2012, dar func\u021bii avansate precum auto-event tracking au ap\u0103rut din octombrie 2013 sau sunt \u00eenc\u0103 a\u0219teptate, deci putem spune c\u0103 este un produs t\u00e2n\u0103r.<!--more--><\/p>\n<h2>Structura contului<\/h2>\n<p>Contul de GTM este structurat \u00een:<\/p>\n<ul>\n<li><strong>Containers<\/strong>: con\u021bin tag-urile pe care le ac\u021bioneaz\u0103 asincron; nu poate fi controlat\u0103 ordinea \u00een care s\u0103 ac\u021bioneze aceste tag-uri, de\u0219i exist\u0103 o prioritizare; trebuie implementat \u00een toate paginile site-ului, preferabil imediat sub &lt;body&gt;<\/li>\n<li><strong>Tags<\/strong>: toate tag-urile pe care le vrem ad\u0103ugate \u00een aplica\u021bie; cele mai populare servicii online au tag-uri predefinite \u00een GTM, dar pot fi ad\u0103ugate \u0219i unele customizate<\/li>\n<li><strong>Rules<\/strong>: decid c\u00e2nd s\u0103 fie ac\u021bionat fiecare tag din container (de exemplu, dup\u0103 o conversie)<\/li>\n<li><strong>Macros<\/strong>: sunt folosite pentru a automatiza ac\u021biuni repetitive; \u00een acest moment pot fi definite 14 tipuri de macros pentru site-uri web \u0219i altele 11 pentru aplica\u021bii mobile, iar num\u0103rul lor cre\u0219te<\/li>\n<\/ul>\n<p>Drepturile pentru utilizatori se adaug\u0103 la nivel de container \u0219i pot fi de 3 feluri:<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Browsing<\/span>: drept de vizualizare<\/li>\n<li><span style=\"text-decoration: underline;\">Browsing and editing<\/span>: poate edita, dar nu poate publica modific\u0103rile \u00een site<\/li>\n<li><span style=\"text-decoration: underline;\">Browsing, editing and publishing<\/span>: poate trimite modific\u0103rile spre site; e de preferat ca num\u0103rul celor care au acest tip de acces s\u0103 fie strict limitat, pentru c\u0103 pot aduce modific\u0103ri site-ului<\/li>\n<\/ul>\n<h2>Lucrul cu GTM<\/h2>\n<p>De la \u00eenceput trebuie \u0219tiut c\u0103 <strong>modific\u0103rile<\/strong> nu sunt publicate instant \u00een site. \u00cenainte de a ap\u0103sa <em><strong>Publish changes<\/strong><\/em> trebuie s\u0103 creezi o nou\u0103 versiune a containerului, pentru c\u0103 GTM beneficiaz\u0103 de <strong>versionare<\/strong> (daca ceva nu a mers, ne putem \u00eentoarce oric\u00e2nd la o versiune anterioar\u0103 a containerului). De asemenea, Google Tag Manager beneficiaz\u0103 de modurile de previzualizare:<\/p>\n<ul>\n<li><strong>Preview<\/strong>: \u00ee\u021bi arat\u0103 doar \u021bie site-ul cu ultima versiune de container<\/li>\n<li><strong>Debug<\/strong>: un preview cu o consol\u0103 care afi\u0219eaz\u0103 ce tag-uri ruleaz\u0103<\/li>\n<li><strong>Share<\/strong>: o persoan\u0103 f\u0103r\u0103 acces la contul GTM poate previzualiza schimb\u0103rile, dac\u0103 prime\u0219te link-ul din share<\/li>\n<\/ul>\n<h3>Pa\u0219ii pentru instalarea unui nou tag sunt:<\/h3>\n<ol>\n<li>Crearea tag-ului<\/li>\n<li>Definirea regulilor<\/li>\n<li>Testarea<\/li>\n<li>Crearea unei versiuni noi de container<\/li>\n<li>Publicarea<\/li>\n<\/ol>\n<h3>Track Type<\/h3>\n<p>Tag-urile predefinite beneficiaz\u0103 de op\u021biuni de personalizare, precum ID-ul contului. Una dintre op\u021biunile pe care le avem la dispozi\u021bie la implementarea tagurilor de Google Analytics este\u00a0Track Type, care se refer\u0103 la implementarea de analytics pe care o dorim \u00een respecitvul tag. Avem de ales dintre: Page View (pentru codurile la nivel de pagin\u0103, precum cel de tracking), Event (pt event tracking), Transaction (pt ecommerce), Social, Timing, Decorate Link \u0219i Decorate Form (pt cross domain tracking).<\/p>\n<h3>Data Layer<\/h3>\n<p>O alt\u0103 no\u021biune important\u0103 c\u00e2nd vine vorba despre GTM este Data Layer, care are rolul unui translator \u00eentre datele din site \u0219i diversele instrumente pe care le instal\u0103m prin Tag Manager. Un data layer are \u0219i el un tag de instalat \u00een site. Acesta nu se instaleaz\u0103 \u00een containerul GTM :), ci se adaug\u0103 \u00een sursa site-ului deasupra containerului.<\/p>\n<p>\u00cen interiorul unui data layer se adaug\u0103 linii de cod pentru diverse date pe care le vrem \u00een Tag Manager. Putem testa ce informa\u021bii trimite prin consola de Javascript a browser-elor.<\/p>\n<h3>Auto-tagging &amp; Listeners<\/h3>\n<p>Dar s\u0103 ad\u0103ug\u0103m foarte multe linii de cod \u00een data layer nu este neap\u0103rat un progres fa\u021b\u0103 de instalarea manual\u0103, a\u0219a c\u0103 pentru unele dintre acestea a ap\u0103rut o solu\u021bie automat\u0103 de trimitere. Auto-tagging-ul din GTM a ap\u0103rut pentru a genera events \u00een Google Analytics, iar pa\u0219ii pentru implementarea lui sunt:<\/p>\n<ol>\n<li>Crearea tag-ului care s\u0103 primeasc\u0103 semnalele din site (listeners)<\/li>\n<li>Definirea regulilor pentru tag<\/li>\n<li>Crearea tag-ului Google Analytics pentru \u00eentregistrarea de events<\/li>\n<li>Definirea regulilor pentru care s\u0103 fie \u00eenregistrate events \u00een analytics<\/li>\n<\/ol>\n<h4>Exist\u0103 6 tipuri de listeners \u00een acest moment:<\/h4>\n<ul>\n<li><strong>Click listener<\/strong>: genereaz\u0103 events pentru clickuri; la un click este generat un event GTM numit\u00a0gtm.click, care apoi poate fi apelat cu regula\u00a0<b>{{event}} equals <code>gtm.click<\/code><\/b><\/li>\n<li><strong>Form submit listener<\/strong>: events la completarea de c\u00e2mpuri \u00een formulare; genereaz\u0103 event\u00a0gtm.formSubmit<\/li>\n<li><strong>Link click listener<\/strong>: folosit pentru linkurile spre alte pagini din site, iar forma event-ului de aici este\u00a0gtm.linkClick<\/li>\n<li><strong>Timer listener<\/strong>: m\u0103soar\u0103 timpul \u00een milisecunde; numele event-ului poate fi personalizat<\/li>\n<li><strong>Javascript error listener<\/strong>: semnaleaz\u0103 erorile \u00een rularea scripturilor \u0219i returneaz\u0103\u00a0gtm.errorMessage,\u00a0gtm.errorUrl \u0219i\u00a0gtm.errorLineNumber<\/li>\n<li><strong>History listener<\/strong>: urm\u0103re\u0219te schimb\u0103rile \u00een URL-ul unei pagini \u0219i este util \u00een special atunci c\u00e2nd se lucreaz\u0103 cu virtual pageviews pentru Google Analytics, \u00een events cu numele\u00a0gtm.historyChangeSource,\u00a0gtm.oldUrlFragment,\u00a0gtm.newUrlFragment,\u00a0gtm.oldHistoryState \u0219i\u00a0gtm.newHistoryState.<\/li>\n<\/ul>\n<p>Acestea sunt principalele no\u021biuni pe care trebuie s\u0103 le cuno\u0219ti atunci c\u00e2nd lucrezi cu Google Tag Manager. Pe baza lor, po\u021bi urma tutoriale disponibile online\u00a0pentru cele mai populare implement\u0103ri.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sistemele de tag management au ap\u0103rut din nevoia de a gestiona \u0219i a controla u\u0219or num\u0103rul tot mai mare de coduri (tag-uri) care se adaug\u0103 \u00een aplica\u021bii pentru a func\u021biona cu diverse servicii (ex: analytics, retargeting, testing, personaliz\u0103ri, sondaje, feedback, heatmaps, recomand\u0103ri de produse etc.). Cu un astfel de sistem, \u00een paginile site-lui este ad\u0103ugat [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1552,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[730,12],"tags":[720,717,718,721,719],"class_list":["post-1549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-tag-manager-2","category-technical","tag-data-layer","tag-google-tag-manager","tag-gtm","tag-listeners","tag-tag-management"],"_links":{"self":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts\/1549","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=1549"}],"version-history":[{"count":9,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts\/1549\/revisions"}],"predecessor-version":[{"id":1559,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts\/1549\/revisions\/1559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/media\/1552"}],"wp:attachment":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/media?parent=1549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/categories?post=1549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/tags?post=1549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}