Guía de Instalación Google Tag Manager en WordPress

Os comparto a continuación mi guía actualizada para instalar Google Tag Manager según sea Página Corporativa o Tienda Online.

Google Tag Manager es una forma sencilla y muy eficaz para instalar todas las etiquetas que necesites en tu página web.

Las etiquetas pueden ser de diferentes proveedores y métodos. Podemos con una instalación de WordPress y luego en Google Tag Manager, instalar el Pixel de Facebook, Google Analytics, configurar objetivos de Analytics y Google Ads.

Instalación Plugin en WordPress

Antes de empezar, desactivamos Plugin de Google Analytics que haya y de Facebook Pixel.

  1. Vamos a tagmanager.google.com.
  2. Creamos un contenedor dentro de la cuenta que quieras.
  3. Nombre normal, tipo: Sitio Web. Copiamos el identificador del contenedor. GTM-XXXXXXX
  4. Vamos a plugins, Añadir: DuracellTomi’s Google Tag Manager para WordPress
  5. Ajustes > Google Tag Manager > General. Añadir Código y coger la opción: Personalizado (necesitarás retocar tu tema)
  6. Editamos tema y añadimos <?php if ( function_exists( ‘gtm4wp_the_gtm_tag’ ) ) { gtm4wp_the_gtm_tag(); } ?>, justo después de la etiqueta body.
  7. Para comprobar que Google Tag Manager está bien configurado, instálate en tu navegador Chrome la herramienta Google Tag Assistant.
  8. Activar opciones por defecto:
    1. Datos Básicos > Búsqueda > Datos de búsqueda
    2. Si gestiona usuarios, utilizar opciones Datos Básicos > Usuarios
    3. Datos Básicos > Google Ads > Variable remarketing
    4. Eventos > Eventos para medios > Eventos de video para Youtube
  9. Si es Tienda Online:
    1. Integración > WooCommerce > Seguimiento de e-commerce mejorado
    2. Integración > WooCommerce > Carrito como primer paso de pago
    3. Integración > WooCommerce > Datos del cliente en capa de datos
    4. Integración > WooCommerce > Remarketing de Google Ads
    5. Integración > WooCommerce > Usar el SKU en lugar del ID
    6. Integración > WooCommerce > Incluye la ruta de la categoría completa.

Configurar Google Analytics para páginas Web

La razón principal para instalar Tag Manager, es para instalar la etiqueta de Google Analytics, ya que te permite obtener analítica de tu página web de forma sencilla.

Etiqueta Página vista para Página Corporativa

1. Nos vamos a configurar Google Tag ManagerCreamos Variable Variables > Variables definidas por el usuario > Nueva. Nombre: GA-id

Elegir Tipo de VariableConfiguración de Google Analytics
ID de seguimiento UA-XXXXX-XXXX (de tu cuenta de GA)
Más opciones > Campos a configurar
nombre de del campo
anonymizeIp -> true

2. Etiquetas > Creamos Etiqueta > Google Analytics

NombreGA – página vista – todas las páginas
Configuración de la
etiqueta
Google Analytics: Univeral Analytics
Tipo de seguimientoPágina vista
Configuración de Google AnalyticsGA – id
Activacióntodas las páginas

Configurar Google Analytics 4 para páginas Web

La razón principal para instalar Tag Manager, es para instalar la etiqueta de Google Analytics, y en este caso con la opción Google Analytics 4..

Etiqueta Página vista para Página Corporativa

1.Nos vamos a Google Analytics y creamos una propiedad de Google Analytics 4, y además creamos su flujo de datos que nos generará un ID de medición. Ej. G-ZDSDFS324.

2. Etiquetas > Creamos Etiqueta > Google Analytics: Configuración GA4

NombreGA4 – página vista – todas las páginas
Configuración de la
etiqueta
Google Analytics: Configuración de GA4
ID de medición(recogido al crear el flujo de datos)
Activacióntodas las páginas

Formularios con Gravity Forms Opción Tag Manager

1. Instalar el Plugin Event Tracking for Gravity Forms

2. Formularios > Ajustes > Event Tracking

