I need help setting up tracking for a webpage that has an embedded HubSpot scheduling widget through Google Tag Manager. The iframe contains a booking form where users can schedule appointments.
I want to capture these specific user behaviors:
Date selection: When users click the button containing class “date-picker-btn valid”
Time selection: When users click the div with class “time-picker-btn”
Form interaction: When users begin typing in input fields with class “form-control”
Form submission: When users click the submit button that has attribute data-test-id=“forward-btn”
Any guidance on how to set this up properly would be greatly appreciated!
honestly this is one of those situations where you gotta work around the limitations rather than fight them. i’d suggest tracking user intent differently - maybe fire events when they first interact with the iframe area or scroll to it, then use hubspot’s native form analytics to fill in the gaps. not ideal but it’s better than banging your head against CORS restrictions all day.
The cross-origin iframe limitation has been mentioned already, but there’s another angle worth considering. I’ve worked with HubSpot’s tracking API in the past and found that you can sometimes achieve what you need through their onFormSubmit and onFormReady callbacks if you’re using their embedded form code rather than just the iframe. However, since you’re dealing with their scheduling widget specifically, your options are more limited. One workaround I implemented was using GTM’s timer triggers combined with visibility triggers to track user engagement patterns - not the exact clicks you want, but it gives you meaningful data about form interaction duration and completion rates. You can also set up custom events in GTM that fire when users return to your page after completing the HubSpot form, which helps track the full conversion funnel. It’s not perfect granular tracking, but it provides actionable insights without requiring third-party cooperation.
I ran into this exact issue last year and spent way too much time trying to make it work before realizing the fundamental limitation. Since HubSpot forms run in a sandboxed iframe, GTM cannot access those DOM elements directly due to cross-origin restrictions. The browser blocks any attempt to interact with content from a different domain for security reasons. Your CSS selectors will simply not work in this context. What I ended up doing was implementing a hybrid approach where I tracked what I could on the parent page and used HubSpot’s own event tracking for form-specific actions. You can set up GTM to track when the iframe loads and general engagement metrics like time spent on page, but for the granular form interactions you mentioned, you will need to work within HubSpot’s ecosystem. Check if your HubSpot subscription includes event tracking capabilities or consider switching to an embedded form solution that gives you more control over the tracking implementation.
I’ve encountered this challenge with several clients and found that most people overlook HubSpot’s built-in tracking capabilities when focusing too heavily on GTM solutions. While the iframe restrictions are indeed problematic, HubSpot’s Marketing Hub actually provides detailed interaction analytics for their scheduling widgets through their reporting dashboard. You can access step-by-step conversion data including where users drop off in the booking process. If you need this data in Google Analytics specifically, consider using HubSpot’s webhooks feature to send form completion events to a custom endpoint that then pushes the data to GA4 via Measurement Protocol. This approach gives you the granular tracking you want without fighting browser security policies. The setup requires some backend development work, but it’s more reliable than trying to pierce through iframe limitations. I’ve also seen success with using GTM’s scroll tracking and element visibility triggers to measure user engagement with the widget area as a proxy for interaction intent.
Cross-domain iframe tracking is tricky with GTM since you can’t directly access elements inside the HubSpot iframe due to security restrictions. I’ve dealt with similar situations and found that the most reliable approach is implementing postMessage communication between the iframe and parent window. You’ll need HubSpot to modify their widget code to send postMessage events when those interactions occur, then set up GTM listeners on your parent page to catch these messages. Unfortunately, this isn’t something you can configure from GTM alone - it requires cooperation from HubSpot’s side. Alternatively, if you have access to HubSpot’s tracking tools, you might be able to use their native analytics features combined with their API to pull interaction data. Some users have had success using HubSpot’s workflow triggers to fire external webhooks when form events occur, which you can then process into your analytics setup.