You’re a savvy digital marketer – competent in Google Tag Manager and a whiz in Google Analytics. And yet you find yourself scratching your head because you just can’t get your form submissions to record in either. After further investigation, you hear something about an iFrame, which is why you’re here. So how do you track form submissions in an iFrame?
What Is an iFrame?
An iFrame (or Inline Frame) is a method of imbedding HTML into your website. In other words, an iFrame is a place on your website where you receive code inserted and controlled by another source.
There are a variety of reasons why people use iFrames. Most often iFrames are used because they’re easy – sometimes companies don’t have a developer to build the functionality they need themselves or the developers they do have are focusing their energy on bigger tasks.
If you read up on iFrames, you’ll notice there’s a lot of bias against them. Some claim they’re bad for SEO, others say they’re less secure, still others say they’ll for sure break the functionality of your website. It’s true – adding in code from a completely different source does add in more complexity to your website, which increases the possibility to break elements. However, it’s important to remember that the code in your iFrame is only as good as the developer himself. A crappy developer can result in a crappy iFrame. A great developer can result in a great iFrame
How Can You Tell if Your Form Is in an iFrame?
For those of you who don’t like looking at code, this step may be a little daunting, but don’t worry – I’ll hold your hand the whole way! Start by right clicking on the page and clicking “view source.” Search for the term “iframe” (without quotation marks). The word “iframe” is literally how you mark up an iframe in the code. If you don’t see the word in your code, do a happy dance – you don’t have an iframe.
How Do You Track iFrame Forms in Google Analytics?
I never want to say tracking in an iFrame is impossible, but unless you’ve got a great developer for these next couple of steps, you may want to remove the iFrame altogether and start a new form from scratch.
The best method for tracking forms in an iFrame is to have your developer modify the CORS (Cross-Origin Resource Sharing). To understand CORS, you’ll have to understand the concept of the same origination policy – the idea that your website puppiesarecuddly.com only accepts requests from puppiesarecuddly.com, and not from bigbadwolfhackersite.com. Makes sense, right? You should only allow a website with the same origination to make the request. By modifying the CORS (remember – cross-origin resource sharing), you’re allowing other domains to access your resources. For example, if our iFrame referenced the website kittiesarecutetoo.com, we would modify the CORS to allow kittiesarecutetoo.com to allow resources from puppiesarecuddly.com.
Another way is to contact the owner of your iFrame code to see if he or she will allow you to put your Google Analytics code in the iFrame. If they agree, make sure you set up your Google Analytics account to allow for cross-domain tracking. Remember, the iFrame is technically from another source so it will most likely have another domain. Additionally, you’ll want to make sure you’re not firing double pageviews by having your Google Analytics code in the iFrame.
Summary
iFrames aren’t evil – but they do make tracking much more difficult, especially without a good developer by your side. Be prepared add your Google Analytics code into the iFrame, modify the CORS or get rid of the iFrame altogether for successful tracking your form submissions.