google tag manager para wordpress guia

Google Tag Manager para WordPress – Guía iniciación

Posted at 17:32h in Analitica web, Google tag manager by

Hoy vengo a hablarte de Google Tag Manager para WordPress. ¡Sí, ese desconocido del que todo el mundo habla para medir aquello que sucede en tu web!

Espero que con la lectura de este post seas todo un crack trabajando con el administrador de etiquetas de Google y puedas empezar a medir eventos de cualquier proyecto WordPress, además de entender su funcionamiento básico.

Empezaré desde el principio así que, ¡tranquilo! Si no tienes un gran conocimiento de GTM voy a intentar contarlo de la manera más sencilla, para que no sea ni muy técnico ni muy naif, y puedas ver algunos de los siguientes aspectos:

► Entender el funcionamiento básico de Google Tag Manager.

► Instalación del código de seguimiento de GTM en tu plantilla de WordPress.

► Vinculación de Google Analytics con Tag Manager.

► Tracking de los principales eventos para tu web. 

 

 

¿Qué es Google Tag Manager?

 

A partir de ahora Google Tag Manager va a ser tu aliado en el proceso de medición de todo aquello importante que ocurre en tu web. Ya estés trabajando de manera independiente o para un cliente, esta herramienta ha venido para simplificar la gestión de etiquetas y fragmentos de código scripts de tu web.

Precisamente en eso consiste GTM. Se trata de un código <script>, capaz de generar un iframe contenedor, que se sitúa después de la apertura de la etiqueta <body> de tu web. De ahí que este código sea capaz de reemplazar al resto de etiquetas de tu site. Aquellas etiquetas que antes tenías que instalar de manera manual desde los archivos de tu plantilla de WordPress.

Con Google Tag Manager en funcionamiento todos son ventajas para medir tu proyecto.

Click To Tweet

 

Quizás su principal inconveniente sea la curva de aprendizaje que tiene la herramienta en una primera toma de contacto, pero una vez instalado, estas son, bajo mi punto de vista, sus tres principales ventajas:

    • Evitar añadir códigos de seguimiento en tu plantilla (Códigos de remarketing de Google Ads, Facebook Ads, Hotjar, etc) que puedan perjudicar el rendimiento del site.

 

    • Mejorar la velocidad de carga de tu web . ¡Esencial para UX y SEO!

 

    • Medir y analizar, prácticamente, todo aquello que te propongas.

 

¿Cuál es la estructura de Google Tag Manager?

 

Google Tag Manager tiene una estructura jerárquica, al igual que Analytics. En primer lugar necesitas una cuenta de Gmail  que te permitirá acceder a Tag Manager. Con tu cuenta de GTM podrás crear diferentes contenedores que corresponderán a cada uno de los sitios webs que quieras medir.

google tag manager wordpres estructura

Esto es lo que debes saber de Google Tag Manager para WordPress:

  • Contenedor: cada uno de los clientes o sitios webs que vayas a medir se organizarán en un contenedor. Este contenedor estará compuesto por etiquetas, activadores y variables relacionadas entre sí.

 

  • Etiquetas: son los fragmentos de código que nos van a permitir medir lo que ocurre en nuestra web. En este caso utilizarás el código de seguimiento de Analytics, pero podrás elegir diferentes productos (Pixel de Ads, Remarketing, etc.). Estas etiquetas están ubicadas dentro del contenedor en cada uno de los sites a analizar.

 

  • Activadores o Triggers: Son el requisito que hace que salten y/o se activen las diferentes etiquetas, es decir, los activadores hacen que se cumplan las condiciones que quieras medir.

 

  • Variables: Forman parte de los activadores y etiquetas y calculan, mediante código, variables. El correcto funcionamiento y entendimiento de las mismas requiere de unas mayores nociones de programación.

 

Crear una cuenta de Tag Manager desde «0»

 

¡Venga, al lío! ?

Antes de realizar la instalación del código de seguimiento, lo primero que tienes que hacer, si todavía no lo has hecho, es crear una nueva cuenta de GTM.

En primer lugar, dirígete a Google Tag Manager, logeado con tu cuenta de Gmail. Una vez dentro, tendrás que darle a «crear cuenta».

 

google tag manager wordpress crear cuenta

 

Sigue los pasos para dar de alta una cuenta y completa la información relativa al «nombre de cuenta», «país», «nombre del contenedor» (pon tu dominio de nuevo) y plataforma que quieres medir. En este caso, será para un sitio web de WordPress.

A continuación, harás click sobre el botón de «crear» y leerás, como buen ciudadano, las condiciones y política de privacidad.

¡Bien! Ya tienes creada la cuenta de Google Tag Manager y lo que verás en la siguiente pestaña será algo similar a esto:

 

instalar google tag manager en wordpress

