Uvod u Google Tag Manager

Google Tag Manager (poznatiji u digitalnom svetu i po skraćenici GTM) je besplatan tag alat kreiran od kompanije Google koji upravlja JavaScript i HTML tagovima. Prvi put se pojavio u oktobru 2012. godine i od tada ima dve zvanične verzije. Trenutno je aktuelna Google Tag Manager version 2 koja je lansirana u oktobru 2014. godine zajedno sa API-jem i čini alat dosta jednostavnijim za korišćenje od prethodne verzije.

Zašto Google Tag Manager?

GTM je besplatan alat koji služi za upravljanjem tagova (kodova) na sajtu. Razvijen je od strane Google-a krajem 2012. godine. Korišćenjem GTM-a se lakše i agilnije postavljaju različiti kodovi za praćenje (tagovi). Bez obzira što su GA i GTM dva odvojena i nezavisna alata, kroz GTM možete postaviti tracking kod Google Analytics-a što će ujedno biti i tema ovog tutorijala/teksta.

1. Manja zavisnost od programera (upravljate i postavljate kodove nezavisno od programera kroz GTM)
2. Lakoća upravljanja kroz intuitivan GTM interfejs
3. Debugging  i mogućnost za testiranjem tagova pre njihovog objavljivanja na sajtu
4. Version control kako bi se pratile promene kroz GTM nalog
5. User management koji omogućava lakše upravljanje korisnicima koji imaju pristup alatu (definisanje nivo-a njihovog pristupa)
6. GTM brine o tome da vaš GA kod uvek bude up-to-date (nema potrebe da se manuelno update-uje kod kada Google napravi promene)
7. Mogućnost prikupljanja dodatnih podataka (npr. broj skinuti PDF dokumenata, klikovi na linkove, pregledi YouTube video sadržaja na sajtu, interakcije na kontakt formu, klikovi na CTA dugmiće itd)

Šta predstavlja tag

GTM Tag predstavlja delove JavaScript koda koji se izvšavaju (ispaljuju) na stranici i šalju podatke sa sajta ili mobilne aplikacije u Google Analytics, Google AdWords, Twitter, Facebook ili neki drugi alat sa kojim je povezan Google Tag Manager.

Neki od primera tagova su:

• Google Analytics Tag (Google Analytics Tracking Code)
• Google AdWords Conversion Tracking Tag
• Facebook Tag (Facebook Pixel Code)

Ovi tagovi tj. delovi koda se dodaju direktno na sajt tako što se  copy / paste načinom ubace u header.php ili alternativno tag se može indirektno dodati na sajt kroz Google Tag Manager.

Tag se izvršava kada se stranica učita ili kao odziv na neku od interakcija na sajtu. U Google Tag Manager-u se definišu trigeri sa tagovima da bi se preciziralo kako bi trebalo da budu izvršeni.

Primer trigera je predefinisan “all pages” i može se koristiti da se tag izvršava na svakoj stranici na sajtu kada je učitana.

Razlika između Google analitike i Google Tag Managera

Google Tag Manager je alat koji pre svega olakšava upravljanje tagovima tako što definiše pravila kada neki tag treba da se izvrši. Takođe omogućava da se tagovi testiraju kako bi se uverili da su zapravo dobro postavljeni kada se izvrši željena aktivnost na sajtu.

Na primer ako se učita određena stranica ili ako posetioc pritisne određeno dugme na sajtu. Tagovi mogu da se menjaju i način na koji rade oni rade, bez promene izvornog koda koji je prvenstveno postavljen na sajt. Treba napomenuti da Google Tag Manager ne skuplja podatke dok tagovi koji se izvšavaju mogu da skupljaju podatke.

Google Analytics je sa druge strane alat koji skladišti i manipuliše podacima sa sajta ili mobilne aplikacije, generiše izveštaje, pruža podatke i statistiku saobraćaja kroz svoj interfejs.

Prednosti Google Tag Managera

Velika prednost ovog alata je u tome što se dodavanjem tagova i korišćenjem njih dobija mnogo veća kontrola sledećih aktivnosti:

• kada tag treba da se izvrši ili kada ne treba
• gde tag treba da se izvrši ili gde ne treba
• šta tag treba da uradi kada se izvrši

