Catching GTM with Iframe Activities

Learn how to track form interactions across domains using iframe postMessage instead of cookies for seamless cross-domain analytics.

Ceyhun Enki Aksan Entrepreneur, Maker

Sep 14, 2025

A few days ago, I published an article on Typeform, discussing how to handle user session persistence across multiple domains (cross-domain). In that context, I explained what can be done.

I will now expand on this article with another form service named Paperform, in response to an integration requirement¹. Additionally, I will examine an example where we track an action occurring inside an iframe. For this purpose, instead of using cookie, we will use window.postMessage. In summary, I will connect the two articles I’ve published to a real-world scenario.

Paperform

Paperform is a form service that allows you to create online forms and product pages (either using pre-built templates or by creating them yourself). It treats the form creation process as if you were creating a document. You can add images, videos, and custom text content within the form. It also provides features such as reports, notifications, submission triggers, and post-submission actions related to the forms you’ve created¹. Paperform offers the ability to use created forms via URL and embed options. Additionally, through the Configure > Analytics section, you can enter Google Analytics and Facebook Pixel IDs to link them to specific pages. Furthermore, there are two additional text fields available. You can define custom script code that runs when the page loads (via Page load scripts) or when the form is successfully submitted (via Successful submission scripts).

Google Analytics uses the analytics.js library. Therefore, if you’re defining parameters through other areas, you should use the ga() function. Three actions are triggered during form filling, submission, and confirmation.

SubmittedForm
: Triggered when the form is successfully submitted.

StartedCheckout
: Triggers when the payment process is initiated.

StartedSubmission
: Triggers when the user begins filling out the form.

All actions have a category definition of Paperform:ID, where ID is replaced by the form’s actual ID value. The event title corresponds to the form’s title. Below you can see example event definitions sent from a specific form.

Event Category: Paperform:hgib4uqn
Event Label:    Test
Event:          SubmittedForm

If you’re proceeding with direct GA integration, you can set up your goals based on the information provided above.

If you’d like to add the Google Tag Manager code via the Page load scripts, please keep in mind that the code might not function stably. No push operations to any dataLayer are performed for GTM.

I recommend directly sharing the form’s URL (e.g. https://hgib4uqn.paperform.co/) for Google Analytics², Facebook Pixel³, and GTM⁴ code installations. If you’re embedding the form into a page, both your page and the embedded form will have the code running again. Below, I’ll discuss the topic of embedded forms, so no additional ID or code additions will be made for these forms.

The embed code sent with the form resembles the following:

<div data-paperform-id="hgib4uqn"></div>
<script>
(function() {
  var script = document.createElement('script');
      script.src = "https://paperform.co/__embed";
      document.body.appendChild(script);
})()
</script>

The data-paperform-id value specified within the code is the form ID. When the relevant script code runs, it is rendered as follows.

<div data-paperform-id="hgib4uqn">
  <iframe frameborder="0" width="100%" allowpaymentrequest="" allow="geolocation *;camera *;microphone *;" title="Embedded form" style="min-height: 200px;" src="https://paperform.co/form/hgib4uqn?embed=1&amp;takeover=0&amp;inline=1&amp;popup=0&amp;_d=<alan-adi>&amp;_in=1&amp;_embed_id=1" height="554"></iframe>
</div>

The hgib4uqn value inside the _src is the form ID, while the _d value captures the domain name where the form is rendered; for example, ceaksan.com.

window.postMessage

As explained in the previous article with examples, window.postMessage enables message passing between window objects. In the examples, we previously demonstrated one-way messaging via popup and two-way messaging via iframe. In this context, we will implement one-way messaging from the iframe to the parent page.

Let’s assume the name of our container (parent) page is landing.htm. We will use the above embed code within this page. First, when the form is submitted, we will send a message to the page that contains the iframe (the parent page).

In the Successful submission scripts section under the Analytics page of Paperform, you can paste the following code:

<script>
  window.parent.postMessage({
    message: 'triggered'
  }, '<parent-page-hostname>');
</script>

The value of <parent-page-hostname> should be the domain where the form is embedded. For example, if the form is embedded on the https://ceaksan.com/lp/ page, you should enter https://ceaksan.com as the value. This ensures that the data is correctly delivered to the intended destination. Now let’s move on to the content of the parent page.

    <script>
      window.addEventListener('message', function(event) {
        console.log(event.origin);
        console.log(event.data.message);
        if(event.origin === 'https://<form-id>.paperform.co' && event.data.message == 'triggered') {
          window.dataLayer.push({
            'event': 'SubmittedForm'
          });
        }
      }, false);
    </script>

    <div data-paperform-id="<form-id>"></div>
    <script>
      (function() {
        var script = document.createElement('script');
          script.src = "https://paperform.co/__embed";
          document.body.appendChild(script);
      })();
    </script>

As can be seen, we initially listen for the message content using addEventListener. If our code is loaded after the iframe, we might miss the message content. We need to replace the <form-id> placeholders with the actual form ID value we created, for example hgib4uqn.

If the message we capture via addEventListener originates from https://<form-id>.paperform.co and matches the content triggered, we trigger the action I specified. I used dataLayer.push(). If you’d like, you can adapt this process for GA instead of GTM, or for any other specific integration.

With GTM, once the SubmittedForm event is triggered, you can specify what action should occur (e.g., GA event, ad conversion, etc.) and it will be executed accordingly.

A note of caution: if we don’t properly configure cross-domain operations (using cookies or another method), we’ll be unable to track sessions coming through ad campaigns or other redirects. This results in incomplete or inaccurate session tracking, increased bounce rates, and higher page view counts. Therefore, prioritizing integrations provided by the tools will be a more accurate and effective approach.

So, what if we don’t have access to the parent page? How can we proceed in such a case? In this scenario, we’ll have access to only the GTM container, and thus we’ll have to configure our setup entirely within GTM⁵.

Tracking iFrame Content from GTM

GTM also provides us with the Custom HTML (tag type) to run script code within the container.

Within the GTM container, in addition to the dataLayer.push method, we can also process direct GA activities. Let’s continue with the dataLayer and insert the following JavaScript code inside the Custom HTML tag. Essentially, this is the same code as in the previous example, with only basic error checks added⁶ ⁷.

<script>
(function(){
  try {
    if(typeof window.addEventListener !== 'undefined') {
      window.addEventListener('message', function(e) {
        if(event.origin === 'https://<form-id>.paperform.co' && event.data.message == 'runned') {
          window.dataLayer.push({
            'event' :'paperForm'
          });
        }
      });
    }
  } catch(err){ console.log(err); }
})();
</script>

Again, the runned event will be sent via push. This way, we can ensure that other tags are triggered based on this event. Of course, instead of simple event definitions, we can also pass more comprehensive objects in this manner and perform operations accordingly⁸.

Member Zone

Catching GTM with Iframe Activities

Paperform

window.postMessage

Tracking iFrame Content from GTM

Footnotes