Ahora llega el momento de poner el código de seguimiento en la web. Sin duda, un punto clave para la correcta medición a través de GTM.

Como puedes ver, en la captura de pantalla que te he compartido arriba, tienes que pegar dos códigos en la web:

1. Al principio de la etiqueta <head>:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NH8VRL4');</script>
<!-- End Google Tag Manager -->

 

*IMPORTANTE: He querido subrayar en amarillo (GTM-NH8VRL4) el código de seguimiento  de GTM. A partir de ahora, este será el código único que tendrás para trackear todo lo que sucede en tu web.
De hecho, si antes estabas midiendo el tráfico de tu web con el código de Google Analytics, ha llegado el momento de decirle adiós. ? 

 

2. Después de la etiqueta <body>:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NH8VRL4"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

 

¿Cómo configurar Google Tag Manager en WordPress?

 

Como ves el proceso de creación de una cuenta es sencillo. Ahora ha llegado el momento de pegar el código de seguimiento en nuestra web.

Para ello, es necesario hacer la instalación de GTM en un theme de WordPress. Recuerda que este proceso es el mismo en cualquier otro CMS (Prestashop, Magento, etc.). Así que la configuración que voy a explicarte a través del servidor será muy similar.

Estas son las tres formas que tienes para realizar la instalación de Google Tag Manager en tu WordPress. Espero que siguiendo estos pasos no tengas ningún problema.

 

  Instalar de GTM a través de Plugin

 

La instalación Google tag manager con plugin wordpress es relativamente sencillo. Es más, encontrarás una gran variedad de plugins que te permitirán hacer una instalación sin tener que comerte mucho la cabeza.

De los diferentes plugins que he probado, quiero explicarte cómo poder hacerlo desde Metronet Tag Manager. Se trata de un plugin muy sencillo donde simplemente tendrás que pegar los dos códigos creados en la parte superior.

 

metronet plugin wordpress google tag manager

 

Cuando tengas este plugin instalado en WordPress, para poder acceder a él, tendrás que irte a la parte de ajustes > Metro Tag Manager.

 

El plugin se añade automáticamente en la parte inferior de la zona de ajustes de tu panel administrativo de WordPress.

plugin wordpress metronet tag manager google

 

Tan solo tendrás que acceder a Metro Tag Manager y pegar los dos códigos que se generaron en la creación de la cuenta. Por defecto, como ves en la imagen superior, tienes dos espacios seleccionados para pegar ambos códigos. En primer lugar, el que va en la parte de arriba de la etiqueta <head>; y en segundo lugar, el código que aparece después de la apertura de la etiqueta <body>.

 

instalar GTM wordpress plugin

 

Una vez que hayas pegado los dos códigos solo tendrás que «guardar cambios», en la parte inferior de esta pestaña.

El resto de ajustes de este plugin ya vienen configurados por defecto, con lo cual no es necesario que lleves a cabo otra acción.

Bien, esto es todo lo que tienes que hacer en tu WordPress en cuanto a instalación de Google Tag Manager, es decir, simplemente pegar los dos códigos de seguimiento. Sencillo, ¿verdad?

Ahora es el momento de volver a nuestra cuenta de Google Tag Manager y publicar la versión de nuestro contenedor.

 

  Un contenedor en Google Tag Manager es el espacio de trabajo que se crea para medir los datos, en nuestro caso de un sitio web, y desde donde se envía la información. Además, dentro de un contenedor se generarán activadores, etiquetas y variables.

 

Cuando estés dentro de la cuenta de Tag Manager, sitúate en tu área de trabajo, donde observarás que tu contenedor todavía no está publicado, como puedes ver en la imagen inferior.

Cualquier cambio que realices en GTM siempre requiere de una publicación.

 

publicar contenedor google tag manager cms WordPresss

 

Después de esto, tan solo tendrás que hacer click sobre «contenedor no publicado» y seguir los pasos hasta que nuestro contenedor quede publicado, o de lo contrario la librería de GTM te devolverá un error 404.

Al final de este proceso de publicación, verás las siguientes palabras «cante como si nadie le escuchara». Lo cual indicará que el contenedor se ha publicado con éxito.

Si luego vuelves a tu mesa de trabajo verás que el contenedor «no publicado» ha quedado de la siguiente manera:

 

GTM version publicada wordpress cms

 

Únicamente queda un pequeño paso para comprobar que el código de Google Tag Manager está instalado de manera correcta y listo para poder empezar a medir todo aquello que sea de interés en tu site.

Para ello, tendrás que instalar la extensión para Chrome Google Tag Assistant que, entre otras cosas, sirve para comprobar que la instalación de GTM, Google Analytics o la etiqueta de conversiones de Ads se ha realizado de manera correcta.

Una vez instalada la extensión en tu navegador, te quedará activar y refrescar la página para poder ver si el contenedor se ha establecido de manera correcta en tu web.

 

