Uncategorized

Community Tip: Implementing Mixpanel via Google Tag Manager

This Community Tip will take you step-by-step through implementing Mixpanel with Google Tag Manager for tracking page views, link clicks, and form submissions.

Pros and cons of implementing Mixpanel with Google Tag Manager

Google Tag Manager (GTM) is a free application that allows users to remotely alter & activate certain code snippets that fire in a web or mobile app, without requiring direct access to the codebase or an App Store resubmission. GTM works by having you install a single code snippet, which fetches and runs any custom script “tags” you’ve set up within GTM’s own UI based on “triggers” that you’ve identified. GTM can be particularly handy if you’re in charge of your product’s analytics, but would need to take up a developer’s time in order to make any changes to the codebase. The software allows you to alter isolated portions of your code via a relatively intuitive UI, without much risk of altering or breaking the existing functionality of your site.

Benefits aside, however, a direct Mixpanel installation is generally preferable to a GTM implementation. GTM can be a great fit for a very simple, page-view based implementation, but Mixpanel’s true power is in tracking actionable data based on specific user activities, not just page loads. However, adding more specific, event-based tracking via GTM ratchets up the complexity of your Triggers and Variables significantly, and will require you to work alongside a developer to create a “GTM-friendly” site structure and interactions with the GTM data layer.

At this point, it’s far quicker and easier to simply integrate Mixpanel directly. And in case you need to add events on mobile without altering the code or re-submitting to the App Store, our Codeless Event Tracking feature allows you to add events on the fly with a simple graphical tool in MIxpanel’s UI. Implementing directly is still an option even if you’re already using GTM for other tags. GTM and directly-installed Mixpanel can coexist peacefully.

In short: we recommend implementing Mixpanel directly and foregoing GTM if at all possible. We provide a full Developer Reference that will get you up and running on Javascript, iOS, Android and a variety of server-side libraries in just 10-30 minutes. Our intrepid Support Engineer team is also ready and waiting to field any implementation questions you may have.

Tracking with GTM

Tags, Triggers, and Variables

There are three main components of a GTM integration, and we should define them before we continue. A Tag is a snippet of code that you want to run at some point. A Tag will never execute by itself, however. Instead, it relies on Triggers – conditional statements that tell tags when to fire. Lastly, a Variable is a value that a trigger can check as part of its conditional statement (e.g., Page URL, DOM element ID, Form text).

So, if you wanted to fire a certain Javascript snippet on each page view of your site’s /about.html page, you could use the built-in URL variable and set a trigger for {{url}} contains about.html.

Installing the Mixpanel library

The first step, as with any Javascript implementation, is to implement the Mixpanel library snippet. In a standard implementation, this consists of 1) copying the snippet from our JavaScript Documentation, 2) replacing “YOUR TOKEN” with your Project Token, and 3) pasting the customized snippet within thetag of all of your pages. With GTM, the following process applies:

  1. Add a new Tag and select “Custom HTML” as the type. Let’s give it a simple, descriptive title, such as “Mixpanel Library”. This snippet will only contain the library initialization snippet, which enables other Mixpanel methods (e.g. mixpanel.track) but won’t actually start tracking events on its own.
  2. Paste the entire library snippet into the “HTML” field. Note that the library you copied is already held within < script type=”text/javascript” > and < /script > tags. When you add your own custom JS, you’ll need to include these tags yourself.
  3. Open up Advanced Settings and set your ‘Tag firing priority’ to any value above 0, noting that higher-numbered tags are fired before lower-numbered tags. The important thing is that you’ll want to give the Library snippet a priority level that is higher than those of your tracking calls. So, if you set a priority level of “5” and leave all other Mixpanel tracking call priorities blank, they’ll default to 0 (the lowest priority) and will fire after the library snippet has fired.
  4. Select “All Pages” as your trigger. You want to ensure that the Mixpanel library is made available on every page, even if you only track Events on certain pages.
  5. Save the tag. Your Google Tag Manager snippet will now load the Mixpanel Library on each page on which it’s installed.