ID UA de seguimientoUA-XXXX-XX
¿Cómo enviamos los eventos?Google Tag Manager
Avanzado > Formularios AjaxSólo Ajax

3. Vamos a Tag Manager > Activadores > Nuevo

NombreEnvío Formulario
Tipo de activadorEvento Personalizado
Nombre del eventoGFTrackEvent

4 . Tag Manager > Variables > Nueva definida del usuario

Nombre DL – Formulario – Categoría
Tipo de variableVariable de capa de datos
Nombre de la variableGFTrackCategory

5 . Tag Manager > Variables > Nueva definida del usuario

Nombre DL – Formulario – Acción
Tipo de variableVariable de capa de datos
Nombre de la variableGFTrackAction

6 . Tag Manager > Variables > Nueva definida del usuario

NombreDL – Formulario – Etiqueta
Tipo de variableVariable de capa de datos
Nombre de la variableGFTrackLabel

7 . Tag Manager > Variables > Nueva definida del usuario

NombreDL – Formulario – Valor
Tipo de variableVariable de capa de datos
Nombre de la variableGFTrackValue

6 . Tag Manager > Etiquetas > Nueva definida del usuario

NombreGA – envío formulario – todas las páginas
Configuración de la
etiqueta
Google Analytics: Universal Analytics
Tipo seguimientoEvento
Categoríaclic en más y la que hemos creado de DL – formulario – categoría
Acciónclic en más y la que hemos creado de DL – formulario – acción
Valorclic en más y la que hemos creado de DL – formulario – valor
Configuración GAUtilizar la variable GA-id
Hit sin interacciónfalso (no afecta a la tasa de rebote)
ActivaciónEnvío Formulario (que hemos creado)

7. Ahora nos toca entrar a cada formulario > Ajustes > Submission Tracking, y personalizar los ajustes que queramos.

Categoría
del evento
Formularios
Acción
del evento
Formulario Solicitud #nombre#
Etiqueta del eventoFormulario Solicitud #nombre# – ID{entry_id} {Full Name:1}

8. Ir a Google Analytics y configurar los objetivos. Vamos a Google Analytics > Vista > Objetivos

Configuración del ObjetivoPersonalizar
Descripción del objetivoNombre que describa la acción
TipoEvento

Pulsamos continuar.

Información del Objetivo(igual configuración que event Tracking)
Categoría
del evento
Formularios
Acción
del evento
Formulario Solicitud #nombre#
Etiqueta del evento(vacía porque se genera dinámicamente)

Si en cambio trabajas con Google Analytics 4, será más fácil todavía. Sólo has de configurar Tag Manager para que mande el evento create_lead:

NombreGA4 – envío formulario – todas las páginas
Configuración de la
etiqueta
Google Analytics: evento de GA4
Tipo seguimientoEvento
Etiqueta de configuración(la utilizada en GA4)
Nombre del eventocreate_lead
ActivaciónEnvío Formulario (que hemos creado)

Formularios con ContactForm 7

  1. Activamos la capa de datos de Contact Form 7. En WordPress > Ajustes > Google Tag Manager > Integración > Contact Form 7
  2. En Tag Manager, activamos en Variables todas las opciones de Formularios.
  3. Creamos un activador llamado «Formulario enviado – contacto». Configurador del activador > Envío de Formulario
  4. Creamos Etiqueta.
    1. Nombre: «GA – formulario enviado – contacto»
    2. Configuración de la etiqueta: Google Universal Analytics, con la siguiente configuración
Tipo de seguimientoEvento
Categoría
del evento
Formularios
Acción
del evento
Formulario Solicitud #nombre#
Hit sin interacciónfalso (no afecta a la tasa de rebote)

Seguimiento clic a un número de teléfono

Suele ser bastante útil, hacer seguimiento a los usuarios que hacen clic en teléfonos o emails de contacto en tu página web. Para esto, realizaremos el método utilizando una clase personalizada en ese enlace (phone).

1. Creamos un activador con los siguientes valores:

Nombre del activadorClic Llamada
Configuración del activadorClic Todos los elementos
Este activador se activa enAlgunos clics
Ejecutar este activadorClic URL > contiene > tel:XXXXXXXXX