Sa Google Tag Manager-om može se jednostavno dodati, obrisati, dozvoliti ili zabraniti bilo koji tag na sajtu i vrlo lako se može promeniti funkcionalnost bilo kog tag-a. Ako se recimo ne koristi GTM onda bi bilo neophodno da se ručno dodaje i briše svaki tag na svim stranicama sajta, ne bi mogao da se ugasi i da se ponovo aktivira tag itd.

Ako dođe do situacije da mora da se ugasi tag, morao bi da se izbriše kod sa stranica sajta što zahteva dodatan posao a da bi se opet aktivirao moralo bi da se vrati tag na stranice itd.

To predstavlja kao i što zvuči mnogo posla i oduzima puno vremena a takođe je i potencijalno veliki problem kod velikih i kompleksnih sajtova.

Naravno ne treba zaboraviti da u slučaju da nije implementiran Google Tag Manager je potrebna velika pomoć web developera i programera koji održavaju sajt, dok je sa korišćenjem Google Tag Manager-a ta pomoć svedena na minumum.

Za implementiranje naprednog praćenja kao na primer, scroll tracking-a, ecommerce tracking-a, enhanced ecommerce tracking-a potrebno je adekvatno znanje HTML, JavaScript , DOM (Document Object Model) i svakako više o ovim načinima praćenja ću se truditi da obuhvatim u nekim od narednih tekstova.

Ključni benefiti korišćenja GTM

Sa korišćenjem Google Tag Manager-a ne postoji potreba za editovanjem koda sajta zbog dodavanja, brisanja i ili editovanja tagova. Umesto toga jedan kod se smešta na svaku stranicu sajta i taj kod se zove Google Tag Manager container code i sve se radi sa jedne centralne lokacije u GTM nalogu.

Taj container code se bukvalno ponaša kao skladište jer može da sačuva i razvije razne marketing i analitičke tagove koji su bitni za vaš biznis i sajt.

Kroz user friendly interfejs mogu se dodati,  editovati, isključiti ili izbrisati bilo koji tagovi uz samo nekoliko klikova. Nema potrebe za dodavanjem kodova kroz svaku stranicu sajta zbog samog održavanja kodova i nema dodatne potrebe za IT pomoć.

Korišćenjem Google Tag Manager-a se može znatno unaprediti brzina sajta jer kada se postave tagovi kroz njega, oni se postavljaju asinhrono, što znači da sporo učitavanje nekog taga neće uticati i neće blokirati ostale tagove od izvršavanja.

Napredna analitika uz Google Tag Manager

Najveća prednost GTM je takođe u mogućnosti korišćenja napredne analitika praćenja sajta. Uz ovaj alat dolazi dosta in-build tagova i variables kroz koje se mogu implementirati napredna praćenja za veoma kratko vreme.

Za isti zadatak bi trebalo oko nekoliko dana ili nedelja bez pomoći ovog alata. Jedan od primera je svakako ako želite da pratite klikove na sve eksterne linkove na sajtu kako bi procenili koliko saobraćaja vaš sajt šalje na ostale sajtove to možete da uradite vrlo brzo uz pomoć ovog alata.

Google Tag Manager anatomija

Ako ste se registovali na Google Tag Manager vaš containder kod možete videti ako pratite sledeće korake:

• Login na nalog https://tagmanager.google.com/  ili kreirajte nalog (može da se koristi već postojeća gmail adresa)
• Kliknite na ADMIN tab
• Kliknite na Install Google Tag Manager link (slika u nastavku)

Container tag pruža sve potrebne funkcionalnosti i sastavljen je iz dva dela. Prvi deo se postavlja u header sekciju (<head>…..</head>) na svim stranicama sajta ili kroz header.php, dok drugi deo se postavlja odmah nakon početka <body> taga na svim stranicama sajta.

Deo koda koji je prikazan na slici a počine GTM-TXAAA se zove container ID. Ovaj ID se koristi kao jedinstvena identifikacija svakog GTM container tag-a.

Drugi deo koda koji čita gmt.js je JavaScript biblioteka koju koristi container tag. Nakon što je container tag kod (slika ispod) dodat na sajt, može se smatrati da je GTM instaliran.

Google Tag Manager templates

Tag templates omogućavaju lako i brzo dodavanje tagova na sajtu. Postoji preko 100 predefinisanih templejta a lista svih raspoloživih se može videti klikom na Add a new tag na stranici container overview kao što je prikazano na slikama u nastavku.

 