Tracking a page view event

Now that you’ve installed the Mixpanel library, we can set up a simple page view event that dynamically includes the page’s path (e.g., “/about/feedback.html”) as an event property. For this example, we’re going to be using the built-in “Page Path” variable that GTM provides. It should be enabled for use by default, but you can double-check this in your Variables tab.

To start tracking page views, we’ll make use of the standard mixpanel.track() function. Create a new Custom HTML tag and enter the following tag into the Configure Tag step:

var pagePath = {{Page Path}};
mixpanel.track("Page Loaded", {"Page Path": pagePath});

Note that we’re merging the built-in Page Path variable into the code. This tells GTM to dynamically pick up the Page Path and collect it as a variable, which we subsequently include alongside our tracked event. You can use any other variables you’d like, and create your own as well.

Assuming you set your Mixpanel Library snippet’s ‘Tag firing priority’ to any value greater than 0, you can leave that field blank on this tag. It will default to 0 and will always be fired after the library snippet. Select “All Pages” as the trigger and save the tag. You’re all set with your first tracked event! Because GTM will fire this on all pages on which it’s implemented, you don’t need to worry about adding this code manually to each new page.

Tracking link clicks

More detailed tracking is also possible in GTM with a bit of additional work. For something more advanced than page views, your developer should have “labeled” your site elements with an < id > parameter or similar. This “id” parameter will help you target specific elements, and also grab more granular data for your analytics.

  1. Start by enabling the “Click ID” variable in the Variables tab. We’ll use this to set up our trigger and to identify the link being clicked with an event property.
  2. Create a new Trigger to capture all Mixpanel link clicks. The following configuration will track any link clicks, and ensure that the request has a chance to send before the page changes:
  3. Set up a new “Link Click” Custom HTML tag. The following code will grab the link’s ID and set it as a property of the Link Clicked event, for easy event filtering/segmentation:
    html
    <script type="text/javascript">
    var linkID = {{Click ID}} ;
    mixpanel.track("Link Clicked", {"Link Name": linkID});

    Note that we’re using mixpanel.track(), not the special mixpanel.track_links() function. The custom trigger we created handles link identification and the requisite brief delay on our behalf, so we do not need the specialized tracking call.

To finish setup, select “Click” under Fire On, and select the Link Click trigger that you created in Step 2.

Tracking forms and registrations

It’s also easy to set up code that fires on a form submission. In this example, we’ll track an event, set an Alias, and create a People Profile for the newly registered user. Again, the best practice here is to have set specific “id” params in your source code for any elements you’ll to identify or manipulate. In this example, let’s assume a Username input field where < input id=”loginUID” >. We’ll use this ID to grab the field’s value.

  1. Start by enabling the “Form ID” variable in the Variables tab. We’ll use this to set up our trigger.
  2. Create a new Trigger to capture your signup form submissions. The following configuration will track the form, and ensure that the request has a chance to send before the page changes:
  3. Set up a new “Signup” Custom HTML tag. The following code will track a Signup event, set the user’s ID as an Alias for use in future logins, and create a People Profile based on the user’s new username:
mixpanel.track("Signup");
var userID = document.getElementById('loginUID').value //Get the text upon Submit
mixpanel.alias(userID);
mixpanel.people.set({"$name": userID});

Just like the Link Tracking example above, we’re using mixpanel.track(), not the special mixpanel.track_forms() function. The custom trigger we created handles form identification and implements the requisite brief delay, so we can use the standard tracking function.

In this case, we’re simply grabbing the user ID from the input field. In practice, you might be grabbing the new user ID from your server or user table, in which case you would need to work with your developer to load that into the GTM data layer and set it as a variable.

To finish setup, select “Click” under Fire On, and select the Form Submission trigger that you created in Step 2. You’re all set!

With these three cases in place, you should be well on your way to building a Mixpanel integration via GTM. For more support, please feel free to send an email to support@mixpanel.com to speak with someone smart, quickly.

Get the latest from Mixpanel
This field is required.