Implementing Mixpanel with Google Tag Manager

This article provides a step-by-step guide on how to implement Mixpanel with Google Tag Manager.

You can use to track page view, link clicks, and form submissions.

Implementing Mixpanel with Google Tag Manager

Google Tag Manager (GTM) is a free application that allows users to remotely alter and activate certain code snippets that fire in a web or mobile app, without requiring direct access to the codebase or an App Store resubmission.

To use GTM you must install a single code snippet that fetches and runs any custom script tags you’ve set up in GTM’s own UI based on your triggers.

The software allows you to alter isolated portions of your code through a relatively intuitive UI, without much risk of altering or breaking the existing functionality of your site.

Regardless of the benefits of using GTM, a direct Mixpanel installation is generally preferable to a GTM implementation.

GTM can be a great fit for a simple page-view based implementation, but Mixpanel’s true power is in tracking actionable data based on specific user activities, not just page loads.

Adding more specific, event-based tracking through GTM increases the complexity of your triggers and variables significantly. As a result, it requires you to work with a developer to create a “GTM-friendly” site structure and interactions with the GTM data layer.

At this point, it’s easier to integrate Mixpanel directly. If you need to add events on mobile, without altering the code or re-submitting to the App Store, Mixpanel’s codeless event tracking feature allows you to add events on the fly with a 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.

Mixpanel recommends implementing Mixpanel directly and foregoing GTM if at all possible.

Mixpanel provides a full developer reference that gets you up and running on Javascript, iOS, Android and a variety of server-side libraries between 10-30 minutes.

Using Tags, Triggers, and Variables

There are three main components of a GTM integration: tags, triggers, and variables.

Tags are snippets of code that you’ll want to run at some point.

Tags never execute by themselves. They rely on triggers, which are conditional statements that tell tags when to fire.

Variables are values that a trigger can check as part of its conditional statement, for example page URL, DOM element ID, form text, and so on.

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

Before you install the Mixpanel library, you must add the Mixpanel library code snippet. This article uses the JavaScript library. To add the JavaScript code snippet:

  1. Copy the snippet from the JavaScript integration page.
  2. Copy and paste the following code snippet inside of the  <head> and </head>
  3. Replace “YOUR TOKEN” with your project token.

Now that you’ve installed the Mixpanel library, add Google tags.

  1. Add a new tag and select Custom HTML as the type.
    Give the tag 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 in the script type=”text/javascript” > and /script> tags.
    When you add your own custom JS, you’ll need to include these tags yourself.
  3. Open Advanced Settings :
    – Set your ‘Tag firing priority’ to any value above 0. Note that higher-numbered tags are fired before lower-numbered tags.

    – 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 GTM snippet will now load the Mixpanel library on each page on which it’s installed.

Tracking a Page View Event

After installing the Mixpanel library, you can set up a simple page view event that dynamically includes the page’s path (e.g., /about/feedback.html) as an event property.

This example uses a built-in “page path” variable that GTM provides. It should be enabled for use by default, but you can double-check in your Variables tab.

  1. To start tracking page views, use the standard mixpanel.track()function.
  2. Create a new custom HTML tag and enter this code snippet tag in the "Configure" tag step:
    var pagePath = {{Page Path}}; mixpanel.track("Page Loaded", {"Page Path": pagePath});

    Merging the built-in page path variable in the code tells GTM to dynamically pick the page path and collect it as a variable, which is subsequently included with the 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 be fired after the library snippet.

  3. Select All Pages as the trigger and save the tag. You’re all set with your first tracked event.

Because GTM fires 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.

The “id” parameter will help you target specific elements, and also grab more granular data for your analytics.

  1. Enable the “Click ID” variable in the Variables tab. Use this variable to set up the trigger and 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 or segmentation:
    html
    <script type="text/javascript">  
    var linkID = {{Click ID}} ;   
    mixpanel.track("Link Clicked", {"Link Name": linkID});
    Note that you’re using mixpanel.track() not the special mixpanel.track_links() function. The custom trigger you created handles link identification and the requisite brief delay, so you do not need the specialized tracking call.

  4. To complete the setup, select Click under "Fire On" and select the Link Click trigger that you created in Step 2.

Tracking Forms and Registrations

You can set code to fire on a form submission. In this example, track an event, set an alias, and create a people profile for the newly registered user.

Again, the best practice here is to 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”>. Use this ID to grab the field’s value.

  1. Enable “Form ID” variable in the Variables tab. You’ll use this variable to set up the trigger.
  2. Create a new trigger to capture your signup form submissions. The following configuration tracks the form, and ensures the request has a chance to send before the page changes.
  3. Set up a new "Signup" Custom HTML tag.
    The following code tracks a “Signup” event, sets the user’s ID as an alias for future logins, and creates 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});

    Similar to the Link Tracking example above, you’re using mixpanel.track(), not the special mixpanel.track_forms() function.

    The custom trigger manages form identification and implements the requisite brief delay, so you can use the standard tracking function.

    In this case, you’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. If so, you would need to work with your developer to load that into the GTM data layer and set it as a variable.

  4. Select Click under "Fire On", and select the Form Submission trigger you created in Step 2 to complete the process



Is this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.