google tag assistant de google tag manager

Si el color de la etiqueta es verde, tu código de seguimiento de GTM está listo para la acción.

 

Cómo instalar Google Tag manager en WordPress

 

Otra posibilidad de instalar GTM es a través de WordPress. En este caso, accede al editor del tema de tu plantilla WordPress desde Apariencia > Editor.

En esta ventana, localiza la cabecera del tema (header.php) en los archivos que aparecen en la parte derecha.

 

cabezera tema wordpress

 

Después es el momento de pegar los dos códigos de seguimiento que se habían visto en la creación de una cuenta de Google Tag Manager.

Como ya había descrito más detenidamente en el punto anterior, estos códigos irán pegados de la siguiente manera en la cabecera del tema:

1. Lo más alto posible de la etiqueta <head>:

 

google tag manager wordpress instalacion

 

2. Después de la etiqueta <body>:

 

google tag manager wordpress body

 

Llegado este punto, actualiza el archivo, en la parte inferior izquierda. Si todo ha ido bien y los cambios se han guardado con éxito, ¡genial! Pero, ¿y si llegado a este punto se produce un error?

Aquí podrás encontrarte con dos situaciones:

Los cambios se guardan correctamente

Una vez que actualizas el archivo y los cambios se guardan con éxito, ¡perfecto! Todo está correcto. Ahora vuelve a tu cuenta de Google Tag Manager, y realiza el mismo proceso descrito en la instalación a través de plugin, es decir, publicar el contenedor.

Por último, verifica que GTM está instalado de la manera correcta. Lo puedes hacer con la ayuda de Google Tag Assisant, como explicaba antes en el método de instalación con plugin.

Los cambios no se guardan correctamente

Si llegado a este punto los cambios no se guardan de manera correcta, una vez que actualizas el archivo, recibirás un mensaje similar a este:

 

wordpress tutorial google tag manager

 

No te preocupes, dependiendo de qué tipo de servicio de hosting tengas contratado y qué plantilla hayas instalado en tu WordPress, podrás hacerlo o no mediante este método.

Si este método te da error, tendrás que hacerlo con alguno de los otros dos sistemas.

 

  Instalación de GTM desde tu servidor

 

Este es, bajo mi punto de vista, la mejor elección que puedes tomar a la hora de instalar GTM tanto en WordPress como en cualquier otro CMS. Nunca da fallos, a diferencia de lo que has podido observar con la instalación en el theme de WordPress. Y tampoco es necesario la instalación de plugins adicionales que puedan perjudicar la velocidad de carga de tu site.

Te voy a mostrar el proceso de instalación de cómo sería en un servidor como Webempresa. Un hosting de alto rendimiento, fiable y de calidad para poder alojar cualquier tipo de proyecto WordPress.

 

Si tienes cualquier otro tipo de hosting que cuente con un Cpanel este proceso lo podrás adaptar a tu servidor.

 

En cuanto hayas localizado el Cpanel de tu servidor, deberás ir al Administrador de archivos como te muestro en la siguiente imagen:

 

instalar Google Tag Manager servidor de wordpress

 

Una vez dentro del administrador de archivos, busca el archivo header.php de la plantilla y sigue esta ruta:

Public_html > Acceso a tu dominio > wp-content > themes > Selecciona tu tema/theme (bridge en  este caso) >header.php

 

instalar google tag manager plantilla wordpress

 

*IMPORTANTE: Antes de acceder a la edición del archivo de tu tema, puedes realizar un descarga del archivo por si tuvieras cualquier problema en el proceso de instalación del código de Google Tag Manager en el tema de WordPress.

Ahora es el momento de editar el archivo. En este caso, el proceso es muy similar al que he descrito anteriormente en WordPress. Tienes que buscar el archivo de apertura <head> y <body> para copiar los dos códigos de seguimiento en la web de la siguiente manera:

 

cms wordpress guia de google tag manager

 

Y no olvides que la segunda etiqueta va después de la apertura del <body>:

 

google tag manager desde hosting

 

*IMPORTANTE: Te recomiendo este sistema de instalación de Google Tag Manager en WordPress, aunque también me gustaría que echaras un vistazo a los otros dos métodos anteriores.  En ellos, describo extensiones, trucos y herramientas muy útiles.

Alcanzado este momento, tan solo tienes que guardar los cambios de la actualización del archivo en tu hosting y volver a tu cuente de Tag Manager. Una vez allí, publica los cambios en el contenedor, del mismo modo qué en la instalación con plugin.

 

Sustituir el código de seguimiento de Google Analytics y medir con GTM

 

Una de las preguntas que te han podido surgir si previamente estabas midiendo el tráfico de tu web con Analytics es cómo sustituir el código de seguimiento de Google Analytics y empezar a medir el tráfico de mi web con Google Tag Manager.

