How to install Mixpanel via Google Tag Manager
Mixpanel is one of the best tracking tool for SAAS companies or web applications, which involve users logging in to get access to product or service. Mixpanel offers granular detail that’s essential for monitoring user behavior for such type of websites, which often, is very hard to track with Google Analytics.
While Google Analytics works best at helping you understand which traffic sources generate more conversions, Mixpanel is better at measuring how users are interacting and using the website – a need which most of the SAAS companies have.
And since it is so much convenient to have Mixpanel installed on the site via Google Tag Manager, in this post we will analyze how to get the tracking set up via GTM.
First and foremost, you need to create an account both on Mixpanel and for GTM. After this, you need to install the Mixpanel library by adding the library’s code snippet in GTM.
For this you need to copy the snippet from the JavaScript integration page and replace ‘Your Token’ with the token from your project page.
The Javascript code should look something like this:
<!-- 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&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
mixpanel.init("YOUR TOKEN"); </script>
<!-- end Mixpanel -->
After we have copied the code, in GTM we need to create a new Custom HTML tag, paste the code in it, give it a descriptive name and save the tag. As a targeting rule, we should set it to fire on All pages. We also need to set the firing priority to 0 by clicking on the Advanced button when creating the tag,
Tracking page views
After installing the Mixpanel library, we need to create a simple pageview event that dynamically includes the page’s path (e.g., /contact/) as an event property. For this, we need to enable the built-in ‘page path’ variable in GTM
To start tracking page views, we will use the standard mixpanel.track()function.
For this, we need to create a new custom HTML tag and enter this code snippet tag in the "Configure" tag step:
var pagePath = {{Page Path}}; mixpanel.track("Page Loaded", {"Page Path": pagePath});
Then for the trigger, we can use the same All pages trigger which we used previously. After this we click on Save and out pageview tracking is ready.
Since Google Tag manager fires on every page on which it’s implemented, we don’t need to worry about adding this code manually to each new page.
Tracking Link Clicks
To add the link click tracking, we need to enable the Click Text default GTM variable, then we need to create a new Custom HTML tag and paste the below code in it:
<script type="text/javascript">
var linkID = {{Click Text}} ;
mixpanel.track("Link Clicked", {"Link Name": linkID});
</script>
Then, as a trigger we need to create a simple Link Click trigger and use it for this tag. Then we click on save and our link click tracking is ready. And this is how to set up the basic pageview and link click tracking in Mixpanel with Google Tag Manager.