Google Tag Manager: què és i com utilitzar-lo
Eric Seguí
12/10/2017
-
Introducció a Google Tag Manager, una eina gratuïta de Google que, quan la coneguis, no podràs viure sense ella. Descobreix-la!
-
-
-
Google ens ofereix algunes solucions gratuïtes per a tots aquells que volem veure què passa en els nostres negocis. Amb pocs coneixements i una mínima dedicació, podem tenir instal·lades eines d'analítica web com ara Google Analytics i Search Console (antic Webmaster Tools).
La dificultat arriba quan no som programadors i ens cal fer un pas més a l'hora d'implementar codis de seguiment. O volem tenir-ho tot més estructurat i que sigui més fàcil de gestionar sense haver d'embrutar el codi o haver de molestar a l'equip de programació.
D'aquesta necessitat neix Google Tag Manager, un sistema gratuït que ens permet realitzar accions avançades d'anàlisi web i instal·lació de codis sense necessitat de tocar el codi ni tenir gaire coneixements sobre aquest tema. -
Què és Google Tag Manager
-
Google Tag Manager és un sistema d'etiquetatge que permet actualitzar de forma més fàcil i ràpida les etiquetes de seguiment, així com fragments de codi de llocs webs i aplicacions mòbils.
Entre els seus grans avantatges destaca el fet de no haver de dependre d'un desenvolupador (en gran mesura) cada vegada que es requereix implementar o modificar algun element d'analítica.
Un altre dels avantatges que podem trobar és el fet de poder gestionar-ho tot des d'un panell de control, que pot resultar una mica complex al principi, però després de provar algunes coses, tot serà molt més fàcil.
Tots els canvis realitzats a Google Tag Manager es desen en versions, de manera que, si es realitza un canvi erroni, sempre hi ha l'opció de tornar enrere i restaurar la versió anterior. A més, compta amb una opció de Vista Prèvia, per veure si realment funciona la implementació realitzada a través de Google Tag Manager.
Finalment, a la xarxa hi ha força recursos que podem trobar amb una cerca ràpida. Són guies i codis ja provats i programats, per la qual cosa no necessitaràs entendre massa, excepte seguir els passos indicats. -
Parts principals de Google Tag Manager
-
Un cop creat el compte de Google Tag Manager, accedirem a uns panells amb els comptes associats a cada domini o aplicació mòbil.
-
-
-
Dins del compte, ens trobarem amb la vista per defecte Overview, que és la primera opció del menú de l'esquerra (la secció marcada amb el número 1 a la imatge). A continuació, en aquest menú trobem les seccions de:
- Tag
- Triggers
- Variables
- Folders
- Tags: és l'etiqueta a executar dins la web. Aquest avís de normal serà un codi de seguiment que ens el doni algun
programa i ens digui que hem de inserir-lo dins de la web, o algun fragment de codi que necessitem
executar després d'una acció. Per crear una etiqueta, és obligatori fer servir un "trigger",
mentre que les "variables"
no són obligatòries, però sí que en depenen força per
explotar tot el seu potencial.
- Triggers: és el detonant que farà que la nostra etiqueta s'executi o no. Pot ser
tant inclusiu com exclusiu. Per exemple, amb els "triggers" podem dir que l'etiqueta s'executi en totes les
pàgines, a excepció de la pàgina de contacte. Poden tenir diferents tipus de combinacions, des d’URLs fins a clicar elements
dins de la web.
- Variables: són contenidors en els quals podem emmagatzemar
la informació que utilitzem repetides vegades. També podem enviar informació dinàmica a aquestes variables, per després
enviar-la a programes de seguiment, etc.
- Folders: carpetes on ordenar tota la informació que anem
creant, de manera diferent a la classificació per defecte que tenim de Tags, Triggers i Variables.
També tenim el botó "Submit", que ens permet desar la informació i crear-ne una versió, donant-li un nom i una descripció una mica més extensa, per poder identificar cada versió i restaurar-la en cas que calgui. -
Implementació bàsica de Google Tag Manager i Analytics
-
Ja hem vist de manera bàsica i genèrica la plataforma de Google Tag Manager. Ara estem preparats per fer una fàcil i petita implementació juntament amb Google Analytics.
-
Implementació de Google Tag Manager
-
Per començar, accedim al compte principal de Google Tag Manager i, si no tenim compte, premem el botó de "Create Account" a dalt a l'esquerra.
-
-
-
Després de prémer a l'enllaç, veurem un panell en el qual ens demanarà que li donem un nom al compte. Aquest nom de compte només s'utilitza perquè nosaltres, com a usuaris, puguem identificar que el compte pertany a una determinada web o aplicació mòbil.
Tenim l'opció de compartir la informació amb Google de manera anònima. Això els ajuda a fer informes i estudis per millorar la informació que tenen, així com millorar els anuncis. No és obligatori i depèn de la privacitat que vulguem tenir amb les nostres dades, tot i que ja ho hem dit abans, tota la informació es comparteix de manera anònima. -
-
-
Després d'omplir la informació i prémer a següent, sí que haurem d'introduir la nostra web.
-
-
-
Després li donarem al botó de "Create" i acceptarem les condicions legals (si no les acceptes, no pots crear el compte, és obligatori). Després d'acceptar, ens portarà a una finestra amb un pop-up, on ens mostrarà el codi a implementar i ens dirà exactament on hem d'implementar-lo.
-
TIP PRO: Si fem servir alguna plataforma web que accepti instal·lació de plugins o mòduls des d'un panell d'administració, pot ser que, en comptes d'instal·lar aquest codi, únicament necessitis indicar el teu ID de Google Tag Manager, que apareixerà a la vista del teu "Overview ", just al costat dels botons de" Preview "i" Submit "a la part superior dreta de la pantalla. L’ID d'un compte de Tag Manager es veu d’aquesta manera: GTM-XXXXX.
-
Implementació d'Analytics
-
Un cop instal·lat i creat el compte de Google Tag Manager, podem afegir el nostre primer codi de seguiment amb Google Analytics.
El que realitzarem serà crear una variable on emmagatzemar l'UA d'Analytics, que és l'identificador de compte d'Analytics, per més tard afegir-lo al nostre "Tag", que realitzarà un seguiment de l'usuari amb el codi de seguiment de Google Analytics.
Per això, hem d’anar a l'opció de "Variables" al menú de l'esquerra, i prémer a "New". -
-
-
S'obrirà un pop-up, on podrem donar nom a la variable (per aquest exemple, recomano donar-li el nom de ”UA-Analytics"). Si premem a dalt a l'esquerra, podem assignar un nom a la variable i si premem en el requadre del mig blanc de la finestra, podrem assignar el tipus de variable.
-
-
-
A l'hora de seleccionar variables, en aquest cas buscarem l'opció de "Constant". Si bé és cert que actualment comptem amb una variable per al compte d'Analytics, per aquest exemple farem servir la variable constant que és com s'instal·lava antigament, ja que l'objectiu ara és tenir una petita noció de com funcionen les variables.
-
-
-
Per acabar la nostra variable, només ens queda introduir el nostre UA-XXXXXXX-I d'Analytics i desar la variable.
Ara hem d'anar a la secció de "Tags", premem a "New", li donem un nom a l'etiqueta de la mateixa manera que l'hi vam donar a la variable, i després premem sobre el requadre de "Tag Configuration" per indicar el tipus d'etiqueta que volem afegir. En aquest cas, seleccionarem l'opció de "Universal Analytics". -
-
-
Un cop ja hem seleccionat el tipus d'etiqueta que volem afegir, indicarem que el "Tipus de seguiment" és de "Pàgina vista", habilitarem el checkbox que diu "Habilita l'anul·lació de configuració d'aquesta etiqueta", i on posa "ID de seguiment ", afegirem la variable que hem creat prement la icona que conté la petita fitxa que sembla un bloc de Lego.
Amb això li estem indicant a Tag Manager que volem executar el codi de seguiment de Google Analytics a totes les pàgines, i el compte d'Analytics que volem utilitzar. -
-
-
Si seguim una mica més avall, després de completar aquests camps, veurem l'opció de llançar l'etiqueta anomenada "Triggering". Des d'aquí seleccionarem un trigger que ve creat per defecte, anomenat "All Pages". Això fa que l'etiqueta s'executi en totes les pàgines.
-
-
-
Ara ja només ens queda guardar l'etiqueta, i abans de publicar els canvis cal realitzar un test de que tot funciona correctament amb el mode "Preview".
En prémer el botó i accedir a la nostra web des d'una nova pestanya, observarem un bloc a la part inferior de la pantalla. Això ens indicarà si el codi s'ha executat o no (encara que la informació apareixerà en anglès).
Després de comprovar si tot funciona correctament, o falla alguna cosa i s'ha de corregir, publicarem els canvis donant un títol a la versió i una descripció amb els canvis o implementacions realitzades.
Amb tot això, ja tindrem el codi de Google Tag Manager implementat i el tracking bàsic de Google Analytics també, de manera que podrem veure informació bàsica dels usuaris que arriben a la nostre web.
A més, amb Google Tag Manager, un cop instal·lat també serà molt més fàcil instal·lar altres coses com esdeveniments d'Analytics, seguiment de Google Adwords, altres codis de seguiment, etc.
Ara que ja ho tens tot instal·lat i configurat, si vols aprendre alguna cosa sobre Analytics, pots continuar llegint l'article d’Oleoshop sobre les mètriques bàsiques. -
T'ha resultat útil aquest tutorial per implementar Google Tag Manager? En els propers dies, t'explicarem com implementar-lo a Oleoshop. Si et queda algun dubte, pregunta'ns en els comentaris. Estarem encantats d'ajudar-te!
-
Imatges | Google Tag Manager, Fotolia.