El proceso es más sencillo de lo que parece. Si ya tenías instalado el código de seguimiento de Google Analytics, lo primero que tendrás que hacer es localizar la etiqueta de sitio web global (gtag.js) y sustituirla por el nuevo código de seguimiento que has creado con Google Tag Manager.

 

Recuerda que en el segundo punto del post he hablado de «cómo crear una cuenta de Google Tag Manager».

 

Para localizar esta etiqueta, situada entre la etiqueta de apertura <head> y </head> de tu plantilla WordPress, y poder realizar después el cambio de GA a GTM en tu WordPress, sigue estos 3 sencillos pasos:

 

1. Localiza, en tu cuenta de Analytics, cuál es tu código de seguimiento del sitio web a través de la siguiente ruta: Administrar > Propiedad > Información de seguimiento > Código de seguimiento.

 

codigo UA Google Analytics

 

2. El siguiente paso será ir a tu servidor y encontrar el archivo Header.php de tu plantilla (theme) de Worpdress donde se ubica el código de seguimiento de Analytics.

Dependiendo de qué tipo de servidor tengas contratado, seguirás una ruta u otra para encontrar el theme de tu WordPress. Si tienes un Cpannel, la ruta, dentro del «Administrador de archivos«, será la siguiente:

Public_html > «tu dominio» > wp-content > themes > «tu tema» > header.php

 

 

  Si tenías el código de Analytics instalado en tu WordPress a través de un plugin, tendrás que desinstalar el plugin y medir el tráfico de tu web exclusivamente con Google Tag Manager.

 

3. Sustituye el script de Analytics localizado entre las etiquetas <head> y </head> de tu tema. No olvides que en GTM tenías que utilizar dos códigos. Utiliza el primero de los dos código de GTM e introduce el segundo fragmento después de la etiqueta <body> como te explicaba en la instalación de Google Tag Manager para tu WP desde el servidor.

 

Vincular Google Analytics con Google Tag Manager

 

Si ya tienes tu cuenta de Google Analytics creada y el código de Google Tag Manager correctamente instalado, ha llegado el momento de activar la etiqueta de GA para GTM en tu WordPress.

Lo primero que tienes que hacer es situarte dentro del contenedor de tu cuenta de GTM y una vez dentro crear una nueva etiqueta.

 

etiqueta gtm para wordpress

 

A esta etiqueta puedes darle el nombre de «Vinculación Google Analytics» y seleccionar la primera de las etiquetas que sale «Google Analytics: Universal Analytics«.

 

vinculacion universal analytics wordpress con google tag manager

 

Cuando elijas la primera etiqueta de Universal Analytics, se abrirá una nueva pestaña, similar a la que te muestro debajo, donde tendrás que escoger el tipo de seguimiento > Página vista y en «configuración de la variable» crear una nueva para vincular con tu cuenta de GA.

 

variable gtm wordpress

 

Para crear una nueva variable lo primero es darle un nombre. En este caso, voy a darle el nombre de «Configuración de Google Analytics» y pondré el ID de seguimiento de mi cuenta de Google Analytics.

En cuanto al dominio de la cookie, se puede dejar por defecto en «auto».

 

configuracion gtm wordpress

 

  Acuérdate que el ID de seguimiento lo puede consultar a en tu cuenta en tu cuenta de Google Analytics, en el apartado administrativo > propiedad > información de seguimiento > Código de seguimiento > UA-XXXXXXXXX-1

Ahora solo tienes que guardar los cambios, aunque todavía queda crear el activador que encontrarás en la parte inferior. Selecciona el activador «All Pages» y guardar cambios.

 

activador google tag manager en wordpress all pages

Lo que estás haciendo al seleccionar este activador es decirle que ponga en marcha la etiqueta de Google Analytics en cualquiera de las páginas de nuestra web.

El próximo paso es enviar los cambios en el espacio de trabajo del contenedor y publicarlos.

Es importante que cada vez que hagasuna actualización publiques los cambios, o de lo contrario estos nunca se harán efectivos. 

 

publicar contenedor tag manager para wordpress

 

Con los cambios ya enviados, únicamente queda publicarlos, comprobar que la vinculación es correcta y que tu cuenta de Google Analytics está recibiendo los datos de manera correcta.

 

  Verificar a través del informe de «tiempo real» en tu cuenta de Analytics

 

Para verificar que tu configuración de Google Analytics a través de Tag Manager se ha realizado correctamente en tu web de WordPress, ve al informe de tiempo real en Analytics y accede tanto con tu dispositivo móvil como con tu ordenador para verificar que está recogiendo el tráfico de manera correcta.

 

tiempo real evento tag manager

 

