Use this step-by-step guide to create Mixpanel tracking events using Google Tag Manager.
Creating Google Tag Manager account
- Signup to GTM using your Gmail account
- On accounts page click "New account"
- Set Account Name and Container Name
- Click on "Web pages" and +Add Domain and add your site
- Accept GTM Terms of Service Agreement to continue
- GTM will give you code to paste it on every page on your website. Place it immediately after the opening <body> tag.
Creating Mixpanel account
- Signup to Mixpanel
- Create new project to get their javascript library
- Save that library to add it to your site using Google Tag Manager.
(You can paste this snippet just before the </head> tag of your page, but we already added GTM code, so we can do it easily trough GTM tags)
Connecting Mixpanel with Google Tag manager
- In GTM Container Draft click New -> Tag
- Enter Tag Name e.g. "Mixpanel library" and select Tag Type "Custom HTML Tag"
- Paste Mixpanel library in HTML textarea
- Before saving tag, you will need to set firing rule. In section "Firing Rules" click +Add and select "all pages" and this tag will be on every page on your website.
- Click save and publish container - you have successfully added Mixpanel to your site.
Creating tags to fire tracking events to Mixpanel
Click on Container Draft -> Overview and add new tag. In this example we are going to track every visit on home page
- Set Tag Name "Home page" and Tag Type "Custom HTML Tag"
- In HTML textarea open <script> tag and close it </script> add this code to push event to Mixpanel:
mixpanel.track("Homepage loaded");
Every time home page is loaded event "Homepage loaded" will be fired to Mixpanel
Adding mixpanel track properties to send it to Mixpanel
mixpanel.track('Homepage loaded', {
'page name' : document.title,
'url': location.href
});
This code will send event "Homepage loaded" with page name and page url. (You can add as many properties as you want to Mixpanel)
Setting firing rule
We have to set firing rule so GTM could recognize that we are on homepage.
- In "Firing Rules" section click +Add to add new firing rule
- Select option "Create new rule"
- Enter rule name and you are ready to set "Conditions"
- Set {{url path}} equals "/" and {{url hostname}} equals domain.com
- If you have subdomains like sub.domain.com add condition: {{url hostname}} does not equal sub.domain.com
- Click save and publish so this event can be tracked with Mixpanel.
Example firing event to Mixpanel when Blog page is loaded
- Create tag and name it "Blog page loaded"
- Select Tag Type "Custom HTML Tag" and write in <script></script> snippet:
mixpanel.track("Blog page loaded");
- Create new firing rule, name it e.g. "Blog page"
- Set condition {{url}} contains e.g. "/blog" and tag will be fired every time url will contain blog (www.domain.com/blog or www.domain.com/blog/example-post)
- Click save and publish container.
Send clicking events to Mixpanel using GTM click Listeners
Example sending link click listener to Mixpanel:
- First thing you need to do is to create "Link Click Listener" that will listen every link clicked on your site
- Add new tag and name it e.g. "Link Click Listener" and select Tag Type: Event Listener -> Link Click Listener
- Set firing rule "all pages" so tag can listen link clicks on every page on your website
- Save and publish
Now you need to create tag for specific link that will be clicked, for example we have this on our website:
<a href="/log-in" class="loginClass" id="login">Login</a>
- Create new tag and name it e.g. "Login link clicked"
- Select Tag Type "Custom HTML tag" and add your code into <script> snippets, for example:
mixpanel.track("Login link clicked");
- Now you need to set firing rule, click +Add and set rule name
- Now in conditions choose {{event}} contains "gtm.linkClick" and {{element id}} equals "login"
- If you want to use {{element class}} you will need to create macro and when you are done just replace {{element class}} equals e.g. loginClass
- If element has more than one class, don't use "equals", use "contains"
Creating macro {{element class}} for targeting classes on website
- Click New -> Macro
- Set Macro Name and Macro Type to "Auto-Event Variable" and choose Variable Type "Element Classes"
- Click save to continue
Example sending button click listener to Mixpanel:
- First thing you need to do is to create "Click Listener" that will listen every click on your site
- Add new tag and name it e.g. "Click Listener" and select Tag Type: Event Listener -> Click Listener
- Set firing rule "all pages" so tag can listen clicks on every page on your website
- Save and publish
Now you need to create tag for specific button that will be clicked, for example:
<button class="registerClass" id="register">Register</button>
- Create new tag and name it e.g. "Register button clicked"
- Select Tag Type "Custom HTML tag" and add your code into <script> snippets, for example:
mixpanel.track("Register button clicked");
- Now you need to set firing rule, click +Add and set rule name
- Now in conditions choose {{event}} contains "gtm.Click" and {{element id}} equals "register"
- If you want to use {{element class}} you will need to create macro (look above) and when you are done just replace {{element class}} equals e.g. registerClass
- If element has more than one class, don't use "equals", use "contains"
There is one more way to send clicks to Mixpanel using jQuery:
- Add new tag, set Tag Name and Tag Type to "Custom HTML Tag"
- Set firing rule "all pages"
- Write next code to HTML textarea (into <script> snippets):
jQuery( "#elementId" ).click(function() {
mixpanel.track('element id clicked', {
'url' : window.location.href
});
});
When you use mixpanel.track you can always add properties. Here we add pathname of url so we can see on what page was element clicked.
There is no need to use that because you have Auto Event Listeners in Google Tag Manager
When you finally understand Events in Mixpanel and GTM it's a piece of cake actually. If you have problem or error, leave us feedback - we are here to help.
