Kissmetrics and iframes

Analytics platforms have trouble with iframes

Browser-based analytics tracking uses javascript to track what happens on web pages. This can cause issues when you use iframes. Iframes are more than just another element on your web page; they are essentially a completely different page contained within the page, and as such, javascript outside the iframe cannot be accessed inside the iframe, and vice versa.

If you use iframes you may be able to use analytics, you will just have to make sure you are careful to implement correctly.

If you can run code inside the iframe

If you can run code inside an iframe and the iframe is on the same domain as the parent site then you will be able to run Kissmetrics without much trouble. You will just need to make sure that you add a copy of the Kissmetrics snippet to the iframe, as well as the parent site.

If Kissmetrics is running both inside the iframe and outside the iframe, your tracking should work fine. You may have trouble limiting events to specific URLs so I recommend implement tracking inside the iframe with the JavaScript API calls, or make sure the elements you are tracking are unique.

If you have no access to add code to the iframe

There are a number of reasons you may want to embed an iframe from a third party application. In many cases it is a form builder or some other tool. If you are able to add the Kissmetrics snippet inside the iframe then you may be able to track inside the iframe. However, if we are not able to add the code to the iframe, there will be no way to track the contents of the iframe.

If you can run code in the iframe and it’s is on a different domain

If you are able to add code to the iframe, and the iframe is hosted on a different domain you will be able to track inside the iframe, but you have to follow these directions to make sure that it works properly. The issue is that different domains have different sets of identity cookies, so a Kissmetrics user on one domain is a different user than a Kissmetrics user on a second domain, even if they are recorded in the same product.

We will need to bridge the gap between the parent site (on your domain) and the iframe (on the second domain), as well as the two different domains. To do this we will need to setup Javascript on the Parent Page and inside the iframe to pass the ID into the iframe via a POST request. The iframe will need Javascript setup to wait and receive the ID from the post request. The parent page will submit a POST request containing the Kissmetrics ID to the iframe.

This code should be run on the parent page:

<script>
//This goes on the main site, aka outside the iframe. Sends the anonymous ID to the iframe.
function sendKMID() {
  var win = document.getElementById("iframeID").contentWindow;
  win.postMessage(
      "KMID:"+KM.i(),
      "*"
  )
  return false
}
_kmq.push(sendKMID);
</script>

This code should be run in the iframe:

<script type="text/javascript">
//Set up the tracking snippet to allow us to alias the ID.
//***If your Kissmetrics snippet is already present in the iframe, you can delete
//everything between this line and the next starred comment.***
var KM_SKIP_VISITED_SITE=1;  // Prevent recording Visited Site in the iframe
var _kmq = _kmq || [];
var _kmk = _kmk || 'API KEY'; //Be sure to enter your API key here
function _kms(u){
  setTimeout(function(){
    var d = document, f = d.getElementsByTagName('script')[0],
    s = d.createElement('script');
    s.type = 'text/javascript'; s.async = true; s.src = u;
    f.parentNode.insertBefore(s, f);
  }, 1);
}
_kms('//i.kissmetrics.io/i.js');
_kms('//scripts.kissmetrics.io/' + _kmk + '.2.js');
//***If snippet is present already, delete down to here***
//This event listener aliases the anonymous ID to the main site's ID
function listener(event){
    eventsplit = event.data.split(":");
    if (eventsplit[0] == "KMID"){
        _kmq.push(['alias', eventsplit[1]]);
    }
}
//This adds the above event listener to the iframe

if (window.addEventListener){
  addEventListener("message", listener, false)
} else {
  attachEvent("onmessage", listener)
}
</script>

After this code is setup you should see an alias call in the Live View when you visit the page. This aliases the two IDs together and both users data in the iframe and on the parent page will be recorded as the same user.