În acest tutorial vom parcurge etapele esențiale pentru a realiza o instalare Google Tag Manager (GTM) pe website. Avantajul major al acestui serviciu este că ne permite să adăugăm/gestionăm cod de tracking de la diverse alte platforme de servicii fără a ne mai bate capul cu implementarea codului propriu-zis.

Astfel, toate codurile vor fi rulate prin GTM. De aceea este important ca încă de la început să ștergem orice cod am avea deja instalat pe website deoarece vom avea date dublate dacă în același timp rulează codul propriu-zis și cel instalat prin GTM.

1. Accesați platforma Google Tag Manager

Serviciul poate fi accesat aici. Manual îl găsiți după o căutare Google pe sintagma “Google Tag Manager” și e de obicei primul rezultat.

Odată ajunși aici, accesați Sign In dacă aveți deja cont. Dacă n-aveți cont, accesați Start for free unde vă veți crea unul.

Accesare platformă pentru a realiza o instalare Google Tag Manager

2. Setarea contului

După înregistrare/accesare, urmează setarea inițială/de bază a contului. La account name introducem numele de cont dorit. Acesta este de obicei numele website-ului.

Setarea contului Google Tag Manager

După care alegem țara. Sub aceasta avem o opțiune de a împărtăși cu Google în mod anonim datele noastre de cont pentru îmbunătățirea serviciilor. Eu am ales să accept (cine n-ar vrea platforme mai performante), însă nu e obligatoriu. Poți să lași nebifat dacă dorești. Apasă pe Continue.

La “container name” introduci adresa website-ului pe care îți dorești instalat GTM-ul. După care alegi tipul platformei, dacă e website, iOS, Android sau AMP. Cum ghidul este despre website, noi ne vom concentra pe această platformă. Alegeți Web și apăsați pe Create.

Setare cont nou Google Tag Manager (GTM)

Înainte de creare se va deschide o secțiune specială cu termenii și condițiile de utilizare. Citiți, bifați ce e de bifat și acceptați.

3. Setarea codului

După crearea contului vom primi un cod ce arată cam așa.

Cod Google Tag Manager

Prima parte trebuie pusă în secțiunea de <head> a website-ului, iar a doua parte după tag-ul de <body>. Dacă închideți fereastra, puteți să regăsiți codul în secțiunea de Admin → Container → Install Google Tag Manager.

a. Manual

Există mai multe modalități de a instala aceste coduri. Noi vom lua ca exemplu platforma WordPress. Primul mod este cel clasic unde mergem în codul website-ului cu copy-paste.

Pentru asta accesăm din contul de WordPress Appearance → Editor și căutăm la Theme Files în dreapta folder-ul de Theme Header (header.php). Aveți grijă ca tema utilizată de website în prezent să fie aleasă la secțiunea de “Select theme to edit” în dreapta sus.

Vedem unde începe tag-ul de <head> și punem primul cod cât mai sus posibil. În cazul meu, l-am pus imediat după acel link de profile. Voi poate o să aveți altceva sau chiar nimic în deschidere după head. Acest lucru depinde de tema în sine a website-ului.

Plasare cod <head> Google Tag Manager

Al doilea cod îl plasăm după tag-ul de <body> care se află pe aceeași pagină, puțin mai jos de <head>. Aceeași poveste, l-am pus după acel php bodyclass.

Plasare cod <body> Google Tag Manager

După ce terminăm apăsăm pe Update File și am terminat.

b. Cu Plugin-uri

Dacă ai website-ul pe WordPress și nu vrei să intri în cod, poți să utilizezi plugin-uri pentru a pune codul. Cel mai popular plugin de plasare este “DuracellTomi’s Google Tag Manager for WordPress”.

Plasare cod Google Tag Manager cu plugin DuracellTomi's Google Tag Manager for WordPress

După instalare, vei fi întâmpinat de această interfață. În acest caz nu trebuie să copiezi tot codul, ci doar ID-ul. Îl găsești în mai multe locuri, cum ar fi pe noua interfață de lucru (workspace) în dreapta sus, sau dacă accesezi Admin → Container → În dreapta numelui alocat.

