How to Track Conversion Events in an iFrame

Are you wanting to track conversions to your iFrame form? Are you wanting to be able to track conversions for Facebook’s Like Box?

In this walkthrough, we’ll examine the issue with tracking conversion events when dealing with iFrames, and a work-around to get better insight into your actual conversion rate within your optin.

BEFORE YOU BEGIN: This feature is for Advanced Users. Due to the custom nature of a Custom HTML implementation, at this time we do not provide support for this feature.
NOTE:This guide presumes you have read the Custom HTML Conversion Tracking and Custom CSS guides, and you know how to locate the slug of your optin.

What is an iFrame?

“An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.” – TechTarget.com

Many websites like Facebook and YouTube use iFrames to allow users to quickly add content, applications, videos, and more, with essentially one line of code on the user’s website.

Due to the simplicity of copying and pasting just a line of code, some Email Service Providers also opt to let their users embed forms on their site only via iFrame embed code to reduce confusion or unintentional editting.

Why can’t Google Analytics track conversion events inside of an iFrame?

By default, it is not possible to track events that happen within an iFrame element if you don’t have direct control over the iFrame element’s content.

If you’re wondering, “Well, why can’t it work?” then think of Google Analytics (or any analytics) as Event Listeners — the analytics are waiting for events to happen and occur, then they record that event.

As an example, imagine your website is a house. Google Analytics is like a person standing in your house recording when people enter and leave, if they go into certain rooms in the house, etc.

This means if something is happening in a different house, then your person recording events in your house will never know about the events occurring in that different house.

In a similar way, Google Analytics and its event tracking cannot detect events occurring on another website and therefore cannot detect events that occur within an iFrame.

There is an exception to this, but it is pretty hard to implement. If you would like to read up on how to do it, Google has a guide available here (but you must be able to edit the iFrame’s source code too).

Currently, due to limitations of an iFrame, OptinMonster Analytics measures only Impressions (the optin showing up for the user) but not Conversions (as explained in the areas above).

Since we cannot track events within an iFrame (such as clicking, typing, etc.), then how can we track if a user signed up on your form that is added to your optin via iFrame?

The solution to this issue is to add an event to be tracked that is independent from but related to a user clicking on the form inside the iFrame.

A Solution to Capturing Conversion Events Occurring Within an iFrame

The solution to tracking conversions is to add a clickable HTML element that surrounds the iFrame. When clicked, this element will disappear and track a conversion. In this scenario, the conversion is actually a web visitor’s intention to complete the form, but is not the submission of the form itself.

The walkthrough below will show you how this can be achieved by adding a little HTML, CSS, and JavaScript.

Step 1 – Add the Required HTML Before Your iFrame

There are two things needed to be added before your iFrame.

  1. An HTML Tag That Will Overlay Your iFrame
  2. Text to Visitors About Needing to Double Click

Step 1a – An HTML Tag That Will Overlay Your iFrame
The first item to add is the HTML A Tag (aka, a “Link”) that will cover your element. It is important to note that this Overlay Link will show up before the iFrame. The iFrame will not be inside the OverLay Link.

To make it easy to target for CSS purposes later, you need to give the Overlay Link a unique ID. Something such as myIframeCover should be used.

In addition, the whole point of this guide is to track conversions. Therefore, you will need to add the class om-trigger-conversion to the Overlay Link so that a conversion event can be tracked when the link is clicked.

Your Overlay Link code will look something like this:

<a id="iframeCover" class="om-trigger-conversion"></a>

Step 1b – Text to Visitors About Needing to Double Click
Since the goal is to have the users first click on the Overlay Link to capture the conversion intent then to let the user fill in the form, it is strongly encouraged to give a brief note inside of a Paragraph HTML element to the user that they should double-click to help manage their expectations.

Once more, you need to add an ID to the paragraph, such as formInstructions. Something such as the following will suffice:

<p id="formInstructions">Double Click Below to Get Started</p>

At this point, you should see the following in your Custom HTML area:

<a id="iframeCover" class="om-trigger-conversion"></a>
<p id="formInstructions">Double Click Below to Get Started</p>
<iframe src="https://docs.google.com/forms/....etc" width="500" height="600" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

Custom-HTML-area-with-HTML-Added-Only-in-OptinMonster