Ako želite da koristite svoj tag, to možete uraditi sa opcijom Custom HTML tag ili Custom Image Tag.

Google Tag Manager trigeri

Trigger (okidač) predstavlja uslov koji mora da se ispuni tokom vremenskog perioda gde tag treba da se izvrši ili ne. Tag treba da ima makar jedan trigger kako bi se izvršio. Trigger je sastavljen od jedne aktivnosti i jednog ili više filtera i svaki filter ima formu [Variable] [Operator] [Value].

Postoje dve vrste trigger-a

• Triggeri koji se ispaljuju
• Triggeri koji blokiraju

Google Tag Manager varijable

Varijable u kontekstu Google Tag Manager-a predstavlja funkciju koja se poziva od drugog taga, trigera ili varijable. Koriste se i za trigere i za tagove. Što se tiče trigera koristi se tako što definiše filtere koji preciziraju kada nešto treba da bude izvršeno (primer execute pageview trigger kada je url variable dusanmilosevic.com). U Google Tag Manager-u varijabla se označava pomoću sledeće sintakse {{Variable Name}}.

Postoje dve vrste varijabli:

• build in varijable
• user defined varijable

Google Tag Manager folderi

Kroz foldere se mogu organizovati tagovi, trigeri i varijable po imenu projekta, po imenu tima itd.

Na primer ako želite možete da grupišete sve tagove, trigere i varijable koje se tiču praćenja video klipova tako što ćete kreirati folder pod nazivom video praćenje i nakon toga dodati sve ono što se tiče njega. Folderi mogu da se obrišu ili preimenuju i takođe da se sve iz njih doda ili obriše u bilo kom trenutku.

Praktičan primer: Setup GA + GTM

U nastavku ću na konkretno primeru objasniti kako da implementirate Google Analytics kod kroz Google Tag Manager (GTM) alat.

Objasniću takođe zašto je predlog da ovo uradite preko GTM-a i koje su prednosti njegovog korišćenja uz neophodne korake kako bi postavka bila uspešna. Skrećem pažnju da je pre početka neophodno da imate otvorene naloge u alatima Google Analytics i Google Tag Manager i da imate implementiran GTM kod na vašem sajtu tj. stranicama po best practice uputstvu, što je preduslov za dalje korake.

Nakon uspešnog logovanja u Google Tag Manager preko vašeg Gmail naloga potrebno je da konfigurišete Tag, Trigger (uslov ispaljivanja Tag-a) kao i varijablu.

Koraci su sledeći:

1. Definisanje Tag-a i njegovog imena
2. Definisanje Trigger-a
3. Definisanje Google Analytics Variable
4. Debugging (provera setovanja) kroz Preview mode
5. Debugging kroz Google Tag Assistant
6. Publish-ovanje tj. objavljivanje podešavanja na sajt

Kreiranje GTM taga i trigera za Google analitiku

Nakon uspešnog logovanja otvoriće vam se početni ekran. Kliknite na New Tag.

Otvoriće vam se novi ekran. Kliknite na Untitled Tag u gornjem levom uglu kako bi ga preimenovali.

Praksa je da se uvek razumljivo imenuju tagovi, triggeri i varijable. Imenovanje je posebno bitno ako je slučaj da više od jedne osobe dodaje i edituje u GTM nalogu.

Pravilo za definisanje imena je sledeće: Na početku je potrebno da uvek bude ime alata/tip koda, nakon toga sledi opis šta se meri i a nakon toga bilo koja dodatna informacija koja opisuje Tag.

U našem primeru bi to izgledalo ovako. GA – Pageviews – All Pages

Objašnjenje: GA je skraćenica za Google Analytics, sobzirom da ubacujemo tracking kod, merimo Pageviews, a opis je All Pages jer želimo da tracking kod bude ubačen na svim stranama sajta.

 

Nakon definisanja imena Tag-a kliknite na veliku ikonicu na kojoj je ispisano Choose a tag type. Otvoriće vam se novi ekran pod nazivom Tag Configuration na kome se konfiguriše Tag. 

Sa desne strane će se otvoriti lista Featured Tag-ova. Ovo je lista već predefinisanih Tag-ova koja će nam u ovom slučaju biti vrlo korisna. Sobzirom da želimo da ubacimo Google Analytics tag na sajt u listi ćemo selektovati Universal Analytics. 

