The Tracking Issue is because of iFrame
HubSpot’s pop-up CTA forms pose a knotty problem: they load within iFrames. If you are, however, using custom HTML pop-up this may not be an issue.
This design choice, probably aimed at isolating styles, inadvertently prevents third-party tracking tools from capturing form submissions and clicks. Users have reported difficulties in tracking these events, which hampers their ability to gather critical data for analysis and optimization. There are multiple threads in the HubSpot community discussing this issue, and there’s a submitted idea to allow tracking scripts that is open for voting. If you’d like to see this change implemented, we encourage you to upvote the idea. Read on for the solution.
A Workaround
To overcome the challenges posed by iFrames, our method leverages the postMessage API to facilitate communication between the iFrame and the parent page. By setting up an event listener on the parent page, we can intercept messages sent from the iFrame upon form submission. This approach allows us to capture the necessary data and push it to the GTM dataLayer without modifying the iFrame’s code.
Implementation for Tracking Hubspot CTA Pop-ups through Google Tag Manager
Setting Up the Event Listener
As mentioned above we are going to use GTM dataLayer in this implementation. To push form submission event, we first add an event listener to the parent page. This listener will capture messages from the iFrame and extract the form submission data.
In our tests, the only form data we could capture was the Hubspot Form ID and the event ID.
Here is the script you can place in the <head> section of your parent page by going to your landing page Settings > Advanced
1. Paste this script
Paste this script into the Head HTML section, just before your Google Tag Manager code. Pay attention to the highlighted parts of the code and the commented sections.
<script>
window.addEventListener("message", function(event) {
// Ensure the message is from the expected origin
if (event.origin !== "https://parent.yourwebsite.com") {
return;
}
// Log the received message for debugging purposes
console.log("Message received from iFrame:", event);
// Log the entire event data object to understand its structure
console.log("Event data object:", event.data);
// Check for the specific form submission event
if (event.data && event.data.eventName === "onCallToActionFormSubmitted") {
console.log("Form submission data:", event.data.data);
// Push the form submission event to the GTM dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'hubspot_form_submitted',
hsformId: event.data.data.id || 'unknownForm', // This captures the Hubspot form ID
formData: event.data.data || {} // This sends any additional form data, if available
});
}
}, false);
</script>
Once your form data values are in DataLayer, you are able to use them in your desirable implementation!
The problem with Hubspot CTA Pop-Up forms is that even if you have Hubspot integration with third party tracking tools, the data doesn’t get sent. A standard approach is to integrate Hubspot forms with Google Analytics 4 but this also does not work with Pop-up forms, making it a very challenging situation.
By using the postMessage API along with a smart JavaScript solution, you can easily get around the iFrame challenge with HubSpot’s new pop-up CTA forms. It is not very difficult to implement and while the script shared above will help you fire your conversion pixels and/or your GA4 events, with a little bit of further coding experience you can really manipulate the dataLayer.
If you need any help with implementing this solution, feel free to get in touch with us! We’re here to help you make the most out of your marketing efforts. If something isn’t working, please write in the comments!
If you use Hubspot and work with marketing reports, give our Hubspot traffic attribution tool a try – it helps you set up your UTM parameters from the get-go.
0 Comments