How to Install Mixpanel with Google Tag Manager
Articles,  Blog

How to Install Mixpanel with Google Tag Manager


– [Voiceover] 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. Now, our 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 which 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 submit. 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. (upbeat music) 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. (upbeat music)

11 Comments

  • B612

    amazing video… you might wanna check/do a video Amplitude.com I'm loving it !! It's free with a lot more events than Mixpanel

  • Joshua Kendrick

    Great video. It's super easy to follow! Quick question though, is there anything that would cause my setup/Library tag to fire twice and keep my main/Pageview tag from firing at all? I can see it in preview/debug as "Not fired…" and I triple checked that I followed your instructions. The only difference may be that I had to include the GTM code in the head of my page, rather than the body due to Squarespace's editor limitations. Any thoughts?

  • Oscar Kooij

    Hi Julian, thanks for sharing! is it also possible to identify a user cross channel? Let's say we have a website, a individual sign up page and our web-app and the user will put his email on the sign up page. Hope to hear from you!

  • Luis Barrios

    Hello Julian, thanks for the video.
    If i install the .JSON file is necessary to follow all the steps you did in this video?

  • Linus Larsson

    Great video! However, when I add event tracking, it won't work if I use Tag Sequencing. I can see in the Debugger that the event is sent from GTM, but it doesn't appear in Mixpanel. When I uncheck "Fire a tag before…" it works just fine. Any idea why?

  • Dante Jauregui

    Thanks measureSchool! im new in GTM, so what should I write instead of "ContainerID" and "HTML ID"?? please inside the personalized HTML. I just want installed globally (Pasting the snippet just before the </head> tag of your page) Please your support đŸ˜€

  • David Hollands-Hurst

    Thanks again Julian, a very clear video for a not necessarily straight forward installation. I'm trialing this for a client. One thing I am having trouble with is the HTML ID (which is enabled). If I look at the DOM variables it shows up as 'undefined'. Is this right?

  • David Altmann

    Good video, thank you, but some aspects I don't get… The additional code that you add at 2:50, is that necessary or obligatory? If necessary, could you share it in the video description, to copy & paste? Also: where do I get the html id fro,, then? And last but not least: I also think, like AndrĂ© below, that maybe you selected the wrong option at 7:17 (at least based on what you are saying in the video).

Leave a Reply

Your email address will not be published. Required fields are marked *