How to Install Mixpanel with Google Tag Manager

Mixpanel works great for event-driven analytics which is perfect for mobile apps, web apps, and SAAS businesses. It allows you to get more insights into how your users are using your app and track what they do more closely.

Check out this video to see how you can install Mixpanel with Google Tag Manager.

In this little video, I’m gonna show you how you can install the analytics tool, Mixpanel, with the help of the Google Tag Manager. We’re gonna install events, identify a user and I’ll show you how you can utilize the notification feature. (upbeat music) Hi there and welcome to another video of, where we teach you the data-driven way of digital marketing. My name is Julian and today I’m gonna show you how you can install Mixpanel with the help of Google Tag Manager. Now, the tags, triggers, and variables that we use in this video will be later on so be sure to check that out, and let’s dive into today’s topic. 

So, today we’re going to talk about how we can install Mixpanel with the help of Google Tag Manager. Mixpanel’s really a great tool for event-driven analytics which is great in cases of a mobile app, but also useful when you are operating a web app such as software as a service and you want to get detailed analytics on the events and the user behavior within your app, but also track your users more closely. So, Mixpanel gives you a great set of tools to track these interactions. So, how can we get started? So, to install Mixpanel on your website you first need to install the general Mixpanel library that loads on every page of your website. So, we can go over, if you have opened up a new Mixpanel project, you would get prompted when installing this. I have tried this out before, so I actually need to go to our Help Center here and go into the tracking tutorials, which we will work with right now and we get our Mixpanel code. So, what we need to do is mark this all and then copy this. Go over to Google Tag Manager and, within tags, we can create a new tag. Notice I have already some Google Analytics tags installed here, but we’re gonna install our Mixpanel tag which will be our general Mixpanel library and we will deploy this on all pages. So far, so good. As the product, we don’t have, unfortunately, Mixpanel available yet so we need to go with the custom HTML tag. And, before I paste this in this window here, I actually want to deploy a pattern that is important for tag sequencing. I have to save this up. So, we see here a pattern and this is used for custom HTML tags in conjunction with the tag sequencing feature of Google Tag Manager. Why is this important? Well, this library should fire first before we send in any more information into Mixpanel and in order to ensure that our library has loaded first before we send in any more data into Mixpanel, we can use this tag sequencing pattern for custom HTML tags, so the tag can actually report back to Google Tag Manager that it has fired successfully. I won’t go into detail too much. Just make sure, if you deploy this pattern, you will need to enable the container ID and the HTML ID in your variables menu. So, this block actually tries to execute a piece of code which is our Mixpanel code, so paste this in here and we actually don’t need the script tags which you see around here. And, if it’s successful, it will report back to Google Tag Manager that we can go ahead and fire our other tags. Now, one thing we need to change is the Your Token here. So, we go back to our Mixpanel admin section and, under the settings, we have our token so let’s copy this and go over to Tag Manager and implement this here. That should do it. Let’s continue and deploy this on all pages. Let’s create this tag and go into our preview in debug mode. We load our page. We see our preview in debug mode and we see that Mixpanel has fired successfully. Right now it doesn’t do anything for us because we haven’t tracked any information yet, but the library is now available so we can send in data. 

So, to mimic what we have set up with Google Analytics, here, which is a normal page you’re tracking, we kinda also emulate that with Mixpanel. So, how would we do that? Let’s go into a new tag. This will be a Mixpanel tag and we actually gonna track an event, so I’m gonna call this the track view and it will be an all page we’re tracking. Again, custom HTML tag and this time we’re gonna enter a special kind of code. Let’s head back to our tutorial section here and check our first event. Here is a little example which we can copy and go back to Tag Manager, paste it in here. Now, we want to customize this, obviously. You want to track an event, which is called Pageview, and we can optionally pass on any kind of attributes that we might want to track with this Pageview. So, in our case, for example, Page Path would be something that we want to track. Let’s get rid of this last attribute here. Obviously, we would dynamically need to change this value of this attribute and we can simply use our built-in variables with the name Page Path. All right, so far so good. 

