Implementing a Custom Google Tag Manager Trigger for Form Submission Tracking within an iFrame

In the dynamic world of digital marketing, tracking user interactions on websites is crucial for analyzing performance and optimizing strategies. Recently, I faced an interesting challenge: a client needed to track the form submissions occurring within an iframe on a third-party website to which they had no direct access. This post details the steps I took to solve this problem using Google Tag Manager (GTM).

The Challenge

The client attempted to use the standard “Element Visibility” trigger in GTM. However, this approach failed because it could not detect elements within the iframe. After some investigation, I discovered that the form submission within the iframe sent a specific postMessage with data.code = "success" upon successful form submission. This provided the necessary hook for our tracking solution.

Discovering the PostMessage

To identify the specific postMessage used by the iframe, I used Chrome’s Inspector tool. Here’s how I did it:

1. Open Chrome Inspector: Right-click on the page and select “Inspect” or press Ctrl+Shift+I to open Chrome Developer Tools.
2. Access the Console: Navigate to the “Console” tab within Developer Tools.
3. Add an Event Listener: To capture all postMessage events, I added the following script in the console: window.addEventListener('message', console.log); This script logs all incoming postMessage events to the console.
4. Submit the Form: I then interacted with the form within the iframe and observed the console to identify the postMessage containing data.code = "success".

Using this method, I discovered that the form submission sent a postMessage with the key information needed to create a custom event in GTM.

The Solution

To capture the form submission event, I implemented a custom HTML tag in GTM that listens for the specific postMessage from the iframe. Here is the step-by-step process:

1. Identify the PostMessage: Upon form submission, the iframe sends a postMessage containing data.code = "success". We can leverage this message to trigger our custom event in GTM.
2. Create a Custom HTML Tag: Add a new tag in GTM of type “Custom HTML” with the following script: <script> window.addEventListener('message', function(event) { if (event.origin === "https://converto.simplebooking.it" && event.data.code === "success") { window.dataLayer.push({ "event": "simplebooking_success" }); } }); </script> This script listens for postMessage events. When it detects a message from the specific origin https://converto.simplebooking.it with data.code equal to “success”, it pushes a custom event (simplebooking_success) to the Data Layer.
3. Configure the Custom HTML Tag:
   • Trigger: Set the trigger to “All Pages” so that the script runs on every page where the iframe might be loaded.
   • Tag Firing Priority: Ensure this tag fires before any related conversion tags to capture the event accurately.
4. Create a Custom Event Trigger: To react to the simplebooking_success event, create a new trigger:
   • Trigger Type: Custom Event
   • Event Name: simplebooking_success
   • This trigger fires on: All Custom Events
5. Link Conversion Tags: With the custom event trigger in place, you can now link your conversion tags (e.g., for Facebook and Google) to this trigger. This setup ensures that the conversion tags fire when the form submission event is detected.

Final Setup

After implementing the above steps, your GTM setup should look something like this:

• Custom HTML Tag: Contains the postMessage listener script.
• Custom Event Trigger: Named simplebooking_success.
• Conversion Tags: Configured to fire on the simplebooking_success event.

Testing and Verification

1. Preview Mode: Use GTM’s Preview mode to test the implementation. Submit the form within the iframe and check if the simplebooking_success event appears in the GTM Debug console.
2. Browser Console: Open the browser console and manually trigger the postMessage event to ensure the script correctly pushes the event to the Data Layer.
3. Verify Tag Firing: Ensure that the conversion tags fire as expected when the simplebooking_success event is detected.

By following these steps, you can successfully track form submissions within an iframe using Google Tag Manager, even when you do not have direct access to the iframe’s content. This approach ensures that you can capture valuable conversion data and optimize your marketing efforts effectively.