Help Center

Menu

Use Mixpanel to monitor digital and marketing analytics

This tutorial shows you how to integrate Mixpanel with Matrix, which lets you monitor Mixpanel’s digital and marketing analytics, as well as A/B testing of your Matrix site.

For instance, Matrix can easily integrate with Mixpanel’s campaign management features (e.g. analyses users interactions with links sent through email, SMS or push notifications by Mixpanel on behalf of your Matrix site). Matrix can also integrate with Mixpanel’s A/B testing testing features (e.g. two variants of a Matrix page with a single change).

Before you start

For this tutorial, you will require:

  • A Mixpanel account with at least the Admin organisation role - details on how to set this up are provided in the instructions below.
    For more information about Mixpanel’s pricing plans, consult their pricing page. Note also Mixpanel’s Privacy Policy and Terms of Use, as well as their help and documentation.

  • A Matrix site on which to configure Mixpanel - you must have admin permissions granted on this Matrix site, which is usually a Matrix Backend User with admin permissions granted at the top of the the site asset’s hierarchy.

Set up a Mixpanel account

The assumption here is that you want to add another user in Mixpanel to administer Mixpanel for a Matrix site within your organisation.

If you want to administer Mixpanel for this Matrix site, however, then you can skip to the next section.

  1. Sign in to Mixpanel.

  2. Click your name at the top-right and from the drop-down menu, choose Invite Users.

  3. In the Invite New Users dialog box (and assuming the INVITE TO PROJECTS tab is selected):

    1. Specify the user’s EMAIL ADDRESS.

    2. Choose Admin for their ORGANIZATION ROLE.

    3. Choose any project from PROJECTS.

    4. Choose Admin from PROJECT ROLE.

    5. Click Invite.

Your specified user should receive an email message through which they can accept the invitation to Mixpanel and sign in.

Set up a project in Mixpanel

Mixpanel lets you configure multiple projects for your organisation, where a project contains configurations for a web site on which to gather Mixpanel digital and marketing analytics. Therefore, set up a Mixpanel project for this Matrix web site.

  1. Ensure you are still signed in to Mixpanel.

  2. Click your name at the top-right and from the drop-down menu, choose your organisation under the ORGANIZATION SETTINGS section.

  3. Follow Mixpanel’s remaining instructions in their documentation on how to create a project.

Access the Mixpanel code snippet for Matrix

  1. Ensure you are still signed in to Mixpanel.

  2. Click the top-left drop-down menu and choose your Mixpanel project (configured above).

  3. Click the Settings (cog) icon towards the top-right and choose Install Mixpanel from the drop-down menu.

  4. Ensure that Get Started > Quick install is selected.
    Keep this page open.

Set your Mixpanel configuration in your Matrix site

  1. Ensure you are logged in to your Matrix site in admin mode and have admin permissions to your site (according to the Before you start section above).

  2. Edit the contents of your Matrix site’s <head> asset. If you have difficulty locating this asset, it is usually located within the Configuration > Design Assets > Design Nesters folder of your site’s asset tree.
    (Begin editing this asset by right-clicking Design Nesters and choosing Content from the menu.)

  3. Back on Mixpanel’s Get Started > Quick install page, click inside the Install our library text box, ensuring that the entire text content is selected, and copy and paste this content into an appropriate area of your Matrix site’s <head> asset. The content of this snippet should look similar to:

    <!-- start Mixpanel --><script type="text/javascript">(function(c,a){if(!a.__SV){var b=window;try{var d,m,j,k=b.location,f=k.hash;d=function(a,b){return(m=a.match(RegExp(b+"=([^&]*)")))?m[1]:null};f&&d(f,"state")&&(j=JSON.parse(decodeURIComponent(d(f,"state"))),"mpeditor"===j.action&&(b.sessionStorage.setItem("_mpcehash",f),history.replaceState(j.desiredHash||"",c.title,k.pathname+k.search)))}catch(n){}var l,h;window.mixpanel=a;a._i=[];a.init=function(b,d,g){function c(b,i){var a=i.split(".");2==a.length&&(b=b[a[0]],i=a[1]);b[i]=function(){b.push([i].concat(Array.prototype.slice.call(arguments,
0)))}}var e=a;"undefined"!==typeof g?e=a[g]=[]:g="mixpanel";e.people=e.people||[];e.toString=function(b){var a="mixpanel";"mixpanel"!==g&&(a+="."+g);b||(a+=" (stub)");return a};e.people.toString=function(){return e.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for(h=0;h<l.length;h++)c(e,l[h]);var f="set set_once union unset remove delete".split(" ");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
MIXPANEL_CUSTOM_LIB_URL:"file:"===c.location.protocol&&"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
mixpanel.init("1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p");</script><!-- end Mixpanel -->
    If you have Google Tag Manager configured for your Matrix website, refer to Mixpanel’s instructions on how to integrate this code snippet into Google Tag Manager for use with your Matrix site.

  4. Select Save to save changes to the <head> asset.
    Also keep the Mixpanel Get Started > Quick install page open.

Confirm Matrix and Mixpanel are correctly configured

This procedure is designed to verify Mixpanel’s integration with Matrix using a Mixpanel test code snippet on one of your Matrix site’s pages. After following this verification procedure, you can remove this Mixpanel test code snippet.

  1. Ensure you are logged in to your Matrix site in glossary:index.adoc#admin_mode and have admin permissions to your site (according to the Before you start section above).

  2. Edit the contents of your Matrix site’s home page asset. This type of page would normally be found within a Site > Standard page asset hierarchy in Matrix.

  3. Towards the end of this page, enter the following HTML elements to hold a JavaScript command:

    <script type="text/javascript"></script>

  4. Back on Mixpanel’s Get Started > Quick install page, copy the Track an event code snippet mixpanel.track("Video play"); and paste this within the Matrix site’s home page within the HTML element you added above - i.e.

    <script type="text/javascript">mixpanel.track("Video play");</script>

  5. Wait for between 5-10 minutes and then preview this home page.

  6. Back in Mixpanel’s Get Started > Quick install page, click Check and if you see You are successfully sending data!, then Mixpanel is successfully receiving data from Matrix.
    If this check is unsuccessful, repeat the previous step and continue on.

  7. Remove this entire <script/> line from your Matrix site’s home page.