2. Vamos a Etiquetas, creamos una con los siguientes valores

NombreGA – clic llamada – todas las páginas
Configuración de la
etiqueta
Google Analytics: Universal Analytics
Tipo seguimientoEvento
CategoríaClic
AcciónLlamada
Etiqueta{{Page Path}}
Valor(que quieras)
Configuración GAUtilizar la variable GA-id
Hit sin interacciónfalso (no afecta a la tasa de rebote)
ActivaciónClic Llamada

3. Ir a Google Analytics y configurar los objetivos. Vamos a Google Analytics > Vista > Objetivos

Configuración del ObjetivoPersonalizar
Descripción del objetivoNombre que describa la acción
TipoEvento

Pulsamos continuar.

Información del Objetivo(igual configuración que event Tracking)
Categoría
del evento
Clic
Acción
del evento
Llamada

Configurar Google Analytics para Tiendas Online

Etiqueta Página vista para Tienda Online

1. Creamos Variable > GA-id

Elegir Tipo de VariableConfiguración de Google Analytics
ID de seguimiento UA-XXXXX-XXXX (de tu cuenta de GA)
Más opciones > Campos a configurar
nombre de del campo
anonymizeIp -> true
Más opciones > Comercio electrónico > MarcarHabilitar funciones de comercio electrónico mejorado > Usar capa de datos

2. Etiquetas > Creamos Etiqueta > Google Analytics

NombreGA – página vista – todas las páginas
Configuración de la
etiqueta
Google Analytics: Universal Analytics
Tipo de seguimientoPágina vista
Configuración de Google AnalyticsGA – id
Activacióntodas las páginas

Etiqueta Añadir a Carrito para Tienda Online (WooCommerce)

  1. Añadir activador con el nombre “Clic añadir al carrito”
  2. Opción Clic Todos los elementos, Opción Algunos elementos

single_add_to_cart_button

3. Vamos a Etiquetas, creamos una:

NombreGA – clic añadir carrito – todas las páginas
Configuración de la
etiqueta
Google Analytics: Universal Analytics
Tipo seguimientoEvento
CategoríaClic
AcciónAñadir Carrito
Etiqueta{{Page Path}}
Valor(que quieras)
Configuración GAUtilizar la variable GA-id
Hit sin interacciónfalso (no afecta a la tasa de rebote)
ActivaciónClic añadir al carrito

Comercio Electrónico Mejorado

  1. Habilitamos en Google Analytics > Configuración del comercio electrónico > Habilitar los informes del comercio electrónico mejorado
  2. En Tag Manager, vamos a la variable GA – id, y en las opciones > Habilitamos en Comercio Electrónico > Habilitar funciones de comercio electrónico mejorado y Usar Capa de datos
  3. Añadimos un activador:
NombreActivador Comercio electrónico
Tipo de activadorEvento personalizado
Nombre del eventogtm4wp.orderCompletedEEC

4. Crear Etiqueta GA – Comercio electrónico mejorado

Tipo de etiquetaGoogle Analytics
Tipo de seguimientoEvento
CategoríaComercio electrónico
AcciónVenta realizada
Hit sin interacciónVerdadero
Configuración GAGA – id
ActivaciónActivador de comercio electrónico
Paso Activación Comercio Electrónico Mejorado En Etiqueta.

Y ahora deberíamos genera el Objetivo en Google Analytics. Para poder realizar seguimiento de la venta realizada.

  1. Google Analytics > Administrar > Objetivos > Nuevo Objetivo
  2. Configuración del Objetivo: Compra de artículos
  3. Rellenamos información del objetivo como la tabla de la derecha.
CategoríaComercio electrónico
AcciónVenta realizada
Etiqueta(vacío)
Valor(vacío)

Comercio electrónico GA4

Si en cambio trabajas con Google Analytics 4, será más fácil todavía. Sólo has de configurar Tag Manager para que mande el evento purchase:

NombreGA4 – comercio electrónico
Configuración de la
etiqueta
Google Analytics: evento de GA4
Tipo seguimientoEvento
Etiqueta de configuración(la utilizada en GA4)
Nombre del eventopurchase
ActivaciónActivador de Comercio electrónico (que hemos creado)

