Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Mixpanel event tracking using Google Tag Manager

Parent Feed: 
Websolutions Agency

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  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 snippet:
mixpanel.track("Blog page loaded");

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:

Login
  • Create new tag and name it e.g. "Login link clicked"
  • Select Tag Type "Custom HTML tag" and add your code into
Author: 
ws_admin
Original Post: 
https://ws.agency/blog/mixpanel-event-tracking-using-google-tag-manager

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web