Guía completa de Google Tag Manager y Twitter

¿Quieres ver el contenido de la página? Mostrar

Actualizado: 11 de agosto de 2021

Si ya estás utilizando Twitter como herramienta de marketing, seguramente quieres medir los resultados de tus campañas. Pero, ¿cómo puedes rastrear interacciones como los clics en el botón “Tweet”? ¿Y las conversiones en Twitter? Antes, el proceso era engorroso: tenías que enviar un correo al desarrollador con los requisitos de seguimiento y esperar semanas para su implementación. ¡Pero ya no es así! Aquí te presento una guía completa sobre cómo integrar Google Tag Manager (GTM) con Twitter para optimizar tu marketing digital.

Este artículo asume que tienes un conocimiento básico sobre las etiquetas, activadores, variables y la capa de datos de Google Tag Manager. Si eres principiante, te recomiendo que empieces aquí. ¿Quieres acelerar tu aprendizaje? Echa un vistazo a mi masterclass de GTM para principiantes.

Twitter Pixel y Google Tag Manager

El primer capítulo de esta guía está dedicado al remarketing. Aunque las cookies de terceros están en camino a desaparecer, aún puedes aprovecharlas en cierta medida por ahora. Con los parámetros de eventos de las etiquetas, puedes gestionar un seguimiento avanzado de conversiones con solo unos clics.

El remarketing en Twitter funciona de manera similar al remarketing en Google Ads o a Facebook Pixel. Cuando un visitante entra a tu sitio web, se le asigna una cookie única que le permite a Twitter reconocerlo y retargetearlo con anuncios.

Google Tag Manager facilita la adición de una etiqueta universal de Twitter (conocida como Twitter Pixel) para que puedas comenzar a construir una audiencia personalizada.

Cómo obtener el ID del Pixel

Primero, inicia sesión en tu cuenta de Twitter y haz clic en Más > Twitter Ads en el menú lateral.

Cuando accedas a Twitter Ads, selecciona Herramientas y luego Seguimiento de Conversión. Si no has configurado conversiones antes, verás un mensaje indicándolo.

Haciendo clic en Ver código e instrucciones de instalación debajo del estado de la etiqueta universal del sitio web, obtendrás el código del pixel. Un ejemplo del código de Twitter Tracking Pixel es el siguiente:

Como Google Tag Manager ofrece una plantilla predefinida para la etiqueta de Twitter, solo necesitas el ID del Twitter Tracking Pixel. Encuéntralo y cópialo, ya que este ID es necesario para cada etiqueta de Twitter en GTM, al igual que el ID de seguimiento de Google Analytics.

Creación de una etiqueta y variable

En Google Tag Manager, ve a Variables y crea una nueva variable definida por el usuario:

Título – Constante – Twitter Pixel ID.
Tipo – Constante.
Valor – Pega el ID del Twitter Pixel, por ejemplo, aa1x2.

A continuación, abre tu cuenta de Google Tag Manager y crea una nueva etiqueta:

Tipo de etiqueta – Etiqueta Universal de Twitter (deberás usar la función de búsqueda en la lista de plantillas de etiquetas).
Pega el ID del Twitter Pixel.
Selecciona el Evento de la etiqueta – Pageview.
En la sección de Activación, elige – Todas las páginas.

Presiona guardar.

Prueba la etiqueta

En la esquina superior derecha de la interfaz de GTM, haz clic en Vista previa.

Te aparecerá una ventana emergente donde deberás ingresar la URL que deseas probar y depurar. Puede ser la dirección de la página de inicio o la URL de una página específica. Luego, presiona Iniciar.

Se abrirá una nueva pestaña del navegador donde verás la URL que ingresaste. En la parte inferior de esa página, deberías ver una insignia que indica que la etiqueta se ha activado.

Si no ves el mensaje de éxito o si la insignia de vista previa muestra que el depurador no está conectado, lee esto.