Locul de plasament a codului este by default în footer, chiar dacă plugin-ul în sine nu recomandă asta. Așadar, ceea ce trebuie să facem este să alegem Custom și să urmăm instrucțiunile. Va trebui să inserăm acel cod nou oferit în secțiunea de <body>, cum am făcut și cu a doua parte a codului original. Ceea ce după părerea mea nu prea are rost deoarece ai ales această variantă fix ca să nu umbli la cod.

Interfață DuracellTomi's Google Tag Manager for WordPress

Poți să alegi altă variantă de plasare însă există riscuri cu fiecare.

c. Avantaje și dezavantaje

Personal recomand instalarea manuală deoarece mi se pare mult mai ușoară decât să te complici cu un plugin. Atunci când pui un intermediar la mijloc devine mai dificilă toată treaba. De exemplu, plugin-ul utilizat anterior are mult mai multe opțiuni după instalarea codului. Dacă îți permite timpul poți să stai, să citești și să experimentezi cu fiecare. Însă dacă vrei o instalare rapidă, codul manual e soluția.

În plus, dacă se strică ceva trebuie să verifici o chestie în plus, că poate e de la plugin. Mai ales când se schimba versiunea de WordPress sau a plugin-ului și trebuie să ai grijă să verifici dacă totul încă rulează corespunzător.

Astfel, pe varianta TLDR avem:

Manual

  1. Avantaje: rapid, conexiune directă.
  2. Dezavantaje: trebuie să ai acces la cod și modificarea lui. Fără back-up se pot produce schimbări greu de remediat dacă implementarea a fost executată greșit. Copiază tot codul într-un loc sigur în caz de orice.

Plugin

  1. Avantaje: nu te atingi de cod
  2. Dezavantaje: monitorizare constantă a compatibilității dintre WordPress și plugin, tot trebuie intrat în cod pentru setarea cea mai optimă, mai multe opțiuni de ales (documentarea funcționalității lor).

4. Verificarea codului de instalare Google Tag Manager

Ok, avem codul pus, de unde știm că funcționează așa cum trebuie?

În primul rând menționez că dacă vrei să testezi implementarea acestuia, trebuie să-l publici pe website, așa gol cum este (gol as in fără a avea coduri de la alte servicii). Astfel, trebuie doar să-i dai Submit din workspace și să-i pui ceva Version Name și Version Description, după care apeși pe Publish.

Avem 2 metode la dispoziție. Pentru început, vom selecta din workspace butonul de preview. După care vom merge pe website. Dacă ni se afișează această consolă, înseamnă că Google Tag Manager este prezent pe website. Intră pe mai multe pagini pentru a fi sigur/ă că acesta e implementat peste tot.

Verificare Google Tag Manager cu consola

A doua metodă este să utilizăm Tag Assistant, o extensie a browser-ului Chrome pentru a identifica tag-urile de pe website. După ce-l instalezi de aici acesta o să-ți apară în dreapta sus în tab. Dă-i click pe el și activează-l. După ce apeși pe Enable, dacă totul e setat corect ar trebui să observi un icon de tag verde cu o față zâmbitoare, ca-n exemplul de mai jos.

Verificare Google Tag Manager cu Tag Assistant

Dacă există probleme acesta va avea diverse culori în funcție de gravitatea acestora. Dă click pe tag și citește sugestia de optimizare de la “Where to optimize” în acest caz.

O mică precizare, în cazul în care sugestia e de “Non-standard implementation”, asta înseamnă că Tag Assistant nu a găsit codul clasic pe website deoarece acesta a fost alterat sau implementat printr-un alt program ce gestionează tag-urile. Această optimizare poate să-ți apară dacă ai de exemplu Google Analytics instalat prin Google Tag Manager, însă nu reprezintă o problema.

Însă dacă ai alterat codul original și nu utilizezi GTM, ar fi bine să îl verifici să vezi dacă merge corespunzător.

Și cam atât. Felicitări! Tocmai ai realizat o instalare Google Tag Manager pe website-ul tău. Spor la implementat coduri.

 

Dă-i un share dacă ți-a plăcut!
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share