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

2. Etiquetas > Creamos Etiqueta > Google Analytics

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

Formularios con Gravity Forms Opción Tag Manager

1. Instalar el Plugin Event Tracking for Gravity Forms

2. Formularios > Ajustes > Event Tracking

3. Vamos a Tag Manager > Activadores > Nuevo

4 . Tag Manager > Variables > Nueva definida del usuario

5 . Tag Manager > Variables > Nueva definida del usuario

6 . Tag Manager > Variables > Nueva definida del usuario

7 . Tag Manager > Variables > Nueva definida del usuario

6 . Tag Manager > Etiquetas > Nueva definida del usuario

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

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

Pulsamos continuar.

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:

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

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:

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

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

Pulsamos continuar.

Configurar Google Analytics para Tiendas Online

Etiqueta Página vista para Tienda Online

1. Creamos Variable > GA-id

2. Etiquetas > Creamos Etiqueta > Google Analytics

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:

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:

4. Crear Etiqueta GA – Comercio electrónico mejorado

Tipo de etiqueta	Google Analytics
Tipo de seguimiento	Evento
Categoría	Comercio electrónico
Acción	Venta realizada
Hit sin interacción	Verdadero
Configuración GA	GA – id
Activación	Activador de comercio electrónico

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

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:

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.

<script>fbq('track', 'Lead');</script>

5. Activación:

Publicar Cambios

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)

<script>
(function () {
  var value = "{{cookie-source-data}}";
  var selector = ".cmk_cookie_source input";
  var field = document.querySelector(selector);
  if(field){ field.value = value; }
})();
</script>

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