Cómo cambiar elementos HTML con Google Tag Manager

La aparición de la herramienta Google Tag Manager (GTM) simplificó muchos aspectos de la implementación de etiquetas de seguimiento en una web. Además de centralizarlas todas en un solo espacio, la posibilidad de introducir cambios en el código de la web sin depender del departamento de IT ha sido un gran paso adelante para los responsables y técnicos de marketing (¡Se acabó el rogar a un programador para que implemente el código de Analytics!).

Pero las funcionalidades de GTM van más allá de la activación de etiquetas de herramientas de analítica web. Una de las posibilidades que nos brinda es la capacidad de modificar el código HTML de una web en la que se haya incorporado el tag de GTM. ¿Y por qué querríamos hacer esto? Os lo contamos a continuación.

¿Por qué modificar elementos HTML con Google Tag Manager?

Antes de indagar en los motivos y oportunidades que nos brinda esta funcionalidad de GTM, cabe destacar que al modificar el código HTML de una web abrimos un nuevo abanico de errores potenciales en la misma. Ya sea por el desconocimiento de la persona que aplique los cambios con GTM o por la falta de coordinación con el departamento de programación.

Por ello, antes de aplicar este tipo de acciones deberíamos de, como mínimo, notificar al responsable de IT de nuestras intenciones, además de validar los cambios una vez aplicados.

Dicho esto, algunas de las principales razones para modificar elementos HTML con Google Tag Manager son:

• Independencia del departamento de programación.
• Aplicación inmediata de los cambios.
• Posibilidad de testeo y control de versiones.
• Facilidad de uso para usuarios no programadores.
• Casos más habituales resueltos.

¿Qué cambios HTML podemos aplicar con Google Tag Manager?

Algunos de los casos más habituales para los que utilizaremos GTM en la inserción de HTML son:

• Códigos de seguimiento y eventos asociados.
• Inserción de marcado de datos con Schema.
• Etiquetas HTML vinculadas al SEO (canonical, robots, hreflang…).
• Modificación del apartado visual de una web a través de estilos CSS.
• Incorporación de scripts propios.

En definitiva, podemos llegar a añadir, modificar o eliminar prácticamente cualquier código HTML.

¿Cómo cambiar elementos HTML con Google Tag Manager?

Después de haber incorporado el contenedor de GTM y de la configuración inicial, podemos introducir cambios en el HTML de una web en unos pocos pasos:

1. Definir o configurar las Variables necesarias.
2. Escoger el Trigger / Activador adecuado (todas las páginas, sólo en determinadas, cuándo el usuario haga clic en determinado elemento, etc.).
3. Crear la Tag / Etiqueta del tipo HTML personalizado con nuestro código.
4. Testear e implementar los cambios.

Un ejemplo práctico: queremos implementar la etiqueta “meta robots” con el valor noindex para evitar que las páginas con filtros en la URL de nuestra tienda online se indexen en Google. Para ello deberíamos:

• Definir un Trigger / Activador que sólo actúe en las páginas que contienen el filtro en su URL. Podemos utilizar el tipo “Página vista” y marca la opción “Algunas páginas vistas” indicando que la URL contenga el parámetro en cuestión.
• Crear la Tag / Etiqueta de tipo HTML personalizado con la etiqueta correspondiente y asociarla al Trigger / Activador que hemos creado antes.
• Testear y subir los cambios.

En algunos casos, si utilizamos código Javascript personalizado, deberemos tener en cuenta aspectos como el orden de ejecución de los scripts y de la carga del DOM de la página.

Y a nivel de SEO, ¿los bots de Google serán capaces de procesar estos cambios?

Los últimos avances de los crawlers de Google parecen indicar que son capaces de procesar correctamente este tipo de modificaciones. Además, recientemente la empresa de Mountain View afirmó que procesa y renderiza las páginas web con ejecución de código Javascript en una segunda oleada de indexación. Por lo que aunque tarde un poco más en detectarlos, los cambios HTML introducidos con Google Tag Manager deberían ser visibles para los bots de Google.

De todos modos, siempre que podamos, deberíamos validar si nuestra implementación se aplica de forma correcta, tanto de cara a bots de rastreo, como para el usuario.

Como veis, Google Tag Manager nos permite introducir todo tipo de cambios en el código HTML de una web, con las ventajas (y riesgos) que conlleva. Si necesitáis ayuda con la implementación de GTM o con cualquier otro aspecto de la analítica web, no dudéis en contactar con nosotros.