¡Si todo está OK recogerá el tráfico en tiempo real prácticamente de manera automática!

 

  Comprueba a través de la vista previa con Default Workspace

 

Otra manera, que no falla, para comprobar que tu código está recogiendo datos de manera correcta, es obteniendo una vista previa del espacio de trabajo.

 

vista previa espacio de trabajo google tag manager

 

Si pinchas sobre este elemento que te muestro arriba, se activará una «vista previa» de las etiquetas que tienes activadas en tu web. Lo único que tienes que hacer es abrir una nueva pestaña en el navegador y poner la url de tu web.

En la parte inferior, se activará una especie de ventana emergente que te mostrará qué etiquetas están activas en la web. Si se activa la etiqueta de vinculación con Google Analytics…¡genial! Tus datos se están recogiendo de manera correcta.

 

gtm para cms de wordpress

 

  Revisa el asistente de etiquetas «Tag Assisant»

 

La última alternativa que puedes llevar a cabo es a través de Google Tag Assisant, que a estas alturas el post ya deberías conocer. 😉

Si compruebas a través de este asistente de etiquetas, verás que se ha añadido una nueva de Google Analytics.

 

google tag assistant wordpress

 

Las dos etiquetas verdes confirman que tus datos se están recogiendo de manera correcta. 

 

Tracking de eventos para WordPress con Google Tag Manager

 

Estás llegando al punto con «más chicha» del post. Como ves WordPress y Google Tag Manager pueden ir de la mano.
Para rematar el contenido que has leído hasta hora, quiero contarte cómo configurar los principales eventos de tu proyecto Worpdress y que posteriormente medirás en tu cuenta de Analytics.

La configuración y posterior medición de eventos es fundamental para llevar a cabo el proceso de analítica web de manera correcta. Si no tienes unos eventos bien definidos e implantados de manera correcta, no podrás saber si se están cumpliendo los objetivos del proyecto.

✔ Si quieres saber en qué consiste la analítica web y la importancia que tiene para tu proyecto te interesa este post:

 

Estos son los principales objetivos que podrás configurar como eventos en tu página web de WordPress:

 

1. Medir formulario de contacto enviado con GTM

 

Hay diferentes maneras de medir el envío de un formulario de contacto en WordPress con Tag Manager, pero yo voy a contarte cuál es la más acertada desde mi punto de vista.

En adelante ya no será necesario medir el envío de formularios a través de una thank you page en WordPress. Aunque si quieres aprender esto, te recomiendo este post de Alex Serrano:

 

El proceso que te voy a enseñar para medir el envío de formulario será a través de un evento personalizado. Te permitirá medir «envíos» en cualquier de las páginas de tu web. Es decir, si tienes un formulario en más de una página, vas a poder medir las conversiones de todos ellos.

  Si tu objetivo es medir conversiones de formulario por landing page, (Ej: conversiones del «curso A», conversiones del «curso B», conversiones del «curso C», etc). te recomiendo tener un creado un formulario para cada página, es decir, para cada curso.

Voy a empezar por la configuración del activador. El nombre que le voy a a dar será «Formulario enviado» y el tipo de activador que tendrás que seleccionar será de evento personalizado.

 

evento tag manager

 

Para poner el «nombre del evento» tendrás que irte a tu WordPress y buscar dentro del formulario cuál es el «id» de tu contact form 7. Lo encontrarás aquí:

 

medir formulario wordpress con google tag manager

 

Esta será la expresión que tengas que poner en el evento: form-id-«tu número»

 

medir formulario wordpress tag manager

 

Si quieres medir el envío de más de un formulario de contacto de tu web, es importante que selecciones «Todos los eventos personalizados».

 

Con el activador ya configurado, crea una nueva etiqueta y dale el nombre de «envío de formulario». En la configuración de la etiqueta, selecciona «Google Analytics: Universal Analytics» y coloca los siguientes parámetros para posteriormente seguir el evento en tu cuenta de GA:

 

medir formulario cms GTM

 

 

Una vez guardados los cambios tendrás que añadir el activador que acabas de crear y guardar de nuevo los cambios. ¡Bien! Ya están la etiqueta y el activador creados. Queda un pequeño paso.

Lo último que tendrás que hacer es ir a tu WordPress y, en todas aquellas páginas donde tengas insertado el formulario de contacto, pega un código html en la página para poder medir el envío en cada una de ellas. Si solo tienes una página de formulario, simplemente pégalo en esa página; y si tienes más de una página con el mismo formulario de contacto, pégalo en el código que te muestro a continuación, en cada una de ellas.


<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
dataLayer.push({'event' : 'form-id-'+event.detail.contactFormId });
}, false );
</script>

 

Si utilizas un maquetador web en WordPress como WPBakery, podrás añadirlo de la siguiente manera en la parte inferior de la página:

 

script tag manager wordpress formulario

 

