Cómo rastrear Hubspot Chat en Google Ads usando GTM

La principal pregunta que te habrás hecho al usar el Live Chat de HubSpot y que tus campañas de Google Ads se encuentren bien optimizadas, es la de cómo rasterar la actividad del chat como eventos en Google Analytics y declarar la conversión correcta.

Si esa es tu pregunta, llegaste al lugar correcto, comencemos!

Primeros Requisitos:

Los preparativos son simples pero fundamentales, vamos uno por uno.

En resumen los pasos serán:

Paso 1: Crear las variables eventos en Google Tag Manager

En primer lugar debemos crear 3 variables a ser almacenadas, para ello nos vamos a Variables, al final en “User Defined Variables” vamos a crear 3 variables del tipo Data Layer Variable

Paso 2: Crear tag personalizado HTML en GTM

En el apartado de Tags o Etiquetas debemos crear una de Custom Html, con el siguiente código para capturar 2 eventos posibles de la API, el de Contacto Asociado y el de Conversación Iniciada

JavaScript

<script>
function onConversationsAPIReady() {
    window.HubSpotConversations.on('contactAssociated', function(payload) {
        window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'hubspot chat',
            'eventAction': 'contact associated',
            'eventLabel': ''
        })
    });
    window.HubSpotConversations.on('conversationStarted', function(payload) {
        window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'hubspot chat',
            'eventAction': 'conversation started',
            'eventLabel': payload.conversation.conversationId
        })
    });
}
if (window.HubSpotConversations) {
    onConversationsAPIReady();
} else {
    window.hsConversationsOnReady = [onConversationsAPIReady];
}
</script>

JavaScript

Se debe activar en todas las páginas y que llamaremos Hubspot – Chat Listener, lo cual se debería ver del siguiente modo:

Paso 3: Creamos el Trigger o Activador del Chat.

1. Creamos un nuevo trigger en GTM, el cual llamaremos HubSpot Chat – Trigger, del tipo Custom Event
2. En el apartado de event name, usaremos ga_event (este es libre pero recordar que este será el tag que capturaremos al hacer debug o test).
3. Finalmente en las opciones debemos seleccionar que se active cuando la variable eventCategory (creada en el paso 1) es igual a hubspot-chat, dado que es el nombre que se le dá en el código javascript del paso 2.

Todo esto debería verse del siguiente modo:

Paso 4: Creamos el último tag para llevar el evento a GA4.

Para ello creamos un tag que llamaremos GA4 – Hubspot Chat. Este debe ser del tipo Google Analytics: GA4 Event.
En Measurement ID: debemos colocar el de nuestra cuenta de Google Analytics 4.
En Event Name, debemos presionar en el selector de eventos y bucasmos entre los que creamos antes: eventAction
Finalmente el Trigger debe ser el creado en el paso 3.

Todo esto debe verse de esta manera:

Con todo esto ya estarás recibiendo el evento en Google Analytics, el cual puedes probar tanto en el preview de GTM como ir al debug mode de GA

Pasos finales

Al pasar un par de días, y validando que el evento haya ocurrido en tu sitio web, ya puedes ir a buscar los eventos predeterminados que son, Iniciar conversación y contacto asociado. EL que mejor se adapte a tus capañas es el que puedes determinar como conversión en GA4 y recoger en Google Ads como objetivo de campaña.

La manera que más nos acomoda es definirlo como key events en GA4, para luego en Google Ads recogerlo y asignarlo como objetivo, te lo muestro a continuación:

Con todo esto ya tenemos asegurado que las campañas que preparemos, tendrán como objetivo la interacción que deseamos.