En la vista previa, haz clic en Container Loaded. Esto es equivalente al disparador Todas las Páginas o Pageview. Deberías ver que tu etiqueta de Twitter Pixel se ha activado correctamente.

Además, utiliza la extensión de Chrome Twitter Pixel Helper. Instálala, actualiza la página de tu sitio web donde se habilitó el modo de vista previa y el pixel de Twitter está activado. Haz clic en el ícono de Twitter Pixel Helper en tu navegador y deberías ver algo así:

Un número aparecerá junto al ícono de Twitter Pixel Helper, indicando que la etiqueta ha funcionado correctamente.

¡Listo! Ahora has instalado la etiqueta del Twitter Pixel. A partir de ahora, todos los visitantes de tu sitio web recibirán una cookie de terceros de Twitter, lo que significa que tu audiencia de remarketing (o audiencia personalizada) comenzará a crecer. Cuando estos visitantes que tienen cookies naveguen por Twitter, verán tus anuncios.

No olvides el consentimiento

Usé el disparador Todas las páginas en este artículo por simplicidad. En realidad, la configuración es más compleja, ya que deberías activar etiquetas como esta solo si un visitante otorga su consentimiento para el seguimiento. Para hacerlo, necesitarás:

Tener un popup de consentimiento de cookies en tu sitio web.
Configurar GTM para escuchar las interacciones del usuario con ese popup.
Activar etiquetas solo si un visitante otorga su consentimiento.

Este tema no es fácil de abordar. Puedes familiarizarte más con él aquí. También lo trato en profundidad en mi Masterclass de Google Tag Manager para principiantes.

Aspectos a tener en cuenta

Pueden pasar hasta 24 horas para que los datos aparezcan en la cuenta de Twitter Ads (aunque generalmente se procesan mucho más rápido).
Prueba, prueba, prueba antes de publicar: los detalles son cruciales. Un pequeño error puede llevar a grandes problemas.

No profundizaré en cómo configurar la campaña publicitaria real en Twitter. Puedes ver este video en su lugar.

¿Qué sigue? Es momento de rastrear las conversiones del Twitter Pixel con Google Tag Manager.

Seguimiento de conversiones de Twitter con Google Tag Manager

El segundo capítulo de la guía de Google Tag Manager para Twitter cubre el seguimiento de conversiones. Si ya estás familiarizado con el proceso de configuración del seguimiento de Google Ads a través de Google Tag Manager, notarás que es bastante similar. Solo necesitas:

Crear una etiqueta en la cuenta de Twitter Ads (¡Hecho! – Esto se describió en el capítulo anterior).
Encontrar y copiar tu ID de pixel (¡Hecho! – Lo describí en el capítulo anterior).
Pegar el ID en el campo correspondiente de la etiqueta (¡Hecho! – Lo describí en el capítulo anterior).
Hacer que la etiqueta (o etiquetas) se active después de ciertas interacciones que desees rastrear como conversiones.

El seguimiento de conversiones en Twitter funciona de manera similar a la técnica de remarketing que se describió anteriormente. Utilizarás la misma plantilla de etiqueta de Twitter en Google Tag Manager, pero los eventos serán diferentes. En el capítulo anterior, creamos una etiqueta de Pageview; en este capítulo, rastrearemos interacciones más precisas, como registros o compras.

Para cada interacción que desees rastrear en Twitter, necesitarás crear una etiqueta de Twitter separada en GTM. Utilizará el mismo ID de seguimiento del pixel de tu etiqueta universal del sitio web, pero los eventos de la etiqueta serán distintos.

Además, los disparadores en Google Tag Manager serán diferentes para cada evento. ¿Quieres aprender varias técnicas de seguimiento de eventos? Consulta mis cursos de Google Tag Manager.

Seguimiento de compras con Twitter Pixel y Google Tag Manager

Creo que la interacción más importante que la mayoría de mis lectores querrá rastrear es la compra. Así que veamos más de cerca cómo podemos implementar esto.