Otra alternativa es que copies el código directamente en la página o páginas que quieras medir en la parte de html.

Por último, solo te quedaría publicar y enviar los cambios y verificar, en la vista previa del espacio de trabajo, que el activador salta cuando envías el formulario de contacto en una o en todas las página de contacto de tu web.

 

etiqueta activada tag manager wordpress

 

*IMPORTANTE: Con la configuración de esta etiqueta hay un pequeño problema. NO estás midiendo formularios con error. De tal modo que, si un usuario rellena tu formulario de contacto y da error se contabilizara como un objetivo cumplido. Lo cual no tiene mucho sentido. 

Para medir formularios de contacto con error deberás configurar una variable DOM.

Para complementar este post encontrarás toda la información en este artículo:

 

 

2. Medir clicks a urls externas

 

Puede darse el caso que quieras hacer una acción concreta para ver, por ejemplo, cuantos usuarios que visitan tu web hacen clicks en una url concreta. Esto puede ser útil si, por ejemplo, tienes una pasarela externa de reserva de entradas (Ej. Eventbrite), si haces un acción concreta de linkbulding, campañas de CPC o Adsence.

Para medir este evento con Google Tag Manager para WordPress crea, en primer lugar, un activador de Click > Solo enlace.

Como puedes observar más abajo, la manera más sencilla para poder configurarlo es seleccionar el Click Text donde quieres que tenga lugar el evento.

 

wordpress consejos google tag manager

 

En este caso he seleccionado el anchor text pero también puedes medir el click en la url concreta

 

Solo tienes que seleccionar la etiqueta de Google Analytics para poder medirlo posteriormente en Google Analytics. Aquí te comparto la configuración:

click url externa tag manager

Ya sabes que todavía te queda enviar y publicar los cambios. ¡Google Tag Manager es muy de cantar como si no hubiera un mañana!

 

espacio de trabajo google tag manager

 

3. Medir clicks en botones de redes sociales

 

Configurar este evento es útil si tienes diferentes redes sociales y quieres medir cuántas veces el usuario hace clicks en cada una de ella, es decir, conocer cuál es la red que más interesa a tu comunidad o a tus potenciales clientes.

  También podrás configurar este evento para medir los clicks a un botón concreto de tu página web que lleve a un enlace saliente.

Al igual que con el formulario, empieza por el activador. En esta ocasión, crea uno nuevo con el nombre «Click botón Instagram»

 

click evento tag manager

 

Selecciona la opción «Todos los elementos» y que el activador solo se active en «Algunos clics«. Ahora configura la condición que hará que este activador entre en funcionamiento cuando tenga lugar el evento.

Para ello, selecciona la condición «Form Classes» situada en el desplegable  «Elegir variable integrada…«. Una vez que localizada, tienes que identificar cuál es el elemento class necesario para la activación.

medir clicks redes sociales web google tag manager

 

Si verificas en tu espacio de trabajo que la etiqueta no salta de manera correcta con esta condición, sustituye «es igual a» por «empieza por».  Así no deberías tener ningún problema.

 

Ve de nuevo a tu web y localiza el botón que querías medir (en este caso, corresponde al botón de la red social Instagram). Haz clic en el botón derecho de tu ratón > Inspeccionar y busca el selector de elementos. Después, pasa con el ratón por el botón que quieres medir y observarás que automáticamente te muestra cuál es el <i class>. Copia este código en tu cuenta de Tag Manager, como te muestro en la imagen de arriba. 

 

configurar activador google tag manager

A continuación, tienes que crear la etiqueta necesaria para la posterior medición del evento en Analytics. Por lo tanto, dale el nombre «Click Instagram»

En este caso, selecciona también la etiqueta de Google Analytics y el tipo de seguimiento > Evento 

No olvides «enviar y publicar los cambios» y comprobar en el espacio de trabajo:

medir evento boton con tag manager

 

 

4. Medir porcentaje de scroll

 

Medir el porcentaje de scroll puede ser interesante en el caso de un blog, con el fin de analizar la calidad del tráfico. A pesar de ello, no siempre un evento de scroll será un objetivo en Google Analytics. Esto dependerá de si para ti o tu proyecto es importante.

En primer lugar, crea un activador llamado Scroll, seleccionado el tipo de activador «profundidad de desplazamiento«.

Como ves un poco más abajo, he seleccionado «profundidad de desplazamiento vertical» y he expresado en términos porcentuales que se cumpla al 60%. O lo que es lo mismo, este evento saltará cuando el usuario haga scroll más de un 60% en la página.

 

scroll wordpress tag manager

 

  ¿Para qué puede ser útil medir el porcentaje de scroll? Sin duda, se trata de un buen indicador de la calidad del tráfico de una web y sirve para conocer si un usuario está interesado en el contenido que has generado.

