In this article

You will learn multiple ways of handling publisher websites and iframe communication without using a Pixel. In that article, the page hosting the iframe and running Permutive will be called "Top Frame" and the iframe content will be called "Child Frame"

Goal

The goal of that article is to explain how to track events on an integration placed in an iframe. This could be tracking video events on an iframe video player or a custom creative in GAM.

Required Knowledge

Modern browser use for security feature called CORS (Cross-Origin Resource Sharing). This system is made to present a frame (ex: https://yourpublisherwebsite.com) to access content from another frame on another domain (ex: https://embeded.videoplayer.com). Or in our case from a top frame to access the child frame or the other way around. If both frames are on the same domain Javascript object can be accessed easily.

Frames on the same domain

Tracking by the parent frame without modification of the child frame

In the parent frame you can access the Javascript context of an iframe like the following:

const iframe = document.getElementById('childFrame')

iframe.contentWindow.permutive = window.permutive

iframe.contentDocument.body.addEventListener('your_event', e => {
  iframe.contentWindow.permutive.track('your_event', {})
})

For example, if you want to trigger the Permutive LinkClick event on a click that occurred inside the iframe 

const iframe = document.getElementById('childFrame')

iframe.contentWindow.permutive = window.permutive

iframe.contentDocument.body.addEventListener('click', e => {
  iframe.contentWindow.permutive.addons.web.sendLinkClickEvent(e.target)
})

(Note: permutive.addons.web.sendLinkClickEvent is not documented and not officially supported)

Tracking inside the child frame

Inside the iframe or child frame, you can access the parent frame using window.top

window.top.permutive.once('Pageview', function (ev, err) {
  window.top.permutive.track('your_event', {})
})

Frames on different domains

When frames are on different domain communication between them are restricted because of CORS. To allow communication between them the browser messaging API will need to be used: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

This requires a modification of both the Parent and the child frame.

On the parent you have to listen for incoming messages:

window.addEventListener("message", (event) => {
  if('event is the event I am looking for'){
    window.permutive.track('your_event_name', {})
  }
}, false);

In the child (iframe) you can send the events:

if (window.top && window.top.postMessage) {
  window.top.postMessage({ name: 'my_viewable_event', data: ['my iframe was seen'] }, '*')
}

if (window.top && window.top.postMessage) {
  window.addEventListener('click', function () {
    window.top.postMessage({ name: 'my_click_event', data: ['seomething was clicked in the iframe'] }, '*')
  }, false)
}

Google Ad Manager

In Google Ad manager you can find two kinds of creative ads concerned with what was explained previously:

On both of them, custom HTML/JavaScript codes can be added. When added that code will be rendered into an iframe.

When creating a Creative of one of these types a SafeFrame option is available:

Note: If you use it, you will be effectively serving that ad or that iframe on a different domain with CORS security measures enabled. If you disable the safe frame option, you can use all the communication options in the same domain frame communication.

If you have any questions, please contact customer support by emailing support@permutive.com or chat to the Customer Operations Team via the LiveChat icon in the bottom right corner of your screen.