Índice de contenidos
Què és Google Tag Manager?
Google Tag Manager (GTM a partir d’ara) és una eina gratuïta que us permet gestionar i desplegar etiquetes web de màrqueting.
Aquestes etiquetes no són més que fragments de codi o píxels de seguiment que s’insereixen al vostre lloc web (o aplicació mòbil) sense haver de modificar el codi font de forma massiva.
Per què serveix?
Google Tag Manager és clau per a qualsevol màrqueting que vulgui tenir un control de l’ús que donen els visitants al seu lloc web , ampliant de forma substancial la informació que ofereix la suite d’Analytics.
Usar Tag Manager per a qualsevol projecte de consultoria SEO és clau per poder tenir números de les interaccions a la web d’un client (i per veure el creixement de les interaccions amb el temps), i que aquest client pugui disposar de xifres de ROI concretes del que li està aportant el SEO al seu negoci.
Rodanet.com
En aquest tutorial et mostrarem com instal·lar i configurar Google Tag Manager en un lloc web basat en WordPress (ja que és un dels CMS més populars i en què és molt comú treballar SEO per a WordPress ) perquè comencis a tenir números i xifres concretes sobre les interaccions que els usuaris realitzen al teu lloc web.
Petita introducció a Google Tag Manager
Quan va aparèixer? Quins elements bàsics són clau per al seu funcionament?
Google Tag Manager és Google Analytics?
GTM és una eina independent de GA, però les dues eines s’integren una amb una altra, i es complementen per donar la màxima informació sobre l’ús d’un lloc web per part dels usuaris.
Google Analytics va aparèixer el 2005, després de la compra de Google de l’empresa Urchin Analytics i el programari d’analítica web, eina que Google va utilitzar per construir l’actual suite d’analítica web. Google Tag Manager va aparèixer per primera vegada el 2012, 7 anys després de l’aparició oficial de Google Analytics, com a eina de gestió d’etiquetes de traça.
Curiositat: l’herència i l’ADN de la ja desapareguda “Urchin Analytics” segueix present a l’actual Google Analytics: tots els ID dels comptes comencen per UA+codi (UA d’ Urchin Analytics ).
Rodanet.com
Elements de Google Tag Manager
Hi ha tres elements principals a Google Tag Manager:
- Etiquetes : Fragments de Javascript inserits al codi web (també anomenats píxels de seguiment)
- Activadors : Són el que diu a GTM quan o com executar una etiqueta
- Variables : Informació addicional que GTM pot necessitar perquè l’etiqueta i l’activador funcionin correctament
A continuació veurem breument què són cadascun d’aquests elements.
Què són les etiquetes?
Les etiquetes són fragments de codi o píxels de seguiment d’eines de tercers o del mateix Google (com ara Analytics). Aquestes etiquetes indiquen a Google Tag Manager el que heu de fer.
Alguns exemples d’etiquetes que trobareu disponibles per defecte a Google Tag Manager són:
- Codi de seguiment universal de Google Analytics (aquest serà el més utilitzat en aquest tutorial)
- Codi de remàrqueting d’Adwords
- Codi de seguiment de conversions d’Adwords
- Codi de seguiment de mapes de calor (com Hotjar, CrazyEgg, etc.)
- Píxels de Facebook
Què són els activadors?
Els activadors són una manera d’activar o executar l’etiqueta que heu configurat prèviament. Els activadors diuen a Tag Manager quan ha de fer el que vols que faci i activar les etiquetes:
- Voleu activar les etiquetes quan visiteu una pàgina?
- Quan l’usuari fa clic a un enllaç?
- Quan toca el botó de “trucar per telèfon”?
Què són les variables?
Les variables són informació addicional que GTM pot necessitar perquè l’etiqueta i la seva activació funcionin. Aquí tens alguns exemples de diferents variables:
- Classes de clic
- Target del clic
- URL concreta
- Esdeveniment
Feta la introducció veurem com pots començar a trackejar accions amb Google Tag Manager al teu WordPress (o el del teu client).
Posar en marxa GTM a WordPress
El primer que cal fer és afegir l’script de seguiment al lloc web. Tot i això, és comú que molts clients el tinguin instal·lat al lloc però no ho recordin perquè simplement no li donen ús.
Pot ser que GTM ja estigui instal·lat al lloc?
Si estàs treballant per a un client és molt important comprovar que ja no tingui instal·lat GTM. En el cas de WordPress hi ha plugins o themes que ofereixen l’opció d’afegir el codi de seguiment de GTM, així que no és estrany trobar ja l’etiqueta.
En qualsevol cas, per veure en qüestió de segons si el client té ja GTM obre qualsevol pàgina del lloc, fes un Ctrl + U (veure codi font) i després busques al codi font usant un Ctrl + F la paraula “GTM”:
- Si no hi apareix, pots seguir amb el tutorial
- Si ja apareix, podeu saltar al pas de “Configuració”
Crea un compte a GTM
El més fàcil per obtenir un ID de GTM és mitjançant el vostre compte de Google Analytics. Simplement entra a GTM amb el teu compte d’analytics seguint els passos següents:
- Entrar a GTM amb el mateix compte de correu que tens per a Analytics: https://www.google.com/intl/es/tagmanager/
- Omple tots els camps necessaris per a la configuració inicial:
- Nom de la web
- País (Espanya pel nostre exemple)
- Opció de domini sense/ni protocol
- Opció web (no app)
- Accepta els termes dús i ja tindràs accés al panell de GTM i un id per al lloc
Enganxar etiqueta de GTM a WordPress (amb plugin o sense)
Nosaltres utilitzem el plugin de Google Tag Manager per a WordPress, encara que pots inserir les etiquetes de seguiment modificant el fitxer header.php de la teva instal·lació de WordPress.
Sense plugin
Si vols fer-ho manualment pots inserir el snippet de GTM modificant el fitxer header.php i inserint el codi a la part de< head> i< body> segons correspongui.
- Els dos snippets (per a la part que ha d’anar al< head> i< body> ) les trobaràs al panell de GTM a Admin> Instal·lar GTM
- Quant al fitxer header.php, aquest fitxer es troba per defecte en tots els WordPress al directori wp-content/themes/nom-de-tu-theme/header.php
Para atenció a no trencar el codi ia les actualitzacions del theme (que poden sobreescriure el fitxer header.php i per tant poden esborrar el snippet que insereixis). Per a aquests casos seria recomanable que utilitzessis un tema fill (child theme).
Rodanet.com
Si no vols complicar-te la vida o no tens experiència modificant fitxers del core de WordPress insereix GTM a la web mitjançant plugin.
Amb plugin
Per introduir l’etiqueta de GTM al codi a través del plugin has de fer:
- Descarrega , puja i activa el plugin GTM de Thomas Geiger
- Fes clic aquí per descarregar plugin GTM per a WordPress
- Configura el plugin que està al panell d’opcions de WordPress (esquerra de la pantalla) has d’anar a Paràmetres> Google Tag Manager
- Insereix l’ID del projecte a la casella corresponent
- A les opcions del plugin selecciona “opció footer” i desa els canvis.
Ja tenim GTM llest per començar a trackejar accions al nostre WordPress. El següent pas ja serà configurar GTM amb les variables, activadors i etiquetes que corresponguin per trackejar les accions que desitgem. Anem a això.
Configuració bàsica de GTM
Veurem com configurar els tres elements bàsics de l’eina (variables, activadors, etiquetes) perquè GTM pugui trackejar l’activitat dels usuaris al nostre lloc.
Els apartats següents es treballen ja des del panell de GTM.
Configuració de variables de clics
El primer pas és configurar les variables que volem trackejar. Començarem pels clics que rebem al nostre lloc web.
Per això hem d’anar a Variables> Configurar
El primer que farem serà configurar el tracking de diferents tipus de clic. Per això seleccionem totes les que apareixen a l’apartat “Clic” i deixem la resta com està:
Un cop fet això podem tancar i crear nova variable.
Creació de la variable per trackejar aquests clics
Un cop tenim les variables configurades (apartat anterior) crearem aquestes variables usant de base les etiquetes del nostre compte de Google Analytics.
Per això anem de nou a l’apartat variables ia baix a la dreta cliquem a “Nova”:
A continuació les dades per crear aquesta variable seran:
- Nom : escrivim un nom per identificar aquesta variable, nosaltres simplement escrivim “Analytics”
- Cliquem a la icona de llapis per editar les opcions de la variable
- Anem a Utilitats> Configuració d’Analytics i posem el nostre ID de Google Analytics, que comença per UA (tipus UA-XXXXXX). Les altres opcions les deixem igual
Un cop realitzats tots els passos ja tenim la variable per al trackeig de clics configurada i creada.
Per a Google Analytics 4
Un cop configurades les variables, no cal crear una variable nova per a Analytics 4.
Afegirem Google Analytics 4 a les etiquetes. El veiem a continuació a l’apartat d’etiquetes.
Configuració dels activadors amb Analytics Universal i Analytics 4
Un cop configurades les variables bàsiques de GTM, hem de definir els activadors, que com hem vist a la introducció són les “regles” que li diuen a GTM quan una acció definida en una variable es té en compte per al recompte (dit altrament : quan s’activa una variable). En aquest cas, el procés és exactament igual per a Analytics Universal i Analytics 4.
Per crear un activador tornarem al menú principal de GTM, anirem a l’apartat Activadores> Nou.
Definirem el nom de l’activador segons l’acció que cal trackejar. Per als següents exemples configurarem diversos activadors que faran un recompte de tots els botons que tinguin a la URL:
- Un número de telèfon
- Un email
- Una localització de Google Maps (botons del tipus com arribar )
- Un formulari enviat
- Amb i sense pàgina de “Gràcies per Contactar”
Activador per a botó/URL de “Trucar per Telèfon”
Definirem el nom de l’activador segons l’acció que cal trackejar. Per aquest exemple configurarem un activador que farà un recompte de tots els enllaços que tinguin un número de telèfon a la URL (el format del qual és el de tel:+número )
Posarem el nom “Telèfon” i definirem l’activador de la manera següent:
- Tipus d’activador: Clic – Només Enllaços
- Marquem ” Esperar Etiquetes ” i ” Comprovar Validació “
- Les condicions per a l’activador són:
- Page URL> coincideix amb l’expressió regular.
- L’activador es dispara a> Alguns clics a enllaços
- Click URL> conté tel:
Fes una ullada a la imatge següent per entendre-ho millor:
Activador per a botó/URL de “Enviar email”
La configuració per a aquest tipus de botons o URL és exactament la mateixa que en el cas del telèfon, (clic aquí per veure la configuració de l’activador ) però per trackejar botons de correu electrònic s’haurà de canviar el que conté la URL.
A la configuració per a l’activador per a emails només hauràs de canviar: Click URL> conté> mailto:
Activador per a botó/URL de “Com arribar”
La configuració per a aquest tipus de botons o URL’s és exactament la mateixa que en el cas del telèfon, (feu clic aquí per veure la configuració de l’activador ) però per trackejar botons de com arribar que portin a Google Maps s’haurà de canviar el que conté la URL i adaptar-ho.
A la configuració per a l’activador per a URL’s que dirigeixin cap a Google Maps només hauràs de canviar: Click URL> conté> /maps/ *
* Nota: si el botó no dirigeix a Google Maps i ho fa a un altre proveïdor de Mapes com Apple Maps o Bing Maps, pot ser que a la URL no aparegui la base /maps/ i per tant hauràs d’adaptar la configuració de l’activador a aquesta URL.
Activador per a botó/URL de formulari SENSE thank-you page
Els activadors per a formularis difereixen una mica quant a configuració als que hem vist anteriorment (telèfon, email…).
Per tant, haurem de crear un nou activador però aquesta vegada configurar-lo de forma diferent respecte als quatre anteriors:
- Tipus d’activador: Visibilitat de l’element
- Mètode de selecció: Selector de CSS
En el cas dels formularis de contacte, en enviar el formulari apareix un missatge de confirmació tipus “Missatge enviat. Moltes gràcies”. Aquest serà l’element que farem servir en aquest activador per mesurar les interaccions.
A la web on volem trackejar els formularis de contacte:
- Enviarem un missatge de prova
- Esperarem que aparegui la frase de confirmació
- Clic dret a aquesta frase i cliquem a Inspeccionar
- Dins la consola d’inspecció, de nou clic dret sobre l’element
- Seleccionem l’opció Copy> Copy Selector
Un cop copiat el Selector de CSS tornem de nou al tauler de control de Tag Manager i continuem amb la configuració de l’activador.
Enganxem al camp Selector d’elements el Selector CSS traient tot el que hi hagi abans de la paraula “form”. Hauria de quedar sempre tipus: form> div… Així podrem trackejar tots els formularis del lloc i no només un de concret.
Haurem de seleccionar a continuació:
- Quan executar l’activador : Cada vegada que un element aparegui a la pantalla
- Percentatge ho deixem per defecte o 50%
- Marquem Reaccionar a canvis del DOM per evitar perdre trackejaments per correccions al codi font
- Deixem la resta d’opcions com estan i guardem els canvis
Activador per a botó/URL de formulari AMB thank-you page
Si comptem amb un formulari que, en comptes de mostrar el missatge de confirmació d’enviament, redirigeix a una pàgina de confirmació d’enviament, l’activador de nou s’haurà de configurar de manera diferent: farem servir la pàgina de confirmació com a element que dispari l’activador .
A les opcions de l’activador seleccionarem Algunes pàgines vistes ia continuació Page URL> Conté> URL-de-la-pagina-en-cuestion
Fes una ullada a la següent imatge per entendre-ho millor:
Configuració de les etiquetes
Com a darrer pas, haurem de configurar les etiquetes perquè la informació recollida per les variables i els activadors s’hi “bolqui”.
Per a Google Analytics Universal
Important:
- Haurem de crear tantes etiquetes com activadors i variables hàgim posat en funcionament.
- El nom de cadascuna de les etiquetes ha d’anar d’acord amb l’activador i la variable que correspongui.
Per a Google Analytics 4
Afegim una nova etiqueta genèrica anomenada “Analytics 4”
En el tipus d’etiqueta, triem Google Analytics: Configuració de GA4
A l’ID de mesurament afegim el codi de seguiment del client, que començarà per G-
Deixem-ho tot igual i passem a la part d’activació.
Aquí afegim tots els activadors que hem creat anteriorment (e-mail, telèfon, formularis, etc.)
Guardem i ha de quedar així la configuració:
Etiqueta per clics a link de “trucar per telèfon”
En afegir una etiqueta nova haurem de seleccionar l’etiqueta de Google Analytics: Universal Analytics
La configuració d’aquesta etiqueta serà de la manera següent:
- Tipus de seguiment : Esdeveniment
- Categoria : Trucada
- Acció : Clic Trucada
- Etiqueta : clicar al símbol de “+” i seleccionar {{Page Path}}
- Hit sense interacció : deixem per defecte a “Falso”
- A Configuració d’Analytics : seleccionem {{Analytics} }
Fes una ullada a la següent imatge per entendre-ho millor:
Per acabar, hem de desplaçar-nos a la secció de baix del tot, on posa “Activació”, cliquem al llapis per editar i seleccionem l’Activador que correspongui (en aquest cas, “Telèfon”).
Configuració etiqueta de telèfon per a Google Analytics 4
Creem una nova etiqueta i canviem el nom a “telèfon”.
A la configuració, triem el tipus d’etiqueta “Google Analytics: esdeveniment de GA4”
A l’apartat d’etiqueta de configuració seleccionem l’etiqueta genèrica que hem afegit anteriorment amb tots els activadors anomenada “Analytics 4”
A continuació, afegim el nom de l’esdeveniment, en aquest cas “click_phone”
I hi afegim els paràmetres de l´esdeveniment. Serà {{Page Path}} tant pel nom del paràmetre com pel valor.
Un cop fet això, passem a l’activació i afegim l’activador del telèfon creat anteriorment.
Guardem la configuració i quedaria així:
Per a les etiquetes següents, caldrà fer els mateixos canvis per a Google Analytics 4.
Etiqueta per clics a link de “enviar email”
Per a l’etiqueta de recompte de correus electrònics enviats haurem de seguir el mateix procés de configuració de l’etiqueta de telèfon realitzant els canvis que corresponguin:
- Nom de la categoria : E-mail
- Acció : Clic e-mail
- Canviar Activació per la de correu electrònic
- Per a Google Analytics 4 repetim el mateix procés, només canviem: nom: click_email i canviar activació per la de correu electrònic.
Etiqueta per clics a link de “Com arribar”
Per a l’etiqueta de recompte de clics a links cap a Google Maps haurem de seguir el mateix procés de configuració de l’etiqueta de telèfon fent els canvis que corresponguin:
- Nom de la categoria : Com arribar
- Acció : Clic com arribar
- Canviar Activació per com arribar
- Per a Google Analytics 4 repetim el mateix procés, només canviem: nom: click_arribar i canviar activació per la de com arribar-hi.
Etiqueta per clics a formularis
Per a l’etiqueta de recompte de clics a links cap a Google Maps haurem de seguir el mateix procés de configuració de l’etiqueta de telèfon fent els canvis que corresponguin:
- Nom de la categoria : Contacte
- Acció : Enviament de formulari
- Canviar Activació per la de formulari
- Per a Google Analytics 4 repetim el mateix procés, només canviem: nom: contact_form i canviar activació per la de formulari
Comprovacions finals de funcionament de GTM
L’últim pas abans de passar-ho tot a entorn real serà comprovar que totes les configuracions anteriors s’han fet correctament. Per això, Google Tag Manager disposa de l’opció de “Vista Prèvia”, que ens permet saber si els esdeveniments s’estan trackejant de manera efectiva.
Primer activem la “Vista prèvia” a GTM:
Anem a la web en qüestió a la mateixa sessió i hauria d’aparèixer el resum d’activitat:
A continuació obrim el compte de Google Analytics, (on es pot veure el recompte dels esdeveniments configurats a Tag Manager), i anem a Tiempo Real> Esdeveniments
De nou a la web del client en mode Vista Prèvia de GTM fem alguna de les accions configurades a Tag Manager (botons de trucada, email, el que sigui…) i comprovem que la plataforma la detecta correctament:
Aquesta acció haurà d’aparèixer també a Analytics, a Tiempo Real> Esdeveniments. Haurem de clicar a l’esdeveniment i comprovar que els noms que hem donat als esdeveniments i la URL des d’on hem fet l’acció són els correctes.
Com a darrer pas haurem de fer aquesta comprovació per a cada un dels esdeveniments que tenim configurats.
Nota: en comprovar que els esdeveniments queden registrats a Analytics de manera correcta fixa’t que no estiguis dins d’un esdeveniment, i t’aparegui l’acció però no sigui de l’esdeveniment que vols comprovar. Dit altrament: tanca la categoria de l’esdeveniment després de cada comprovació
Darrer pas: passar GTM a entorn real
Si les comprovacions anteriors han resultat reeixides, haurem de passar GTM a entorn real de treball, el que s’anomena “Publicar”.
Sortim de la vista prèvia:
Cliquem a “Enviar”:
Descrivim els diferents esdeveniments que hem configurat (nosaltres utilitzem la data al nom i posem els esdeveniments al nom) i cliquem a “Publicar”
Conclusions finals i per què utilitzar GTM als teus projectes ja
Analytics i Tag Manager són les dues eines bàsiques que has de posar en marxa a qualsevol lloc web per saber com funciona un projecte online. Però la diferència entre tots dos és el tipus d’informació que us ofereixen.
Si ranquejar una web fos un partit de futbol, Analytics seria el marcador i Tag Manager les estadístiques de passades i assistències de cadascun dels jugadors. Analitzar bé les dades de totes dues eines t’ajuda a fer els canvis necessaris al teu equip setmana a setmana i mes a mes, perquè a llarg termini puguis guanyar la lliga.
Com hem dit a l’inici d’aquest tutorial, GTM et permet mesurar si els clients estan arribant a la teva web objectiu (ja sigui via formulari de contacte, trucant…) amb números 100% objectius, com va passar en aquest cas d’èxit de web que va passar de 50 a 700 leads al mes .
GTM us permet justificar la vostra feina en un projecte propi o per a qualsevol client.
Especializado en la redacción de contenidos y la gestión de blogs, Desde 2018 investigando y dándole a las teclas para convertirse en un auténtico maestro del WordPress y el SEO on-page.
