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 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.
To identify the specific postMessage
used by the iframe, I used Chrome’s Inspector tool. Here’s how I did it:
Ctrl+Shift+I
to open Chrome Developer Tools.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.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.
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:
postMessage
containing data.code = "success"
. We can leverage this message to trigger our custom event in GTM.<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.simplebooking_success
event, create a new trigger:simplebooking_success
After implementing the above steps, your GTM setup should look something like this:
postMessage
listener script.simplebooking_success
.simplebooking_success
event.simplebooking_success
event appears in the GTM Debug console.postMessage
event to ensure the script correctly pushes the event to the Data Layer.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.
Published: 7/2/2024