Get in touch with our team

22.09.2014

8 min read

Infusionsoft and Google Analytics cross-domain iFrame goal and event tracking

This article was updated on: 07.02.2022

Cross domain tracking isn’t easy at the best of times, and for an Infusionsoft implementation, where you are wanting to track events or goal completions on infusionsoft.com, there are a few undocumented issues worth discussing.

This blog isn’t for the feint-hearted, nor does it include information (just yet) on ecommerce tracking. There are a number of speciality plugins for that purpose exactly – what we’re doing here is showing you how to track goal completions on infusionsoft.com for free, without a plugin.


The team at Infusionsoft are very keen for you to embed their tracking script within your website so that your visitor data is accessible through their platform, but for marketers who need a full 360° view of overall marketing activity in one place, Google Analytics is a good choice and a likely candidate for most.

To set the scene, and outline the problem I’m solving in this post; a client of ours uses Infusionsoft for their inbound marketing automation, and WordPress as a content management platform to run their website.

They were looking to implement a paid media campaign through Google AdWords, but to track and monitor the campaign’s viability; we wanted to introduce a feedback loop into Google Analytics in the form of goal completions. From Analytics, we would then also import those goal completions into AdWords to aide with the on-going optimisation and reporting.

In addition, the form needed to be dynamic, so we had committed to using the Infusionsoft JavaScript form approach, which loads in an iFrame dynamically on the page load. This means that our client didn’t have to keep updating the HTML code on the website, which keeps everything simple and easy to do. Any changes to the form code on Infusionsoft are reflected through the iFrame loaded in through JavaScript with no effort at all.

Herein lies the issue. JavaScript, iFrame’s and cross-domain tracking do not mix well, but luckily for us developers, Google have provided a code snippet that loads an iFrame for you with the cross-domain tracking data already appended.

This helps us with our end goal, as we are now able to pass campaign data through to the conversion page (which is the most important thing here – tracking the return on investment), but it means that instead of a nice, friendly code snippet from Infusionsoft, we’re now dealing with a chunk of Google Analytics code with an Infusionsoft landing page URL pasted in the middle of it.

See what I mean by looking at this:

<script type="text/javascript" src="https://ab123.infusionsoft.com/app/form/iframe/123456789123456789"></script>

This is the original Infusionsoft JavaScript code, which we were just able to insert easily into the WordPress editor window (in text view)

Our new tracking code appropriate for Google Analytics and Infusionsoft cross-domain tracking:

<div id="myIFrame"></div>

This code acts as an anchor for the JavaScript below

<script type="text/javascript">

var linker;

function addiFrame(divId, url, opt_hash) {

return function(tracker) {

window.linker = window.linker || new window.gaplugins.Linker(tracker);

var iFrame = document.createElement('iFrame');

iFrame.src = window.linker.decorate(url, opt_hash);

document.getElementById(divId).appendChild(iFrame);

};

}

ga(addiFrame('myIFrame', 'https://ab123.infusionsoft.com/app/form/friendly-landing-page-url'));

</script>

The JavaScript – in two parts – defines Google Analytics’ cross-domain tracker, and then calls the specific landing page URL for inclusion

<style>

#myIFrame {

width:100%;

height:430px;

border:0;

display:inline-block;

}

#myIFrame>iframe{

display:inline-block;

width:100%;

height:100%;

border:none;

}

</style>

This CSS assists in the setup of the iFrame and the <div> wrapper around it. Without an unknown height, we’re accounting for 430 pixels, though it would be best practise to calculate this and resize dynamically – more on this later.


Where should this code go?

Of this code, only a couple of lines will actually replace the Infusionsoft code – the rest is global, and should be placed within your theme’s global JavaScript and CSS files.

<div id="myIFrame"></div>

<script> ga(addiFrame('myIFrame', 'https://ab123.infusionsoft.com/app/form/friendly-landing-page-url'));</script>

This is what a call might look like – the other code should go elsewhere


Configuring Google Analytics for cross-domain tracking

By default, Google Analytics doesn’t handle cross-domain tracking well at all – your reports would be full of referral traffic between the domains. The team at Google have created a set of features within Google Analytics, which makes this tracking possible, but it does need some configuration:

1. Configure Google Analytics to include the full page URL, not just the URL path

This ensures that similar page URLs across different domains are tracked individually, and gives clarity to all reporting. This can be completed either in an existing View in Analytics, or a new View can be set up to record this data in the new format. Whichever route you take, be sure to keep the old data one way or the other for historic performance reporting.

This is completed by a custom filter, which is accessible from the Analytics menu from browsing to: Admin > Filters (under view) > + New Filter