La opción más robusta para rastrear compras es pedir a un desarrollador que envíe los datos de compra a la Capa de Datos. Una vez que el desarrollador lo implemente, activa el modo de vista previa de GTM y realiza una compra de prueba. En la parte izquierda del modo de vista previa, deberías ver un evento de compra. Haz clic en él y luego expande la llamada API. Un ejemplo de esos datos podría verse algo así:

Si deseas aprender más sobre la capa de datos y el seguimiento de compras, echa un vistazo a este curso.

Aunque hay muchos puntos de datos relacionados con la compra en la capa de datos, está bien enviar al menos el ingreso y la moneda. Dado que queremos usar esos dos puntos de datos y enviar sus valores al Twitter Pixel, debemos crear dos Variables de Capa de Datos separadas.

En GTM, ve a Variables > Nueva > Variable de Capa de Datos. Crea la primera variable, que será ecommerce.purchase.currency. Lee esto para comprender por qué ingresé el nombre de esta manera.

Luego, haz lo mismo para ecommerce.purchase.value.

En GTM, ve a Etiquetas > Nueva > Twitter Universal Website Tag y configura lo siguiente:

Inserta la variable constante del ID de Twitter Pixel (creada en el primer capítulo de este artículo). Además, selecciona el evento de Compra. Pero aún no hemos terminado. También podrías enviar el valor del pedido y la moneda junto con el evento de Compra.

Debajo de la lista de posibles eventos, haz clic en Añadir (en la sección de Parámetros de Evento). Luego deberás agregar dos parámetros (uno por uno). El orden no importa aquí, así que empecemos con la moneda. Selecciona la moneda en el primer campo. En el segundo campo, inserta la variable de Capa de Datos (que devuelve la moneda) que creaste recientemente. Se verá así:

Haz clic en Añadir. Luego haz lo mismo para valor. Selecciona valor en el primer campo desplegable e inserta la variable de Capa de Datos que devuelve el total del pedido en el segundo campo. Al final, la configuración de la etiqueta se verá así:

En la etiqueta de compra del Twitter Pixel, haz clic en cualquier parte de la sección de Activación y luego haz clic en el ícono de Más en la esquina superior derecha.

Selecciona el tipo de activador: Evento Personalizado. Si el valor del parámetro “evento” en el dataLayer.push fue “compra”, ingresa “compra” en la configuración del activador.

Quiero enfatizar esto: ingresé “compra” (todo en minúsculas) porque el “evento” en el dataLayer.push fue “compra”. Guarda el activador y se añadirá automáticamente a la etiqueta del Twitter Pixel.

Prueba la configuración

Ahora es el momento de probar todo. En la esquina superior derecha de la interfaz de GTM, haz clic en Vista previa.

Te aparecerá una ventana emergente donde ingresarás la URL que deseas probar y depurar. Puede ser la dirección de la página de inicio o la URL de una página específica. Luego, presiona Iniciar.

Se abrirá una nueva pestaña del navegador donde verás la URL que ingresaste. En la parte inferior de esa página, deberías ver una insignia indicando que la etiqueta se ha activado.

Si no ves el mensaje de éxito o si la insignia de vista previa muestra que el depurador no está conectado, lee esto.

Realiza una compra de prueba en tu sitio web. Un evento de compra debería aparecer en la parte izquierda del modo de vista previa. Haz clic en él y deberías ver que la etiqueta de compra de Twitter se ha activado.

Además, utiliza la extensión Twitter Pixel Helper. Actualiza la página de tu sitio web donde se habilitó el modo de vista previa y el Twitter Pixel está activado. Haz clic en el ícono de Twitter Pixel Helper en tu navegador. Deberías ver algo como esto:

Haz clic en “La etiqueta del sitio web de Twitter se activó correctamente” y luego haz clic en Información de depuración avanzada para ver más detalles sobre la solicitud que se envió al Twitter Pixel.

