Tracking User Interactions in HubSpot iframe with Google Tag Manager

Developer Support APIs & Integrations
1

Hi everyone,

I’m working on tracking a page with Google Tag Manager that contains a HubSpot iframe, which is used for selecting a date and time for an appointment. I want to track the following user actions when interacting with the page:

  • Choosing a date: Click on the button with the classname “date-picker-btn valid”.
  • Choosing a time: Click on the div element with the classname “time-picker-btn”.
  • Starting to fill in their details: Input in a field with the classname “form-control”.
  • Submitting the form: Click on the button with the data-test-id=“forward-btn” attribute.

Thanks in advance for your help!

2

Hey @ARefined

The easiest way to do that it’s by Custom Events on Hubspot. Select the specific clicks you want to track it’s quite quick :slightly_smiling_face:
If that doesn’t fit your needs I advice you to use the conversations examples like this one and adapt to form elements (check form references here) - the structure behind it’s the same

3

@jforte ,

Thank you for your response, which provides an overview of what needs to be done. However, in my case, it is not about the HubSpot chat but the meeting page where the user can choose a date and time for an appointment. In my case, this does not solve my problem.
Specifically, the code below needs to be modified.

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