Al crear un evento de Scroll, por un lado, medirás la interacción del usuario con el contenido y, por el otro, lograrás que tu porcentaje de rebote disminuya ya que este evento contará como una interacción.

Con el activador creado, ahora te toca crear la etiqueta bajo el nombre «Scroll 60%«. Esta será la configuración:

profundidad scroll wordpress tag manager

Es importante selecciones la etiqueta {{Scroll Depth Threshold}}.
Para activarla tendrás que hacerlo Desde Variables > Configuración > Desplazamiento > Activar todas.

 

Selecciona el activador scroll que habías configurado y para finalizar solo tienes que enviar y publicar los cambios.

 

 

Medir etiquetas de eventos de Tag Manager en Analytics

 

Ya tienes creado el contenedor de Google Tag Manager para medir objetivos de tu web WordPress. Y te preguntarás, ¿cómo hago para que las etiquetas de Tag Manager se conviertan en eventos para poder medir objetivos en Google Analytics?

La pregunta tiene su «aquel», aunque el proceso es relativamente sencillo. Sobre todo, si has hecho las comprobaciones pertinentes para ver que cada una de las etiquetas que has creado se activan correctamente en la vista previa de tu espacio de trabajo.

Te voy a mostrar como ejemplo la etiqueta de «formulario de contacto» y cómo se convierte en objetivo, a través de un evento, en Google Analytics.

La configuración del objetivo «Formulario de contacto enviado», a través de un evento, es replicable para el resto de etiquetas.

 

  Crea un nuevo objetivo en GA

 

Dirígete a tu cuenta de Google Analytics y dentro de la parte administrativa, a nivel de «vista,» crea un nuevo objetivo.

 

wordpress y tag manager

 

  Configurar, descripción e información del objetivo

 

Tienes que crear un objetivo personalizado que, en este caso, será un evento. Le puedes dar el nombre de «formulario de contacto enviado».

 

configurar objetivo formulario de contacto

 

A la hora de dar la información del objetivo es muy importante que copies y pegues exactamente las mismas condiciones del evento que creaste en Tag Manager. De lo contrario, no se contabilizarán los objetivos.

parametro de seguimiento de eventos
condiciones del evento

 

  Comprobar evento en «tiempo real»

 

Para comprobar que todo el proceso está correcto y que el objetivo de evento se está contabilizando de manera adecuada en GA, te recomiendo que vayas al informe de tiempo real > Eventos

 

tiempo real analytics google tag manager wordpress

 

Haz una prueba y rellena un formulario de contacto. Una vez que lo envíes podrás comprobar que ha saltado el evento de «formulario» en tiempo real (el proceso es casi instantáneo si la configuración es correcta).

Te recomiendo que eches un vistazo en el informe de comportamiento > Eventos para poder analizar cada uno de estos eventos que acabas de crear.

 

Recuerda la importancia que tiene Google Analytics en el proceso de medición de cualquier proyecto online. Una vez que tengas definidos los objetivos que quieres medir, tienes que saber cuáles son los principales KPIs, así como, los indicadores SEO a tener en cuenta para mejorar un proyecto web en WordPress.

 

Conclusiones

 

Espero que con esta guía seas capaz de sacar el máximo rendimiento de Google Tag Manager a tu proyecto WordPress, o al de un cliente. Como puedes observar, las posibilidades son infinitas y solo es cuestión de práctica que seas capaz de sacar el máximo rendimiento a esta herramienta.

Estos conocimientos de Tag Manager son solo el principio, sin duda, si quieres medir con mayor precisión y aplicar tus conocimientos sobre la material realizar un curso de Google Tag Manager sería lo ideal.

El tracking de eventos con GTM o Analytics es esencial para llevar a cabo una estrategia de marketing y poder medir el cumplimiento de tus objetivos.

No olvides dejar un comentario si tienes algún tipo de duda a cerca del post, ¡me encantaría recibir tu feedback! También si has probado a configurar alguno de estos objetivos y consideras que hay alguno importante que no haya mencionado, ¡házmelo saber! 😉

 

