google tag manager para wordpress guia

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

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.

 

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.

estructura google tag manager

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 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 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

 

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

 

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

 

√ö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

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 head

 

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 para gtm

 

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

 

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 gtm 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:

 

 

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

 

 

*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

 

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 gtm 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. 

 

 

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.

 

 

¬°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 gtm

 

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.

 

 

¬† 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.

 

 

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.

 

 

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√≠:

 

 

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 wordpress tag manager

 

 

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.

 

 

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!

 

 

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¬Ľ

 

 

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.

 

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. 

 

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:

 

 

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.

 

 

  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¬Ľ.

 

 

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.

 

¬† 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

 

 

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! ūüėČ

 

3 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 utilizar el post ūüėČ

Deja un comentario

Share This