Tag Manager első lépések
"Google Tag Manager", egyre többet találkozunk ezzel a szóval, és amikor szeretnénk többet megtudni róla gyakran csak kódokkal, változókkal, bonyolultan hangzó kifejezésekkel találkozunk. Ráadásul új verziója van ami "másképp működik", nem csoda ha gyorsan elsüllyedünk a kérdőjelek tengerében. Hozzáteszem aki nem ismerte a régit(V1), ne kezdjen utána olvasni mert Június 1- től megszűnik, ráadásul komoly különbségek vannak a verziók között, emiatt könnyen összekavarodhatnak az információk, és akkor már tényleg teljes lesz a káosz a fejünkben.
Tehát mi is az a GTM 2.0 és mire jó?
Először is, nem ez az egyetlen címkekezelő a piacon, nem a Google találta fel a spanyol viaszt, de ez jól használható együtt a többi google termékkel, és akkor már értjük is, hogy miért ingyenes.
Ha online marketinggel foglalkozol rengeteg eszközt használsz, hogy weboldalad a lehető legjobban teljesítsen. Méred a látogatókat és azok viselkedését, a marketing kampányaid hatékonyságát, A/B tesztelsz, használod a remarketinget és a többi... Ahhoz, hogy ezek a rendszerek működjenek, különböző javascript kódokat kell elhelyezned weboldalad forráskódjában. Ezeket a kód címkéket tudod egyszerűbben kezelni és lefutásukat szabályozni a GTM használatával, ezenkívül aktiválási szabálynak eseményeket adhatunk meg, mint például kattintás vagy egy 'form' kitöltése és elküldése, amiket továbbítva az analitikai szoftverünknek, hasznos információkat kapunk oldalunk működéséről.
Kezdjük is el az implementációt!
A legelső lépés, hozz létre egy google accountot ha még nincs. Ha google termékeket szeretnél használni, mint a GTM, Google Analytics vagy a Webmaster Tools stb.. akkor erre mindenképp szükséged lesz.
Erre a linkre kattintva hozz létre egy tag manager accountot:
Adj nevet a fióknak és lépj tovább:
A következő lépésben hozz létre egy tárolót. A tárolók fogják tartalmazni a követőcímkéket (TAG) , tehát érdemes a webhely címére elnevezni, pl.: teszt.hu.
Miután létrehoztuk, megkapjuk a tároló kódját, valahogy így fog kinézni:
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Ezt a scriptet kell elhelyezni weboldalad nyitó <body> címkéje után!
Alapértelmezetten sok ismert szoftver címkéje integrálva van, így ezeket pár kattintás és néhány érték megadásával könnyen be is üzemelhetjük, ezekről lesz szó a későbbiekben:
Az egyéni HTML címke lesz számunkra a legérdekesebb ahol <script></script> tag-ek közé illesztve egyedi kódokat tehetünk be.
Innentől elkezdhetjük a munkát, ám előtte vizsgáljuk meg a kódunkat, és pár alapfogalommal ismerkedjünk meg.
Mi az a Data Layer?
A Data Layer nem más mint egy Javascript tömb (array), amibe adatokat (változókat, objektumokat) pakolunk , hogy azután felhasználhassuk őket. Adatrétegnek is nevezik. Semmi különleges nincs benne, ez az alapértelmezett neve az adatstruktúrának amit a Google Tag Manager használ!
Tehát egy üres adatréteg így néz ki amit dataLayer-nek nevezünk el:
dataLayer = [];
Mik azok a javascript objektumok(object)?
A JavaScript objektum egy olyan összetett adatszerkezet, amelynek tetszőleges típusú adattagjai, azaz tulajdonságai (properties), illetve függvényei, azaz metódusai (methods) vannak.
Példa egy üres objektumra:
objA = {};
Hogyan küldjünk adatot az adatrétegbe tehát a Data Layerbe?
A dataLayer odjektum 'push' metódusával!
pl.: dataLayer.push({'valtozo_neve': 'erteke'});
Dinamikus változók használatával hasznos információkat tárolhatunk, majd küldhetünk tovább az analitikai szoftverünknek, például a Google Analytics-nek.
Mi az az 'event' data layer változó?
Egy speciális data layer változó amit javascript esemény figyelőkkel (event listeners) használva, a felhasználók interakcióihoz köthetjük címkéink lefutását. Például egy linkre kattintás esetében:
<a href="http://tagmanager.blog.hu" id="link" name="link"
onclick="dataLayer.push({'event': 'link-click'});" >LINK</a>
Ebben az esetben az 'event' változó értéke a linkre kattintáskor frissül!
Térjünk vissza kicsit a linkünkhöz és vizsgáljuk meg mit csináltunk.
AZ HTML 'onclick' eseménykezelőt használtuk, hogy kattintáskor tüzeljen a kódunk.
Ugyan ezt a hatást érjük el így is javascripttel:
document.getElementById("link").onclick=function(){
dataLayer.push({'event': 'link-click'})
};
vagy:
document.getElementById("link").addEventListener('click' , function(){
dataLayer.push({'event': 'link-click'})
});
3 FONTOS esemény (event) amiket a GTM az oldal betöltődési folyamat bizonyos pontjainál tesz be a data layer-be:
gtm.js: Ez az esemény bekerül a data layerbe amint a GTM konténer kódunk betöltődött.
gtm.dom: Amikor a DOM(Document Object Model) betöltődött akkor kerül be ez az esemény a data layerbe.
gtm.load: Amikor az ablak 100%-osan betöltődött képekkel, minden kóddal együtt.
Átnevezhetem az adatrétegemet?
Alapértelmezetten dataLayer a neve, persze, kicsit megváltoztatva a kódot
egyszerűen megtehetjük:
<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start':
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘//www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’NEWNAME‘,’GTM-XXXX’);</script>
<!– End Google Tag Manager –>