Guía TagManager con plugin

Configurar Facebook Pixel

Etiqueta Facebook INIT

  1. Creamos Etiqueta > HTML Personalizado
  2. Nombramos: FB – pixel – todas las páginas
  3. Pegamos el Pixel de Facebook
  4. Quitamos parte noscript
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'XXXXXXXXXXXX');
</script>

5. Quitamos la linea fbq(‘track’, ‘PageView’);

6. Configuración Avanzada > Prioridad 99

7. Configuración Avanzada > Opciones de activación de la etiqueta > Una vez por página

8. Activación > Todas las páginas

Etiqueta Page View

  1. Creamos Etiqueta
  2. Nombramos: FB – página vista – todas las páginas
  3. Configuración de la etiqueta > HTML Personalizado
  4. Pegamos este código:
<script>fbq('track', 'PageView');</script>
  1. Activación > Todas las páginas

Etiqueta Lead para conversiones

Para esta etiqueta para gestionar conversiones, la vamos a tener en cuenta, cuando el usuario visite una página de gracias.

  1. Creamos el Activador
  2. Tipo de Activador: Página Vista
  3. Este activador se activa utilizando la variable «Page Path» con la URL que será la de confirmación del formulario
  4. Ahora nos vamos a Creamos Etiqueta.
  5. Nombramos: FB – conversión lead – página gracias
  6. Configuración de la etiqueta > HTML Personalizado
  7. Pegamos el código a continuación.
Activador Gracias
<script>fbq('track', 'Lead');</script>

5. Activación:

Publicar Cambios

Boton Publicar Google Tag Manager

Para publicar los cambios utiliza los botones situados en la parte superior derecha, y pulsa Enviar. Nombra dichos cambios según hayas hecho cambios. Deberás revisar dichos cambios que están bien implementados.

Guardar el origen del usuario (source cookie)

  1. Etiquetas > Añadir Nueva > utilizar galería de comunidad: Persist Campaign Data

Opciones Persist Campaign Data:

TítuloCookie – Origen Visita
Store campaign data in a browser coookieactivado
URL Parametersutm_source,utm_medium,utm_campaign,utm_term,utm_content,utm_id,gclid
Cookie name__gtm_campaign_url
Referrer cookie name__gtm_referrer
ActivadorTodas las páginas

2. Variables > Nueva > Cookie de origen

Cookie de Origen:

Títulocookie-source-data
Tipo de variableCookie de origen
Nombre de la cookie__gtm_campaign_url
 Decodificar la cookie en URI activado

3. Etiquetas > Nueva > HTML personalizado

Utilizamos un Script para poder enviar la información del campo

Script Measure School

<script>
(function () {
  var value = "{{cookie-source-data}}";
  var selector = ".cmk_cookie_source input";
  var field = document.querySelector(selector);
  if(field){ field.value = value; }
})();
</script>
TítuloRellenar campo formulario origen
Script__gtm_campaign_url
Activadoractivado

Actualizaciones:

  • 29 Marzo 2021 – Google Analytics 4.
  • 9 de Enero 2020 – Actualizado formato de tablas a Tienda Online.
  • 10 Diciembre 2019 – Cambio método llamada web y añadido conversión GA.
  • 21 Noviembre 2019 – Clic llamada en la web.
  • 24 Octubre 2019 – Añadido conversiones en Google Analytics.
  • 3 Octubre 2019 – Gravity Forms para Tag manager.
  • 19 Septiembre 2019 – Añadido objetivo para comercio mejorado.
  • 10 Septiembre 2019 – Añadido pasos para Contact Form 7.
  • 30 Mayo 2019 – Quitado WhatsApp Me ya que genera sus propios eventos, y añadido Conversión de Facebook.
  • 9 Abril 2019 – Algunas capturas y cambios de texto para actualizar los pasos en Google Tag Manager. Añadido secciones revisión y publicar cambios.
  • 23 Abril 2019 – Añadido seguimiento de WhatsApp Me en Tag Manager.

Inspirado desde el curso de Boluda.com

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Abrir chat