The settings you need to fill out here are;

Filter Type: Custom filter > Advanced

Field A: Hostname

Extract A: (.*)

Field B: Request URI

Extract B: (.*)

Output To: Request URI

Constructor: $A1$B1

Note that this is also documented on a Google help page, here.  

2. Reconfigure all page URL-based Goal rules

Changing the URL format will likely invalidate some destination page Goal URLs. Be sure to correct these to now include the full URL (no protocol i.e. http), so for Impression, a valid conversion page might look like www.impressiondigital.com/thanks, where is could have previously been /thanks

Google Analytics Goals

3. Set up new goals for Infusionsoft /success/ pages

All Infusionsoft success page URLs follow a predictable format. They include your app domain name to begin, followed by a unique ID. To set this up, under Admin in the menu, navigate to Goals and create a new Custom Goal. The condition we are looking to meet is the destination page matches a regular expression, which will be the following:

^ab123.infusionsoft.com/app/form/success.*

Don’t forget to change the ab123 for your app domain – you can see this in your Infusionsoft login URL

4. Limit self-referrers

Within Google Analytics Admin section, under ‘Tracking Info’, we also have the ability to limit self-referring URLs. This means that traffic from these sites (the other’s we’re tracking) will not show up as referral traffic within Google Analytics.

From this page, just click ‘Add Referral Exclusion’ and enter the URL(s) that you are tracking cross-domain. In our example case, you would want to enter your root domain and the app domain of Infusionsoft into this – i.e. domain.com and ab123.infusionsoft.com

5. BONUS point (tbc)

Something we haven’t yet got round to writing up, but something that would be very beneficial would be to use custom advanced filters to filter out unique IDs from the success page URL. This will tidy up Analytics goal URLs and general page-level reporting. More on this when we can update the article, unless someone in the comments has a neat way of accomplishing this already.


Configuring your website for Infusionsoft and Google Analytics cross domain tracking

To have this solution working correctly, there are a few small code edits required on your website.

1. Use Universal Analytics

Google Universal Analytics (the analytics.js tracking code) is Google’s latest take on website and app analytics. The Universal upgrade is required for this solution to work correctly. If you do not already have Universal Analytics then it should be implemented as soon as possible. (Note that we’ve included a few extra Universal plugins too, which come in handy for various digital marketing activities, so get collecting early!).

<script type="text/javascript">

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-12345678-1', 'auto', {'allowLinker': true});

ga('require', 'displayfeatures');

ga('require', 'linkid', 'linkid.js');

ga('require', 'linker'); 

ga('linker:autoLink', [‘domain.com, ab123.infusionsoft.com'], false, true );

ga('send', 'pageview');

</script>

Note the linker and linker:autoLink lines in there, plus the allowLinker addition into the ‘create’ call

2. Include Google Universal Analytics iFrame code, from above

As mentioned at the beginning of this article, some additional code will need to be placed in the website’s code.

3. Verify your setup

Through Google Chrome, or a browser with an Inspector, inspect the iFrame element that’s placed on the website. If the URL includes the _ga attribute, then this has worked correctly. I.e.

https://ab123.infusionsoft.com/app/form/search-friendly-url?_ga=1.8345679.198192456469.14145650309

Configuring Infusionsoft for goal tracking

The final step in this tutorial is to insert Google Analytics tracking code into the Infusionsoft pages so that form successes can be monitored.

1. Insert hidden HTML blocks onto each of the Infusionsoft pages (form and thank you page).

Within each of these, insert the following code:

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-12345678-1', 'auto', {'allowLinker': true});

ga('require', 'linker');

ga('linker:autoLink', ['domain.com, ab123.infusionsoft.com'], false, true );

ga('send', 'pageview');

</script>

N.B. We are not yet sure whether we need to include the send call on the form page, as this will double count page visits…

2. [Bonus tip]: Give your Infusionsoft pages a sensible custom URL

This will make your reports a little easier to digest!


Summary

And that’s it! Tracking Infusionsoft in Analytics isn’t actually that different from tracking any third party CRM – the principles of cross-domain tracking and full-URL goal tracking can be directly translated to many systems.

If you have a question, please leave it in the comments below, or if you think we can help with SEO or PPC, please get in touch with us for assistance.

Further reading

Something else that we have yet to complete is dynamically resizing iFrames based on their content height – this means your users won’t be faced with vertical scrollbars where they’re not necessary. I’d suggest this page as a starting point: http://stackoverflow.com/questions/18765920/resize-iframe-height-according-to-content-height