¡Genial! Ahora es hora de publicar tus cambios en GTM. Haz clic en ENVIAR en la esquina superior derecha, selecciona PUBLICAR Y CREAR VERSIÓN, y luego completa el flujo que verás allí.

Aspectos a tener en cuenta

Pueden pasar hasta 24 horas para que los datos aparezcan en la cuenta de Twitter Ads (aunque generalmente se procesan mucho más rápido).
Antes de entrar en modo “rampage” de etiquetado, prepara un plan de medición: una lista de lo que realmente necesitas rastrear. Esto traerá más transparencia y te ayudará a planificar y evitar problemas de inconsistencia.
Prueba, prueba, prueba antes de publicar: los detalles son cruciales. Un pequeño error puede llevar a grandes problemas.

No profundizaré en cómo configurar la campaña publicitaria real en Twitter. Puedes ver este video en su lugar.

Dónde encontrar los datos de ventas/conversiones en la interfaz de Twitter Ads

Puedes encontrarlos yendo a Campañas > Ads Manager. Luego, en la lista de todas las campañas, cambia las métricas a Conversiones del sitio web. Este es el lugar donde encontrarás los datos de compra.

Si deseas ver otras conversiones, vuelve a cambiar a Resumen.

Y haz clic en Personalizar métricas.

Luego sigue buscando Conversiones Clave. Son aquellas que seleccionaste como tus conversiones principales en las campañas publicitarias.

La incorporación de botones de redes sociales en tu sitio web se vuelve menos popular cada día. Sin embargo, si todavía tienes un botón de “Tweet” en tu sitio y deseas rastrear sus clics, este capítulo es para ti.

Antes de continuar

Aquí hay varias cosas a tener en cuenta:

Este método de seguimiento solo admite aquellos botones que están integrados en tu sitio web. Es imposible rastrear tweets, retweets, etc., que ocurren en otros sitios web (incluido twitter.com). Solo puedes rastrear las interacciones que ocurren dentro de los límites de tu propio sitio web que tiene Google Tag Manager instalado.
Este método de seguimiento solo admite botones de Twitter predeterminados. AddThis, Sumo o cualquier otro complemento de compartición social no serán rastreados. En el caso de botones sociales personalizados, deberías intentar rastrear clics en botones/enlaces estándar o comprobar si el proveedor de botones sociales ofrece una integración de Google Analytics incorporada.
Cuando un usuario hace clic en el botón Tweet en tu sitio web, aparece una pequeña ventana (donde la persona puede añadir algo de texto a su tweet). Desafortunadamente, no es posible rastrear si una persona finalmente publicó su tweet. Recuerda, podemos rastrear el botón que está integrado en tu sitio. No podemos rastrear el botón en la pequeña ventana (porque está fuera de tu sitio). Así que en este caso, podemos decir que rastrearemos la intención de los visitantes de tuitear más que los tweets reales.

Etiqueta HTML personalizada – Escucha de Twitter

Para rastrear los clics en los botones de Twitter, necesitaremos crear una etiqueta HTML personalizada en GTM: el escuchador de Twitter. Como puedes adivinar por su título, escuchará las interacciones de los botones de Twitter que ocurren en un sitio web. Después de que el escuchador detecta un clic, creará un evento en la capa de datos. Este evento en la capa de datos es muy importante; lo utilizaremos como un disparador para activar la etiqueta de Google Analytics.

A continuación, explicaré cómo funciona el seguimiento de botones de Twitter en detalle. Vamos a crear una etiqueta de escuchador de Twitter en GTM.

Configura la etiqueta de la siguiente manera:

Tipo de etiqueta – HTML personalizado
Título de la etiqueta – cHTML – Escuchador de Twitter. cHTML significa HTML personalizado (me gusta mantener todas las etiquetas en orden).

En el campo HTML, pega el siguiente código (que monitorea los botones de Twitter en una página y dispara un evento en la capa de datos socialInteraction en caso de clic):