Nakon selektovanja Universal Analytics-a u polju Track Type iz padajućeg menija je potrebno da se selektuje Pageview.

Napomena: Selektovali smo Pageview jer na sajtu želimo da izmerimo stranice koje korisnik posećuje. Međutim ako želite da izmerite određenu interakciju na nekoj od stranica kao na primer klik na dugme za promociju ili CTA dugmić, potrebno je da selektujete Event umesto Pageview.

Pošto smo uspešno selektovali tip praćenja, u sekciji Google Analytics Settings je potrebno da definišemo varijablu tj. da ubacimo GA ID koji će definisati varijablu. Ovo će omogućiti fleksibilnost a pogotovu se savetuje korišćenje varijable jer se ta informacija uvek kasnije može koristiti.

Kliknite na New Variable i u sekciji Tracking ID upišite vaš Google Analytics Tracking ID. Kako bi se lakše snašli varijablu možete imenovati kao vaš GA tracking ID. Kod opcije cookie domain ostavite default auto pod uslovom da nemate više Google Analytics tagova na sajtu. Kliknite SAVE.

Kod polja Triggering kliknite i selektujte opciju All Pages. Nakon što kliknete SAVE setup je završen.

Gde se nalazi Google Analytics Property ID?

1. Ulogujte se preko vaše Gmail adrese u Google Analytics nalog
2. Selektujte vaš Account/Sajt
3. U donjem levom uglu selektujte ADMIN
4. Kod Property sekcije kliknite na Tracking Info/Tracking Code
5. Prikazaće vam se vaš GA ID za selektovan account (uvek počinje sa UA)

Debugging i testiranje kroz Google Tag Manager

Nakon postavke potrebnih tag-ova, trigger-a i definisanje Google Analytics variable koje smo uradili u prethodnim koracima, neophodno je da pre objavljivanja testiramo postavku da bi utvrdili da je sve urađeno kako treba i bili sigurni da možemo da je objavimo.

Kod početnog ekrana u Google Tag Manager-u videćete u gornjem desnom uglu dugme PREVIEW MODE. Preko njega ćete proveriti postavku. Nakon što vam se pojavi narandžasto obaveštenje da ste u Preview modu možete da otvorite vaš sajt.

Na drugoj polovini ekrana videćete da će se otvoriti preview konzola koja prikazuje ispaljene Tag-ove.  Ako ste sve uradili kako treba, pojaviće vam se vaš definisan tag GA – Pageviews – All Pages. To je znak da se tag uspešno ispalio.

Takođe predlog je da proverite postavku i kroz Google Tag Assistant. Ako nemate ovaj Chrome plugin, predlažem da ga obavezno skinete. Možete ga pronaći na zvaničnom Chrome web store-u koji se nalazi na ovom linku. 

Nakon instaliranja, otvorite vaš sajt. U gornjem desnom uglu videćete plavu ikonicu, klinite na nju i aktivirajte je tako što ćete da kliknete na ENABLE. Ponovo refresh-ujte sajt i ako vidite kroz Tag Assistent ID-jeve Google Analytics i Google Tag Maanger naloga to znači da ste uspešno implementirali GA kod.

Treba napomenuti da ako nešto niste uradili dobro, ikonice u prozoru će biti crvene.

Google Tag Manager zajednice

Reddit zajednica https://www.reddit.com/r/GoogleTagManager/

GTM zvaničan product forum https://productforums.google.com/forum/?linkId=64852454#!forum/tag-manager

Google Tag Manager kurs

Google Analytics akademija je nedavno izbacila (vratila) kurs koji se tiče osnova Google Tag  Managera. Svakako je predlog da ga nakon čitanja ovog teksta pogledate i pređete detaljno. Nalazi se na ovom linku https://analytics.google.com/analytics/academy/course/5 

Zaključak

Google Tag Manager je vrlo koristan alat za digitalni marketing i uz njega aktivnosti oko postavke kodova i implementacije dodatnog praćenja na sajtu postaju agilnije i fleksibilnije. Omogućava virtuelni pristup vašem sajtu sa ciljem objavljivanja tagova.

Sa svim svojim mogućnostima i karakteristikama predstavlja esencijalan alata za svakog u digitalnoj sferi.

Predlažem za kraj da pogledajte i odlične blogove:

• Simo Ahava blog
• Measureschool 
• Analyticsmania

Srećno tagovanje!