I have been trying to track Hubspot Livechat on Google Tag Manager (GTM). More specifically people who are coming from Google Ads then click the Livechat.
Is there any way to do that? I asked Hubspot Support, but apparently there is no way to do that from Hubspot.
<script type="text/javascript">
function onConversationsAPIReady() {
//console.log("HubSpot Conversations API Available");
window.HubSpotConversations.on( 'conversationStarted', function( payload ) {
//console.log("HubSpot Conversation Started");
window.dataLayer.push({
'event': 'hubspot-conversation-started',
'hs-conversation-id': payload.conversation.conversationId
})
});
}
/*
If external API methods are already available, use them.
*/
if (window.HubSpotConversations) {
onConversationsAPIReady();
} else {
/*
Otherwise, callbacks can be added to the hsConversationsOnReady on the window object.
These callbacks will be called once the external API has been initialized.
*/
window.hsConversationsOnReady = [onConversationsAPIReady];
}
</script>
If you have an Enterprise-level subscription and are using bots, however, you can leverage either the bot webhook or code snippet actions to interact with this email.
Just to clarify, the purpose of tracking this is for Google Analytics and Google Ads conversions. Therefore, I only want to see/track that the email address was successfully submitted via a chat form. I don't need to see or record the actual email address for this purpose.
It does but unfortunately the answer is the same... at this time, HubSpot chat widgets do not emit an event or signal when an email address is submitted.
The closet alternatives I can think of are the two bot chatflow actions I outlined above.
Also, I know you're not referring to HubSpot forms, but they have global events which trigger when submissions are received and persisted.
If you are asking about the snippet in general, yes, you can place that within <script></script> tags within your page's HTML.
You may have to change the event name from hs_chat_started to match the Google Tag Manager event you have configured.
Could you clarify your question about the trigger? The HubSpot conversationStarted event is a trigger of sorts since it will trigger a callback, but are you referring to a different trigger? If so, what are you looking for the trigger to do?
If I chanege a little bit the script: <script> window.HubSpotConversations.on('conversationStarted', function (payload) { dataLayer.push({'event': 'hs_chat_started'}); }); </script>
We are trying to do the same for chat, but I can't get it to work. All I want to do is use a GTM listener to listen for the 'conversationStarted' event and then push the conversation ID into the datalayer.
<script type="text/javascript">
function onConversationsAPIReady() {
//console.log("HubSpot Conversations API Available");
window.HubSpotConversations.on( 'conversationStarted', function( payload ) {
//console.log("HubSpot Conversation Started");
window.dataLayer.push({
'event': 'hubspot-conversation-started',
'hs-conversation-id': payload.conversation.conversationId
})
});
}
/*
If external API methods are already available, use them.
*/
if (window.HubSpotConversations) {
onConversationsAPIReady();
} else {
/*
Otherwise, callbacks can be added to the hsConversationsOnReady on the window object.
These callbacks will be called once the external API has been initialized.
*/
window.hsConversationsOnReady = [onConversationsAPIReady];
}
</script>
I have tried all the triggers and tags mentioned in this Topic, however, I'm still not being able to track the conversations started in the Chat. I might be using the wrong trigger or tag type or something (not advanced with GTM).
Would it be possible for anyone to add the step-by-step here of the trigger and tag I have to create in GTM for it to work? With the types I have to use, please, non-techie here 🙂
There is no single correct way to use Google Tag Manager to process HubSpot conversation events. An optimal solution depends on your goals and your current setup.
First, can you specify the "code" to which you are referring (e.g. @stuartbrameld's solution)?
It's possible to implement custom JavaScript like this in a GTM "Custom HTML"-type tag. just as it's possible to embed directly on your page.
If you're planning to implement window.dataLayer.push() via a GTM "Custom HTML" tag, then an "All Pages" or "Page View" trigger might be your best bet.
If you're embedding the script directly on your page and triggering implement window.dataLayer.push() from there, the trigger for subsequent tags in GTM will be your chosen event name (e.g. hubspot-conversation-started).
Thanks so much for sharing, @stuartbrameld! I was just about to take a look at your question from Monday.
Since authoring my original solution, I've found that it only fires if it loads after window.HubSpotConversations. This tends to be unpredictable so the if/else statement with window.hsConversationsOnReady is often a more reliable option. (This is also outlined in the API's documentation.)
Feb 6, 20207:50 AM - bearbeitet Feb 6, 20207:51 AM
Teilnehmer/-in
Hubspot Livechat on Google Tag Manager
lösung
Hi Isaac,
From some the past posts you have made, you indicated using the javascript API method and custom event. This is for Enterprise clients only, is that correct? And if it is, is there any other work around?