<script>
if (typeof twttr !== 'undefined') {
 twttr.ready(function (twttr) {
 twttr.events.bind('tweet', tweetIntentToAnalytics);
 twttr.events.bind('retweet', retweetIntentToAnalytics);
 twttr.events.bind('favorite', favIntentToAnalytics);
 twttr.events.bind('follow', followIntentToAnalytics);
 });
}
function clickEventToAnalytics() {
 dataLayer.push({
 'event': 'socialInteraction',
 'socialNetwork': 'Twitter',
 'socialAction': 'click',
 'socialTarget': window.location.href
 });
}
function tweetIntentToAnalytics() {
 dataLayer.push({
 'event': 'socialInteraction',
 'socialNetwork': 'Twitter',
 'socialAction': 'tweet',
 'socialTarget': window.location.href
 });
}
function retweetIntentToAnalytics() {
 dataLayer.push({
 'event': 'socialInteraction',
 'socialNetwork': 'Twitter',
 'socialAction': 'retweet',
 'socialTarget': window.location.href
 });
}
function favIntentToAnalytics() {
 dataLayer.push({
 'event': 'socialInteraction',
 'socialNetwork': 'Twitter',
 'socialAction': 'favorite',
 'socialTarget': window.location.href
 });
}
function followIntentToAnalytics() {
 dataLayer.push({
 'event': 'socialInteraction',
 'socialNetwork': 'Twitter',
 'socialAction': 'follow',
 'socialTarget': window.location.href
 });
}
</script>

En la sección de Activación, haz clic en el bloque completo:
… y elige el disparador Window Loaded . Si no tienes uno, créalo. La configuración del disparador debería verse así:
Asócialo a la nueva etiqueta HTML personalizada de escuchador de Twitter.

¿Por qué no elegí un disparador de Pageview regular? A menudo he notado que el escuchador no funciona correctamente si se inicia en las primeras etapas de carga de la página (cuando los botones de Twitter no han terminado de cargar).

Elegí el evento Window Loaded por una razón. Activa nuestro escuchador de Twitter solo cuando todos los demás scripts en la página (incluidos los botones de Twitter) se han cargado. De esa manera, puedo asegurarme de que todos los botones serán rastreados correctamente.

Sin embargo, hay un pero. Si tu página tarda 10 segundos en cargar todos los scripts y el visitante hace clic en el botón Tweet en el octavo segundo de su visita, esa interacción no se rastreará, porque el escuchador de Twitter aún no se ha activado. Pero elegí convivir con esta desventaja porque no espero que los visitantes empiecen a compartir contenido frenéticamente justo después de aterrizar en una página.

Prueba el escuchador de Twitter

Ahora, usemos el modo de vista previa y depuración de Google Tag Manager para ver si el escuchador de Twitter funciona para nosotros.

En la esquina superior derecha de la interfaz de GTM, haz clic en Vista previa.

Se abrirá una nueva pestaña del navegador donde verás la URL que ingresaste. En la parte inferior de esa página, deberías ver una insignia que indica que la etiqueta se ha activado.

Si no ves el mensaje de éxito o si la insignia de vista previa muestra que el depurador no está conectado, lee esto.

Haz clic en Window Loaded en la parte izquierda del modo de vista previa y verifica si tu escuchador se ha activado. Se supone que debe activarse en cada página.

Luego, haz clic en el botón de Tweet integrado en tu sitio web. Debería aparecer un evento de socialInteraction en el modo de vista previa. Si no lo hizo, entonces o bien has configurado algo incorrectamente o ese botón no es compatible con esta solución.

De todos modos, ese evento socialInteraction debería verse así:

Disparador de evento personalizado

Ahora deberíamos crear un activador en GTM que reconozca el evento de la capa de datos socialInteraction. Esto es crucial para que nuestra etiqueta de Google Analytics funcione. En Google Tag Manager, ve a Activadores y haz clic en Nuevo. Crea un activador con la siguiente configuración:

