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 measureschool.com, 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 measureschool.com/mixpanel 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.
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 measureschool.com. If you want to follow along with all the stuff that we did in this video then head over to measureschool.com/mixpanel 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.