[Guide] How to get conversion events from JotForm Iframe forms and push them to analytics

Ramp Up:

In modern web development, cross-window communication is a powerful technique used to exchange data between different windows or iframes within a web page. This technique becomes especially useful when embedding external content, such as forms, into your website using iframes. One common scenario involves capturing a post message from an embedded iframe and then pushing that information to Google Analytics for tracking purposes. In this blog post, we'll walk you through the process of achieving this using a step-by-step approach.

Step 1: Understanding Post Messages

Post messages are a part of the Web Messaging API that allows secure communication between different browsing contexts (windows or iframes) from the same origin or across different origins. This technique is often used to pass data or instructions between different parts of a web page.

Step 2: Sending a Post Message

In your embedded iframe, such as a JotForm, you can send a post message when a specific action occurs. For instance, after a user successfully submits a form, send a post message like this:

window.parent.postMessage({ action: 'submission-completed', formID: '213215413867050' }, '*');

Step 3: Receiving Post Messages in Parent Window

In the parent window where the iframe is embedded, set up an event listener to capture the post message:

‍

window.addEventListener('message', function(event) {  // Check if the event data matches the expected format  if (event.data && event.data.action === 'submission-completed' && event.data.formID === '213215413867050') {    // Perform actions in response to the submission-completed event    console.log('Submission completed for form with ID:', event.data.formID);    // Push a data layer event for form submission    dataLayer.push({      'event': 'form_submit_completed',      'formID': event.data.formID,      'timestamp': new Date().toISOString()      // Add more data as needed    });  } });

‍

We use a Custom HTML Block to get the data, once we have it we can create a custom event and create a trigger using that event to push the data anywhere, pixels, GA4, Facebook etc.

Step 4: Pushing to Google Analytics

The crucial step is pushing the captured event to Google Analytics. In the example above, we use the ga function (Google Analytics's tracking code) to send a custom event named 'Form' with the category 'Submission' and a label 'JotForm in Iframe'. You can customize these parameters based on your tracking needs.

Benefits of This Technique:

1. Accurate Tracking: By capturing post messages, you can accurately track user interactions within iframes, even if the content is hosted externally.
2. Centralized Analytics: This technique enables you to centralize all your website's analytics tracking, including interactions with embedded content.
3. Custom Insights: Pushing custom events to Google Analytics allows you to gain insights into user behavior beyond standard pageviews and clicks.

Conclusion:

The ability to capture post messages and push them to Google Analytics offers a valuable way to track user interactions within embedded iframes. By combining the power of post messages and Google Analytics, you can gain a deeper understanding of how users engage with external content on your website. This approach ensures you're equipped with accurate data to make informed decisions and optimize user experiences.

‍