What is google tag manager, and conversion tracking?
Google Tag Manager (GTM) is a free tool from Google that allows you to manage and deploy marketing and analytics tags (snippets of code) on your website without having to edit the website’s code. This makes it easier and faster to add tracking and marketing tools to your website.
Conversion tracking, on the other hand, is a method used to track user actions on your website that you consider to be valuable, such as purchases, form submissions, or sign-ups. By setting up conversion tracking, you can see how many users are taking these valuable actions on your website and identify areas for improvement in your marketing efforts.
By using Google Tag Manager, you can easily set up and manage conversion tracking tags on your website, without having to manually edit the website’s code every time you want to track a new conversion event. This makes it more efficient and effective to monitor the success of your marketing campaigns and optimize your website for better conversion rates.
What are iframes?
An iframe is an HTML element that allows you to embed another HTML document within the current document. It is essentially a container or a window that displays content from a different source, such as a web page or media file, while still being able to interact with the main document.
When you use an iframe, the content that is displayed within the iframe is loaded independently of the main page, which means that it can come from a different domain or server. This makes iframes a useful tool for integrating third-party content into your website, such as embedded contact forms, videos, maps, social media feeds, or other web applications.
How does this work?
The iframe HTML includes the source website and the dimensions of the iframe, plus any additional style or functionality code.
For example, an iframe could be written like this:
<iframe src="https://example.com/" height="300px" width="900px"></iframe>The Problem with Tracking Iframes
The iframe contains another website, so unless you are the owner of the website in your iframe, you won’t be able to do any tracking at all. Sad times.
If you want to track an iframe, make sure that you will have developer access to the website inside your iframe. If you already have Google Tag Manager installed, then even better.
Note: To reiterate, you need developer access to the iframe in question. This means the source website’s code, not the iframe HTML on your website. 80% of the cases I see where people are struggling with tracking iframes are simply not possible. Without access to the iframe in question, you cannot install any tracking code.
Inspecting Iframes for Tracking
Not sure if your page element is an iframe? You can do a simple check on the front-end of your website.
To inspect a page element, right-click (or control-click for Mac) wherever you suspect there’s an iframe. If you see the option View Frame Source, then the element is an iframe.
If you click View Frame Source, you’ll see the HTML code for the source website (the child frame), which will look different from the code for the web page you’re on (the parent frame).
How to Push Data From Your Iframe to Your Parent Frame
You can track iframe interactions by sending a Javascript call called postMessage from the iframe to the parent frame. The parent frame listens to the call with Google Tag Manager, then forwards it to your marketing tools.
If that sounds complicated, I promise it’s not. Here’s an overview of how that works in more detail.
Install GTM on Your Child Iframe
Even if you already have GTM installed on the website that contains the iframe, it won’t be able to pick up any user interactions that occur inside the iframe.
So if you want to track any form submissions, button clicks, or element visibility in your iframe, you need to also install GTM onto your child frame.
The important part here is that you should create a new Google Tag Manager account to associate with your child frame.
This doesn’t mean you need a separate Google login, but you’ll want a GTM account and container that are specific to your child frame. Your parent frame should have its own account and container.
Inspect Your Iframe Elements
Next, you’ll have to decide which user actions you want to track inside your iframe.
Remember how we checked our iframe code earlier? Here’s where this comes in handy. Right-click on your iframe and select View Frame Source.
Here, you’ll be able to find any identifying information about the element you want to track. In this example, the iframe contains a form, it contains a loader when a user successfully completes the form. We are going to trigger the loader using the CSS element visibility trigger.
After you submit the form successfully, right-click on the loader and open the Inspect Element.
You will then see the browser’s developer tools that contain various information about the loader: its content, CSS class, etc.
In the example below I see that the message has a class “thankyou” which could be used as a condition in the Element Visibility trigger.
What do you enter into the CSS selector field? This is something we can test in our JavaScript console. To access the console, select the Console header in your developer tool. In the command field at the bottom of the console, type document.querySelectorAll followed by parentheses around a pair of double quotes.
Between the quotes, you can enter any CSS selector and try this all out. Now, in this case, we had a div node, so we can look for the CSS by typing “div.contact-msg1” in the quotes.
Therefore, the whole text in the command field should read document.querySelectorAll(‘div.thankyou’).
So now you have confirmed that this is the right CSS selector to enter into the Google Tag Manager trigger configuration. Copy the whole node div.thankyou.
The trigger configuration has a few options for trigger frequency. In the case of this particular form, users cannot fill it out and submit it multiple times without navigating away from the form page. Because of this, you should select the option “Once per page“.
If multiple elements on a given page are matched by the ID or CSS Selector, this trigger will only fire the first time one of them is visible on that page.
Once you’ve found an identifier that will help you track this element (without tracking incorrect elements), copy it. We’ll need it in order to build a Tag trigger.
Create a Trigger for Your Iframe Element
In your child frame’s GTM account, you’ll build a new trigger using the element identifier you just found.
The type of trigger you use will depend on what you want to track. Select the trigger type that best fits your iframe element.
There are other type-specific options that you’ll have to decide on, but the important part here is to make sure that the trigger fires when your variable matches the element selector.
Visibility
The visibility field asks how much of the element needs to be visible for the trigger to fire. If it’s at the edge of the screen, it’s not visible to the user, but you still want to trigger the tag. 50% is fine in that case.
Observe DOM Changes
You’ll also need to select the Observe DOM changes option. A little warning box will appear because it can slightly affect site performance, but realistically, it shouldn’t affect too much of the page load time.
Trigger on All Elements
For the last option, select the All Visibility Events button.
Send Child Frame Data to Parent Frame
The next step is to connect this trigger to a Tag.
However, we don’t want to send it directly to Google Analytics or other tools.
Why? Because the interaction would be tracked as coming from the frame’s source website—not from our webpage with the iframe.
If you use your new trigger to send data directly to your tracking tool, you won’t be able to differentiate users who converted on embedded iframe versus the original source website.
This is important for tracking a user’s path to converting. For marketing purposes, it should matter to you where your user was in your funnel when they converted.
And that’s why we’re going to send the data to our parent frame with the help of Google Tag Manager.
In order to do this, we need a special sender Tag for our postMessage that forwards tracking data to the parent frame.
<script>
try {
var postObject = JSON.stringify({
event: 'iframeFormSubmit',
form: 'Lead Form Submission'
});
parent.postMessage(postObject, 'https://brandedbillscustom.com/');
} catch(e) {
window.console && window.console.log(e);
}
</script>Basically, this script consists of a Data Layer push for any key-value pairs that you want to track. If you’re comfortable with HTML, you can customize this as much as you like.
Build a Listener in the Parent GTM Account
So now our iframe will send tracking data to the parent frame, but that data is totally lost on the internet ether if the parent frame doesn’t know to listen for that data.
This leads us to our next step: building a listener tag in your parent frame’s GTM account.
The idea here is that a Tag on your parent frame (host website) fires a Tag in conjunction with the iframe’s Tag.
The parent frame’s Tag basically just listens for the iframe’s Tag, extracts the information in the postMessage, and pushes that information to the Data Layer.
<script type="text/javascript">
(function(window) {
addEvent(window, 'message', function(message) {
try{
var data = JSON.parse(message.data);
var dataLayer = window.dataLayer || (window.dataLayer = []);
if (data.event) {
dataLayer.push({
'event': data.event,
'postMessageData': data
});
}
}catch(e){}
});
// Cross-browser event listener
function addEvent(el, evt, fn) {
if (el.addEventListener) {
el.addEventListener(evt, fn);
} else if (el.attachEvent) {
el.attachEvent('on' + evt, function(evt) {
fn.call(el, evt);
});
} else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
el['on' + evt] = function(evt) {
fn.call(el, evt);
};
}
}
})(window);
</script>As for the trigger, you’ll typically choose a Page View just for the page with this iframe. It’s less script for irrelevant pages to load, and it cleans up your tracking data.
Send Iframe Data to Google Analytics
Now that everything you want to track is available in the Data Layer of your parent frame, you can send your iframe data to tools like Google Analytics.
In the parent GTM container, you can create an event Tag that identifies the user action in the iframe using whatever parameters best suit your tracking setup.
Make sure that any new variables that you create for your parameters match the variables in your Data Layer with correct dot notation.
You will also need a new custom event trigger that fires when the event name for your iframe element appears in the Data Layer.
This is how we can send data from an inner iframe to the parent frame, then send this data over to our marketing tools like Google Analytics.
Congrats! Once this is deployed, you should be able to successfully track conversions through iframes with Google Tag Manager.