Com canviar elements HTML amb Google Tag Manager

L'aparició de l'eina Google Tag Manager (GTM) va simplificar molts aspectes de la implementació d'etiquetes de seguiment en un web. A més de centralitzar totes en un sol espai, la possibilitat d'introduir canvis en el codi de la web sense dependre del departament d'IT ha estat un gran pas endavant per als responsables i tècnics de màrqueting (S'ha acabat el pregar a un programador perquè implementi el codi d'Analytics!).

Però les funcionalitats de GTM van més enllà de l’activació d’etiquetes d’eines d'analítica web. Una de les possibilitats que ens brinda és la capacitat de modificar el codi HTML d'un web en el que s'hagi incorporat el tag de GTM. I per què voldríem fer això? Us ho expliquem a continuació.

Per què modificar elements HTML amb Google Tag Manager?

Abans d'indagar en els motius i oportunitats que ens brinda aquesta funcionalitat de GTM, cal destacar que en modificar el codi HTML d'un web obrim un nou ventall d'errors potencials a la mateixa. Ja sigui pel desconeixement de la persona que apliqui els canvis amb GTM o per la falta de coordinació amb el departament de programació.

Per això, abans d'aplicar aquest tipus d'accions hauríem de, com a mínim, notificar al responsable d'IT de les nostres intencions, a més de validar els canvis un cop aplicats.

Dit això, algunes de les principals raons per modificar elements HTML amb Google Tag Manager són:

• Independència del departament de programació.
• Aplicació immediata dels canvis.
• Possibilitat de testeig i control de versions.
• Facilitat d'ús per a usuaris no programadors.
• Casos més habituals resolts.

Quins canvis HTML podem aplicar amb Google Tag Manager?

Alguns dels casos més habituals per als que utilitzarem GTM en la inserció d'HTML són:

• Codis de seguiment i esdeveniments associats.
• Inserció de marcat de dades amb Schema.
• Etiquetes HTML vinculades al SEO (canonical, robots, hreflang ...).
• Modificació de l'apartat visual d'una web a través d'estils CSS.
• Incorporació de scripts propis.

En definitiva, podem arribar a afegir, modificar o eliminar pràcticament qualsevol codi HTML.

Com canviar elements HTML amb Google Tag Manager?

Després d'haver incorporat el contenidor de GTM i de la configuració inicial, podem introduir canvis en l'HTML d'una web en uns pocs passos:

1. Definir o configurar les variables necessàries.
2. Escollir el Trigger / Activador adequat (totes les pàgines, només en determinades, quan l'usuari faci clic a determinat element, etc.).
3. Crear la Tag / Etiqueta del tipus HTML personalitzat amb el nostre codi.
4. Testejar i implementar els canvis.

Un exemple pràctic: volem implementar l'etiqueta "meta robots" amb el valor noindex per evitar que les pàgines amb filtres a la URL de la nostra botiga online s'indexin a Google. Per a això hauríem de:

• Definir un Trigger / Activador que només actuï a les pàgines que contenen el filtre en la seva URL. Podem utilitzar el tipus "Pàgina vista" i marca l'opció "Algunes pàgines vistes" indicant que l'URL contingui el paràmetre en qüestió.
• Crear la Tag / Etiqueta de tipus HTML personalitzat amb l'etiqueta corresponent i associar-la al Trigger / Activador que hem creat abans.
• Testejar i pujar els canvis.

En alguns casos, si utilitzem codi Javascript personalitzat, haurem de tenir en compte aspectes com l'ordre d'execució dels scripts i de la càrrega del DOM de la pàgina.

I a nivell de SEO, els bots de Google seran capaços de processar aquests canvis?

Els últims avenços dels crawlers de Google semblen indicar que són capaços de processar correctament aquest tipus de modificacions. A més, recentment l'empresa de Mountain View va afirmar que processa i renderitza les pàgines web amb execució de codi Javascript en una segona onada d'indexació. Pel que encara que trigui una mica més en detectar-los, els canvis HTML introduïts amb Google Tag Manager haurien de ser visibles per als bots de Google.

De totes maneres, sempre que puguem, hauríem validar si la nostra implementació s'aplica de forma correcta, tant de cara a bots de rastreig, com per a l'usuari.

Com veieu, Google Tag Manager ens permet introduir tot tipus de canvis en el codi HTML d'una web, amb els avantatges (i riscos) que comporta. Si necessiteu ajuda amb la implementació de GTM o amb qualsevol altre aspecte de l' analítica web, no dubteu a contactar amb nosaltres.