16 Comentarios
  • Salima
    Publicado a las 20:02h, 27 abril Responder

    ¡Un contenido super útil, Carlos! Me parece una guía muy interesante, sobre todo para todos aquellos que nos estamos iniciando con el uso de la herramienta. Enhorabuena por el contenido 😉

  • Alex
    Publicado a las 16:56h, 04 julio Responder

    Espectacular contenido. Muchas gracias

    • admin
      Publicado a las 09:38h, 06 julio Responder

      Gracias por tu comentario Alex! Espero que te haya sido de utilidad el post 😉

  • Laura Reyes
    Publicado a las 18:06h, 07 agosto Responder

    Super útil. No he visto un post parecido en mucho tiempo. ¡Enhorabuena!
    He implementado todo en mi web, excepto el click a url externa, que no he conseguido verificarlo. Quizás porque más que una url es una imagen con enlace a un formulario de Mailchimp con suscripción. ¿Qué activador debería elegir en este caso?

    ¡Gracias!

    • admin
      Publicado a las 08:29h, 17 agosto Responder

      Gracias por tu comentario Laura! Que bien que este artículo te haya servido para configurar los principales objetivos de tu proyecto 😉
      El método que puedes escoger para medir la url externa, aunque esta sea una imagen, puede ser igual que el que explico paran medir los botones de redes sociales, puesto que estos no dejan de ser urls externas y están asociadas a un botón/icono. Usa la condición «Form Classes» e identifica cuál es el elemento class del botón que has creado con Mailchimp. A ver si de esta manera te deja medirlo. Un saludo!

  • Gabriel B
    Publicado a las 20:10h, 25 agosto Responder

    Excelente información, nunca antes tuve problema para instalar Tag Manager en varias wordpress con plugin hasta hoy, me arrojó error y quedé sin saber que hacer, Gracias a este articulo me quedó funcionando perfecto. Muchas Gracias por tan buen contenido para los que no somos muy experto. buen día 🙂

    • admin
      Publicado a las 14:46h, 26 agosto Responder

      Gracias por tu comentario Grabiel! Me alegro que el post os haya servido para poder ayudaros con algunos de los principales objetivos de vuestra cuenta de GTM. 😉

  • victor gonzales
    Publicado a las 22:42h, 30 agosto Responder

    una duda tengo una wordpress con el tema hestia y una landing con elementor y el tag manager solo me funciona en el home de hestia, como podria instalarlo en la landing q a su vez es una pag del sitio web. ??? le agradezco si me puede responder

    • admin
      Publicado a las 11:58h, 12 septiembre Responder

      Hola Victor! ¿Dónde tienes instalado el código de Google Tag Manager en tu WordPress? ¿Lo tienes en el Header.php de una plantilla o de las dos?
      Lo conveniente es que lo instales en el archivos genérico del Header.php, para que los datos se puedan aplicar a todas las urls de tu dominio.
      Si lo tienes puesto con un Plugin solo en una de las plantillas, pueden aparecer estos problemas. Espero que te sirva de ayuda! Saludos!

  • sanosiris
    Publicado a las 23:51h, 22 noviembre Responder

    Gracias por el contenido muy interesante. Tengo una duda referente a Google Adsense Publicidad eh seguido todo los pasos se a instalado todo ok pero mi publicidad sale en la parte de abajo de mi web abria una forma de colocarlo en en post.

    Tendria que modificar algo en GTM ó seria en el Plugins de Google Tag Manager en WordPress.

    El code de adsense lo realice con HTML ya que no se observa alguna compatiblidad en GTM o estoy equivocado…

    Gracias por leerme.

  • José Luis
    Publicado a las 11:40h, 13 enero Responder

    Hola Carlos, Muy muy bien explicado.
    Para un banner o una imagen concreta, ¿Cómo se haría? Gracias.

    • admin
      Publicado a las 20:01h, 24 febrero Responder

      Gracias por tu comentario Jose Luis! Para poder medir una imagen o banner concreto, el proceso seria parecido al de «medir botones sociales» que explico. Tan solo tendrías que coger el elemento img class. 😉

  • Esther
    Publicado a las 20:08h, 09 febrero Responder

    Hola!!! He seguido los pasos y todo va perfecto. En vez de usar el Plugin que sugieres he usado otro que se llama google tag manager for wordpress para integrar el codigo en mi pagina web. El tema es que los datos se sincronizan bien en analiytics pero cuando intento verificar Google search console me sale el siguiente mensaje:
    Método de verificación:
    Google Tag Manager
    Motivo del error:
    El fragmento de Google Tag Manager de tu sitio web no está en la ubicación correcta de la página. Más información
    Corrige tu implementación y repite la verificación. Si lo prefieres, puedes utilizar otro método de verificación.

    ¿que hago? vuelvo a empezar desde cero?

    Graciasss

    • admin
      Publicado a las 20:05h, 24 febrero Responder

      Hola Esther! Verifica con la extensión de chrome de Tag Assistant que el código está puesto de manera correcta. En cualquier caso a la hora de verificar Google Search Console, seleccionaría la opción del registro de DNS. Saludos!

  • Laura Martín
    Publicado a las 11:18h, 05 marzo Responder

    El mejor post que he encontrado de Google Tag Manager con diferencia. Muchas gracias por todo el contenido de valor Carlos 😉

    • admin
      Publicado a las 17:47h, 11 marzo Responder

      Laura! Que bien! Me alegro que a una crack como tú le haya sido de utilidad el post! Un abrazo!

Deja un comentario