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.
- Download the
./src/template.tpl
file locally from the mixpanel-gtm-template GitHub page. - 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.
- In the GTM UI, browse to Templates, and in the box titled Tag Templates, click the blue New button.
- Once the Template Editor is open, click the menu (three vertical dots) in the top-right corner of the window and choose Import.
- Select the
template.tpl
file you downloaded locally. - Follow the prompts. Once the import is complete, the Template Editor should show the Mixpanel template in edit mode.
- Click Save to save the template, and then proceed to close the Template Editor.
- In the GTM UI, browse to Tags and click New to create a new tag.
- From the list of available tag templates, choose the Mixpanel template you just imported to the container.
Comments
Please sign in to leave a comment.