Track Mixpanel Inside Canvas or iFrame

Sometimes, customers choose to embed their web application within a canvas (such as Canvas or Facebook Canvas), which is essentially an iframe that appears native to the hosting application. While this can be a convenient choice for many reasons, they can also be challenging because you don't always own and can't always manipulate the source code of the parent page. Certain browsers also have strict rules for things that could be critical for your Mixpanel implementation, such as passing third party cookies to the web application within the frame.

The most common challenge we see when clients implement their app within a canvas involves difficulty in setting third party cookies and passing other information to the web app within the canvas to then send to Mixpanel. In client-side Mixpanel implementations, cookies are critical for sending Mixpanel important information like distinct_id and registered super properties.

One way to completely avoid these challenges is to do a server-side implementation and avoid any browser-specific, app-embedding quirks. However, a client-side Mixpanel implementation is still the best option for some customers, in which case there are several best practices and browser-specific quirks to be aware of:

Safari 5.4.1

Safari has a strict rule preventing third-party cookies being set. In order to set a cookie, user will need to interact with a non-framed page. Best known workaround is to do this the first time a user interacts with your framed app:

  1. Try to set a cookie with distinct_id and super properties. If unsuccessful, see next point
  2. Prompt user to click a Register button and take them to an intermediate page in a new browser tab, which could display an "Almost Registered" message or some other prompt.
  3. Set the cookie when they click Finish Registration button. Note: This is not blocked by Safari because it is considered a 'first-party' interaction because the user clicked a button within the app
  4. JavaScript calls into main iframe to finish

Cookie setting in iframe will work for all future sessions.

Internet Explorer

In order to set third party cookies, you need to supply a compact privacy policy with your page in the form of a P3P header explicitly accepting third party cookies to IE. Set the P3P properties in the P3P header atop your page; the web server should be configured to deliver this header on all pages. This P3P header will look slightly different depending on your coding language. Note: Your P3P headers should truthfully represent your own privacy policy! Also, IE is the only major browser to support P3P; this does not apply to other browsers.

Firefox and Chrome

Firefox and Chrome support the postMessage standard which allow windows(frames) in different domains to talk to each other.

The biggest takeaway here is that if you are embedding your web application in a canvas (iframe) on another application, be aware that there may be browser-specific restrictions on passing third-party cookies. The most sure-fire way to avoid issues with information typically stored within the browser cookie getting sent to Mixpanel when your app is within a canvas is to do a server-side implementation; however, depending on the specific implementation, the above workarounds have been useful for other clients.

Did this answer your question?



Article is closed for comments.