Each week, Mixpanel will release articles from our archives to help you get the most out of Mixpanel. Follow the Topic Tag #fromthearchive to subscribe to these posts and get alerted when they drop.
Sometimes, customers choose to embed their web application within a canvas (such as Force.com 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 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:
- Try to set a cookie with distinct_id and super properties. If unsuccessful, see next point
- 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.
- Set the cookie when they click Finish Registrationbutton. Note: This is not blocked by Safari because it is considered a 'first-party' interaction because the user clicked a button within the app
Cookie setting in iframe will work for all future sessions.
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.