Tracking HubSpot Pop-Up CTAs with Google Tag Manager

HubSpot's pop-up CTA forms introduced an anticipated feature for the users but created an annoying little problem - the iFrame. These forms show up within iFrame and thus, present significant challenges for tracking form submissions using third-party analytics tools like Google Tag Manager. We propose a practical solution to bypass the iFrame issue using a nice javascript that we load to the parent page and thereby enabling users to capture and track form submissions effectively.

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.

  • Red highlighted: Replace this with the URL of your parent page.
  • Blue highlighted: These are console log statements that you can comment out once testing is complete.
  • Orange highlighted: This is the event name you can customize if you want a different name to be sent to the dataLayer.
  window.addEventListener("message", function(event) {

    // Ensure the message is from the expected origin

    if (event.origin !== "") {

    // 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:",;

    // Check for the specific form submission event
    if ( && === "onCallToActionFormSubmitted") {
    console.log("Form submission data:",;

      // Push the form submission event to the GTM dataLayer
      window.dataLayer = window.dataLayer || [];
        event: 'hubspot_form_submitted',
        hsformId: || 'unknownForm', // This captures the Hubspot form ID
        formData: || {} // This sends any additional form data, if available
  }, false);

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.


    Leave a Reply