Implementing Mixpanel with Google Tag Manager

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

Google Tag Manager Custom Template

Custom templates allow you to write your own tag and variable definitions so that others within your organization can use them alongside the built-in tag and variable templates. The permission-centric, sandboxed nature of custom templates makes it possible to write custom tags and variables in a safer, more efficient manner than when using custom HTML tags and custom JavaScript variables.

Reference: https://developers.google.com/tag-platform/tag-manager/templates

The Mixpanel Google Tag manager template replicates the functionality of the Mixpanel JS SDK.

It utilizes a custom  JavaScript wrapper to overcome the restrictions GTM's templating system places on available JavaScript APIs.

To use the template, add it to your workspace from the Google Tag Manager community template gallery.

Walkthrough video

Initialization

When any Mixpanel GTM tag fires, it automatically tries to initialize a new instance using the Initialization Options configured in the tag. If an instance with the given name has already been initialized on the page, the initialization process is skipped.

Sending data to Mixpanel

After adding the Project Token to its respective field, you need to choose what type of tag to use. Each type corresponds with some command you can use as per the Mixpanel JS SDK.

The more complex tag types (group, people, and track) are elevated to the top of the drop-down menu with the - prefix to separate them from the other commands.

Once you select a tag type, additional options may appear. Consult the SDK reference for details on how to configure these options.

Firing the tag

Once you're happy with your tag, you need to add a Trigger to it. For example, to trigger it with every page load, add the All Pages trigger to it. Save the tag when done.

EU Residency

Route data to Mixpanel's EU servers by setting the api_host Option key to https://api-eu.mixpanel.com

Identity Management

Use the identify tag type to keep the identity of your users consistent as described in the Getting Started with Identity Management guide.

Manual Installation

To manually install, follow these steps.

1. Download the ./src/template.tpl file locally from the mixpanel-gtm-template GitHub page.
2. Open a Google Tag Manager Web container via the Google Tag Manager user interface. Preferably one that is already deployed on a website where you can test the template with real use cases.
3. In the GTM UI, browse to Templates, and in the box titled Tag Templates, click the blue New button.
4. Once the Template Editor is open, click the menu (three vertical dots) in the top-right corner of the window and choose Import.
5. Select the template.tpl file you downloaded locally.
6. Follow the prompts. Once the import is complete, the Template Editor should show the Mixpanel template in edit mode.
7. Click Save to save the template, and then proceed to close the Template Editor.
8. In the GTM UI, browse to Tags and click New to create a new tag.
9. From the list of available tag templates, choose the Mixpanel template you just imported to the container.