Now, the pattern that we deployed for the tag sequencing will come into play because we only want to fire this tag after the library has actually loaded. One little error I see right here, there’s a comma that shouldn’t be here because, in an object, the last key pair value needs to not have a comma so let’s get rid of that and go back to our tag sequencing. We need to deploy this after the library, otherwise, no data will be received by Mixpanel, so we can go into the advanced settings, here, and actually go into the tag sequencing and we only want to fire this Mixpanel track event actually after our general library loaded, so we can click on this fire a tag before Mixpanel fires which should be our library. Now, we can also prevent our data to be sent in if our library fails. We won’t do this now. This won’t be necessary because the data won’t be received anyways. So, let’s continue and since it’s a Pageview tag, we want to fire this on all pages. Let’s create this tag. Refresh. Go back to our demo store. Refresh this. And we see our general tag fired, but also our Mixpanel Pageview tag, so now data is recorded. You should be able to see it in our Mixpanel admin section under live view, which is like the real time reporting within Google Analytics and we see a new event was just fired by a person coming from Berlin, where I’m at right now. I have a distinct ID, which is an ID that Mixpanel assigns once I enter this domain and we can look at the profile activity, but also at the Pageview in that, so, which will feature our page path that we have sent in. I also see that there is a current URL that is passed in automatically so maybe this page path wouldn’t be necessary per se, but this is just to show you that you can send in any kind of attributes with this page view that you might want. Which is a little bit like, in Google Analytics, custom dimensions. All right, the next thing we want to tackle is actually making this user identifiable to the system so, right now, we have a John Doe here, which doesn’t tell us much, but since this is a platform that’s very event driven, but also very user centric, we’ll be able to identify the user once he logs in or puts in his details into any kind of other field. So, how would we do this? Well, there’s a special call for this. Let’s go over here into our tutorial section and create our first user profile. Again, we would need to have the library loaded, which we have, and then we have an identify call here that we can use, so let’s copy this. Go over to Google Tag Manager and create a new tag. This will be our Mixpanel tag. This time it will be an identify call and it will fire on really any kind of form. Again, we will go with the custom HTML tag. Let’s implement our tag here. We would need to surround it with script tags and we will be ready to go, but we want to, obviously, change this information here based on whatever the user’s attributes are, so let’s see how we can pick this up within our demo shop view we have, for example, a contact form and we can enter a name here and when I click this send button, I will keep the command key pressed so it opens up in a new tab and we see that I have already installed a trigger for form submits which fires on this form submission. No-tag really fires, but we can look into the variables. We have installed a custom JS variable which is the email input variable. If you want to find out more about how to install this form trigger, but also the email input variable, then head over to our video about the email input variable, which I will link up below as well. And this email input variable, basically, just looks through this form and extracts the email address that was entered anywhere in these fields and makes this available to us in a custom JavaScript variable so we can use this variable in our tags as well. So, let’s do this. Let’s remember our variable name here and head over back to Google Tag Manager and, instead of identifying the user with a number, I will identify him with his email address which I will fill out by dynamically putting that from the field, which I can do with our email input variable. And, the same is true for the call mixpanel.people.set. We want to set the email address to the actual user. Now, there are other features that you can install. First name, last name, and so on. The information is in the contact form, but I won’t bother pulling that for now. This is something you can customize for your website. Let’s get rid of this. That should do it. Let’s continue and fire this on any form view. So, the trigger here. Form submit trigger. That should do. Let’s create this and refresh. Let’s go back to our contact form and do this whole test again. I’ll put in name, email, and a message, like I would send that off to this online store here. Click on the send button with the command key pressed. Our tag fires and our Mixpanel identity form fires as well so the user is now identified. Back in our live view, you would be able to click on the user and we see there’s a new user profile. There’s not much information here, but the email address is now changed so, if I generate a new page view, let’s go back to the home page here, our data will be forthcoming associated with this user. 

So, we have gone through identifying the user, sending page views in, but what about events? Well, this is also really easily done with the help of Google Tag Manager. In another tutorial, I have already showed you how to track button clicks. I still have this trigger, here, available, which I can just adjust to send in another event in order to track whether somebody clicks one of these Add To Cart buttons. So, let’s do this really quickly. Let’s go back to our tutorial here. Send in another event. This time, copy this again. Go back to Google Tag Manager. Open up a new tag. Of course, this will be a Mixpanel tag. We’ll track a new event, which is our Add To Cart click. Custom HTML tag, as always, and Mixpanel track, this time, will be Add To Cart. Now, this time I don’t want to send in any kind of information. I could send in the product and so on, but this won’t be necessary for this demo so I’ll just get rid of the whole object here in the back and just keep it at this. Now one thing I forgot to do at our last identify call is actually do the tag sequencing, which we will just do here for now. We’ll, again, choose our library to fire first and attach our tag to our trigger. So, we have here our Add To Cart click. That should do it. Let’s quickly correct my mistake from before. The identify call should only fire on the tag sequencing after the initial library loaded. That should do it. Refresh this all. Go back to our page. Refresh this. Now I click the Add To Cart button with the command key pressed. We see, when we go back, that there was a GTM click and, on our GTM click, our general library fired because we put this into the tag sequencing and our Mixpanel track event fired. Once we go back to Mixpanel, we have three new events and also our Add To Cart event is now tracked by this user who has identified through the system one time. So, Mixpanel gives you, really, a flexible system to send in any kind of data, an event form or a user property form, into the system and let’s you then segment, analyze retention rates, do your own formulas and so on and so on. It’s also possible to track revenue with this platform, but that’s something I would leave you to figure out by yourself.

 One feature that I want to point out is the notification feature because you’re actually able to, through this library of Mixpanel, to send notifications to your users. So, all you need to do is choose how you want to deploy this here. An email message is for websites. Pretty useful, so we can go for websites here. We can put in any kind of title and choose, in the editor, to open a link afterwards, for example, and then show this message to all your users. Unfortunately, I won’t be able to show you this right now because I have a local machine running here, but what you can do after this step is to find a tagged user group that you want to display this to with the properties that you have defined in the events or in the identifier calls that you have prepared through Google Tag Manager and then you’ll be able to pop this message up on a scheduled basis or as soon as possible to these users. So, it’s a really great feature to make your analytics actionable with a message that you want to display to these users. Don’t forget at the end of this tutorial to publish your tags, triggers, and variables to all the users, fire the publish button, so it will be deployed on your website.

And that’s already it with this week’s video of If you want to follow along with all the stuff that we did in this video then head over to where we have a handy template for you that you can download and upload right into your Google Tag Manager account so you have all the codes that we used in this episode right in your Google Tag Manager account. And if you liked this video, please give us a thumbs up and go over and subscribe to this channel because we’ll bring you new videos every Thursday. My name is Julien. Till next time.


Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
Inline Feedbacks
View all comments

Blog Categories

Join 30,000+ marketers getting exclusive resources and our latest content!

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.