How to integrate Mixpanel with Zoho PageSense | Help guide

Integrate Mixpanel with Zoho PageSense

If you are using Mixpanel to monitor your website's traffic and get more visibility on how customers interact with your site pages, then integrating with PageSense can help you extract powerful insights about your A/B and Split URL experiment data. This integration lets you automatically push all your A/B and Split URL experiment data into Mixpanel reports and collect detailed data about your site's visitor actions for each experiment variation. 

Info
Enabling this integration is a two-step process:
  1. Toggle the Mixpanel integration on in PageSense.You can toggle the integration on for your entire project or for an individual experiment.
  2. Ensure that the Mixpanel snippet is installed on the pages you'd like to track. 
Notes
Key benefits of this integration include:

  • Connect your experiment results to key business metrics you already track using Mixpanel

  • Streamline workflows and make precise decisions for different business processes using your familiar Mixpanel dashboard

  • Identify key trends and user behavior on your experiment pages using Mixpanel

  • Uncover new insights about your experiments using Mixpanel's range of functions.

To integrate Mixpanel with Zoho PageSense:

NotesNote: To enable this integration, you must ensure that the Zoho PageSense tracking code is added to your experiment website. Remember to launch the A/B and Split URL experiments you want to track data for in PageSense. Learn how to install the PageSense code snippet on your website.1. Open the project you want to integrate with Mixpanel in Zoho PageSense.

2. Click the Integrations tab on the top pane, enable the Mixpanel button, and click Continue.



3. Select the A/B (or Split URL) experiment you want to view reports for in Mixpanel.

4. Navigate to the CONFIGURATION tab, click Add Integrations section, and enable the toggle beside Mixpanel.



5. Log in to your Mixpanel account. On the home page, click on the "Setup" tab.
6. On the Setup guide page, navigate to "JavaScript" and click on it.



7. Please copy the "Install SDK" script and the "Configure SDK" script, then add them to your website's HTML source.

NotesNotes:
Insert the script tag immediately before your closing </head> tag. Ensure it comes after the PageSense snippet.
While adding the "Configure SDK" script, please click on "Token" to generate a token and replace it in the script.

Before adding the token:
  1. <script>mixpanel.init('YOUR_TOKEN', {debug: true, track_pageview: true, persistence: 'localStorage'});</script>

After adding the token:
  1. <script>mixpanel.init('56ce47122506b808fe277090e0b5fe8a', {debug: true, track_pageview: true, persistence: 'localStorage'});</script>

8. Go back to the website where you have set up the A/B (or Split URL ) experiment and paste the copied Mixpanel code (in the step above) under the Zoho PageSense code snippet.
9. Paste the following line of code underneath the code you pasted in the previous step:
  1. <script>
  2.     if(window.ZAB && window.ZAB.experimentsLoaded) {
  3.         window.ZAB.MXIntegFunc();
  4.     }
  5.     if(document.addEventListener) {
  6.         document.addEventListener("zpsExperimentsLoaded", function() {
  7.             window.ZAB.MXIntegFunc();
  8.         }, false);
  9.     }
  10. </script>


The JavaScript would look like this:

<<script src="https://cdn.pagesense.io/js/XXXXX/*********************.js"/><script>

<!-- start Mixpanel --><script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,

0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");

for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//http://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js%22.match(/%5E/////)?%22https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js%22:%22//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js%22;c=e.getElementsByTagName(%22script%22)[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);

mixpanel.init("XX000");</script><!-- end Mixpanel -->

<script>window.ZAB.MXIntegFunc();</script>

10. Once added, kindly save and publish it in your website's HTML source.

11. After publishing it, the Mixpanel application will detect the code and indicate "Data Detected" upon successful snippet addition.




11.The experiment and variation names will now be sent to Mixpanel, and the data will flow into Mixpanel instantly. 


To view your experiment reports in Mixpanel:


1. Click the Analysis button on the top pane and choose the type of report you want to view, like Insights, Funnels, Flows, or others.
For example, to get real-time insights into visitors' actions and behavior for different variations, click Insights, navigate to BREAKDOWNS, choose Select property, and then select the EVENT option.

2. Select the name of the A/B experiment created in PageSense for which you want to view reports from the list.  
You can also customize and view your experiment data by a specific date range and select from different chart types in the Mixpanel report. Learn more about how to interpret reports in Mixpanel.


We hope this documentation helps make the process easy for you. Please feel free to email us anytime at 
support@zohopagesense.com if you need more explanation or have any questions.