Variable de capa de datos

Como ya sabes, cuando se produce un clic en un botón de Twitter, el escuchador de Twitter crea un evento en la capa de datos. Lo que quizás no sepas es que también proporciona datos adicionales:

¿Ves socialNetwork? Podemos pasar esos datos a Google Analytics 4. Pero primero, necesitamos crear una variable para eso (de lo contrario, no podremos usarla en la etiqueta). Ve a Variables en GTM > Nuevo > Variable de Capa de Datos y establece la siguiente configuración.

En caso de que te preguntes qué significa dlv en el título de cada variable, es Variable de Capa de Datos. Me gusta mantener mis etiquetas, activadores y variables ordenados. Esto facilita el trabajo con GTM.

Etiqueta de Google Analytics 4

El paso final es crear una etiqueta de Google Analytics. Se activará solo cuando se complete la siguiente secuencia:

Se produce el evento Window Loaded.
Se activa la etiqueta HTML personalizada de escuchador de Twitter.
El visitante hace clic en el botón Tweet.
El escuchador de Twitter detecta el clic y crea el evento socialInteraction en la capa de datos.
Se activa el disparador socialInteraction y lanza la etiqueta de Google Analytics.

Todos los pasos son requeridos y deben completarse en este orden exacto.

En GTM, ve a Etiquetas > Nuevo > Google Analytics: Evento GA4. Ingresa la siguiente configuración:

En el campo de Etiqueta de configuración, ingresé mi etiqueta de configuración de GA4. Esta es la parte esencial de cualquier configuración de GA4. Puedes aprender más aquí.
En el campo de Nombre del evento, ingresé share porque se menciona en la lista de eventos recomendados. Pero eso no es definitivo. Puedes nombrar este evento como desees.
Luego, creé un parámetro social_network porque, digamos, tengo múltiples botones de redes sociales integrados en mi sitio.

En la sección de activación de esta etiqueta, seleccioné el disparador de evento personalizado socialInteraction que creamos anteriormente.

Prueba final

Guarda la etiqueta y luego habilita/actualiza el modo de vista previa de Google Tag Manager (haciendo clic en el botón Vista previa en la esquina superior derecha de la interfaz de GTM). Luego ve a tu sitio web y haz clic en el botón de Tweet integrado. Regresa al modo de vista previa de GTM.

En la parte izquierda del modo de vista previa, verás el evento socialInteraction. Haz clic en él y deberías ver que la etiqueta de evento GA4 se ha activado.

Vamos a comprobar si este evento fue capturado correctamente por Google Analytics 4. Ve a GA4 > Configurar > DebugView. Encuentra tu dispositivo:

… y entonces deberías ver el evento share. Haz clic en él para ver más detalles.

Parece que todo está funcionando bien. Regresa a la interfaz de GTM, haz clic en ENVIAR y luego PUBLICAR.

Aspectos a tener en cuenta

Si deseas usar el parámetro social_network en los informes de GA4, necesitarás registrarlo como una dimensión personalizada.

¿Quieres saber dónde puedes ver los datos de eventos en la interfaz de GA4? Lee esto.

Guía de Google Tag Manager para Twitter: Palabras finales

Puedes hacer muchas cosas impresionantes con Twitter y Google Tag Manager. ¡No hay duda al respecto!

En esta guía de Google Tag Manager para Twitter, he explicado cómo puedes:

Rastrear los clics del botón Tweet y enviar estos eventos a Google Analytics. Así podrás ver qué contenido tiene mejor rendimiento.
Implementar el Twitter Pixel para construir tus audiencias de remarketing.
Rastrear varios eventos/conversiones con la etiqueta universal del sitio web de Twitter en Google Tag Manager. Luego puedes mostrar anuncios en función de las acciones de los visitantes en tu sitio web, de manera similar a Google Ads o Facebook Ads.

¿He olvidado algo en esta publicación? ¡Déjamelo saber en los comentarios!