Step 2 – Add the Required CSS in the Custom CSS Area

Next, there is CSS that is needing to be added to ensure that the Overlay Link initially covers the iFrame and that your instructions appear nicely.

Go to the OPTIN panel, scroll down to the Custom CSS text area. In the Custom CSS area, if you copied the IDs given above in the examples, then you can put some CSS such as the following:

The Required CSS for the Overlay Link

html div#om-YOUR-OPTIN's-SLUG #iframeCover {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
}

The Suggested CSS for your Instructions paragraph

html div#om-YOUR-OPTIN's-SLUG #formInstructions {
    text-align: center;
    font-weight: bold;
}

Therefore, your total CSS for the optin could appear as follows:

html div#om-YOUR-OPTIN's-SLUG #iframeCover {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
}

html div#om-YOUR-OPTIN's-SLUG #formInstructions {
    text-align: center;
    font-weight: bold;
}

Custom-CSS-area-with-CSS-Added-in-OptinMonster

Before you enable your optin to appear live on your site, be sure to complete the next step or nothing will happen when your visitors select the iFrame area.

Step 3 – Add the Required JavaScript to the end of the Custom HTML Area

Finally, the last remaining piece of the “tracking events in an iFrame” puzzle is the required JavaScript. If you have coded everything as per our examples above, including the same IDs of the HTML Elements, then the code used below will be using the JavaScript QuerySelector Method and an Add Event Listener Method, including some other basic JavaScript.

The Event Listener will look for a click occurring on your Overlay Link, and once that element is clicked, it will “hide” the Overlay Link, allowing the user to then click within the iFrame. Because the Overlay Link has the om-trigger-conversion class added to it, then that means your conversion event will fire when clicked.

Your JavaScript should look something like this:

<script type="text/javascript">
    var myIframeCover = document.querySelector('html div#om-YOUR-OPTINs-SLUG #iframeCover');
    myIframeCover.addEventListener("click", function() {
        myIframeCover.style.display = 'none';
    })
</script>

Therefore, if you are to look at everything in your Custom HTML area, it should look as follows:

<a id="iframeCover" class="om-trigger-conversion"></a>
<p id="formInstructions">Double Click Below to Get Started</p>
<iframe src="https://docs.google.com/forms/...etc" width="500" height="600" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

<script type="text/javascript">
    var myIframeCover = document.querySelector('html div#om-YOUR-OPTINs-SLUG #iframeCover');
    myIframeCover.addEventListener("click", function() {
        myIframeCover.style.display = 'none';
    })
</script>

Custom-HTML-area-with-HTML-and-JavaScript-Added-in-OptinMonster

Congratulations, you can now track conversion intent events on your iFrame form in OptinMonster.

hiding the iframe cover on click in OptinMonster


FAQs

Q: Why don’t my conversions in my Email Service Provider match OptinMonster’s Stats

A: There are 3 main reasons for this.

  1. The solution proposed in this guide can only track the web visitor’s initial click, but not the full submission event. Remember that you added the conversion event on the Overlay Link that initially covers the iFrame? That is the web visitor’s intent to fill out the form that OptinMonster tracks. However, OptinMonster cannot guarantee that the user finished filling out the iFrame and then submitted.However, compared to not having the ability to track any type of conversion event before this documentation, this at least provides a more realistic number of conversions compared to 0 being reported.
  2. OptinMonster cannot track unsubscribes occurring within your Email Service Provider. Because a user may sign up and then unsubscribe after the fact, thereby netting 0 for your overall conversions, OptinMonster only sees the initial intent to signup and cannot know that a web visitor later unsubscribed from your list.
  3. Your List Requires Double Opt-In. If your list requires double opt-in (confirmed opt-in), then OptinMonster cannot track if a user confirms their sign up to your list in their emails.

Q: Can this be used for tracking other clicks on iFrames, like a visitor clicking on my Facebook Like Box?

A: Yes. If you have already created the Facebook Like Box according it our Facebook Like Box guide, then you can follow this walkthrough above. Instead of the iFrame containing the Google Form as shown above, you will instead place the iFrame containing your Facebook Like Box.


Q: My iFrame Form doesn’t fit the optin. How can this be fixed?

A: You will likely need to adjust or specify height and width attributes in the iFrame element to resolve the issue.