Setting up Mixpanel pageview and click tracking for WordPress

Posted in: Code, Marketing, Work on December 2nd, 2014
MixPanel trends report showing WordPress page categories
MixPanel trends report showing WordPress page categories

I have been playing around with Google Tag Manager, MixPanel and event tracking for my blog today. For those who haven’t tried MixPanel, you should definitely check it out! It’s free for small websites and it has excellent event tracking features, funnel tracking and allows you to set identities and send automated notifications to your users. I have been using this in combination with Google Analytics to track funnels on client sites and while the two work nicely in harmony together, I have found MixPanel much better for event tracking. But I digress…

Given my blog’s increase of traffic caused by my incessant baby-photo-taking, I thought I would setup MixPanel for my blog too. I don’t really have any conversions or funnels to track, so I just set up some generic click and pageview tracking. I did, however, want to identify and segment by different page types. To enable this, I added some WordPress conditional statements to display the appropriate MixPanel script, depending on the page type.

This script is intended to be included in footer.php (or in some other location that includes it ubiquitously) so it can track pageviews and clicks for all pages. While I understand tracking every page view and click is not necessarily MixPanel best practice, I wanted to have the flexibility to setup any crazy funnels I wanted, so I’m tracking everything. In order for this to work, you must have a MixPanel account and have MixPanel tags setup on your website.

MixPanel trends report showing tracked clicks by destination URL
MixPanel trends report showing tracked clicks by destination URL

The first component is the link click tracking (see documentation). This is basically copied directly from the mixpanel.track_links documentation. The only thing I changed was the DOM query from #nav a to just a, to ensure all anchors are tracked by MixPanel. MixPanel automatically tracks the destination URL, and the line "referrer": document.referrer sets a property to track the URL the link was clicked on.

1
2
3
4
5
6
7
<!-- MixPanel Link click tracking -  track clicks for all links -->
<script type="text/javascript">// <![CDATA[
mixpanel.track_links("a", "Link Click", {
      "referrer": document.referrer
    });
  // ]]>
</script>
<!-- MixPanel Link click tracking -  track clicks for all links -->
<script type="text/javascript">// <![CDATA[
mixpanel.track_links("a", "Link Click", {
      "referrer": document.referrer
    });
  // ]]>
</script>

The second component is the pageview tracking, which uses WordPress conditional tags to insert MixPanel scripts with slight different properties, depending on the page type.

First, we use a conditional tag to set the WordPress page type for which the script will display.

1
<!--?php if( is_page()) { ....... } ?-->
<!--?php if( is_page()) { ....... } ?-->

Then we use the mixpanel.track function, and setup the second argument as a properties array to set the Page Title to the current page title; URL to current page URL; and Page Type to Page (or the other nominated page type):

1
2
3
mixpanel.track('Page View', {
  'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Page' 
});
mixpanel.track('Page View', {
  'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Page' 
});

Here is the full script… I will keep the current version as a Gist on GitHub, so in case I forget to update this post, you should View the Gist to get the most recent version.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!-- MixPanel Link click tracking -  track clicks for all links -->
<script type="text/javascript">// <![CDATA[
mixpanel.track_links("a", "Link Click", {
      "referrer": document.referrer
    });
  // ]]>
</script>
 
<!-- MixPanel Pageview tracking -->
<?php if( is_page()) { // Sets page type to Page for all pages ?>
  <script type="text/javascript">// <![CDATA[
    mixpanel.track('Page View', {
      'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Page' 
    });
    // ]]>
  </script>
  
<?php } elseif( is_single()) { // Sets page type to Post for all single posts ?> 
  <script type="text/javascript">// <![CDATA[
    mixpanel.track('Page View', {
      'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Post' 
    });
    // ]]>
  </script>
  
<?php } elseif( is_home()) { // Sets page type to Home for home page ?> 
  <script type="text/javascript">// <![CDATA[
    mixpanel.track('Page View', {
      'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Home' 
    });
    // ]]>
  </script>
  
<?php } elseif( is_category()) { // Sets page type to Category Archive for any category archive page ?> 
  <script type="text/javascript">// <![CDATA[
    mixpanel.track('Page View', {
      'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Category Archive' 
    });
    // ]]>
  </script>
 
<?php } elseif( is_tag()) { // Sets page type to Tag Archive for any tag archive page ?> 
  <script type="text/javascript">// <![CDATA[
    mixpanel.track('Page View', {
      'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Tag Archive' 
    });
    // ]]>
  </script>
  
<?php } else { // Sets page type to Other for other pages not mentioned above ?> 
  <script type="text/javascript">// <![CDATA[
    mixpanel.track('Page View', {
      'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Other' 
    });
    // ]]>
  </script>
<?php } ?>
<!-- MixPanel Link click tracking -  track clicks for all links -->
<script type="text/javascript">// <![CDATA[
mixpanel.track_links("a", "Link Click", {
      "referrer": document.referrer
    });
  // ]]>
</script>

<!-- MixPanel Pageview tracking -->
<?php if( is_page()) { // Sets page type to Page for all pages ?>
	<script type="text/javascript">// <![CDATA[
		mixpanel.track('Page View', {
			'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Page' 
		});
		// ]]>
	</script>
	
<?php } elseif( is_single()) { // Sets page type to Post for all single posts ?> 
	<script type="text/javascript">// <![CDATA[
  	mixpanel.track('Page View', {
  		'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Post' 
  	});
  	// ]]>
	</script>
	
<?php } elseif( is_home()) { // Sets page type to Home for home page ?> 
	<script type="text/javascript">// <![CDATA[
  	mixpanel.track('Page View', {
  		'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Home' 
  	});
  	// ]]>
	</script>
	
<?php } elseif( is_category()) { // Sets page type to Category Archive for any category archive page ?> 
	<script type="text/javascript">// <![CDATA[
  	mixpanel.track('Page View', {
  		'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Category Archive' 
  	});
  	// ]]>
	</script>
 
<?php } elseif( is_tag()) { // Sets page type to Tag Archive for any tag archive page ?> 
	<script type="text/javascript">// <![CDATA[
  	mixpanel.track('Page View', {
  		'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Tag Archive' 
  	});
  	// ]]>
	</script>
	
<?php } else { // Sets page type to Other for other pages not mentioned above ?> 
	<script type="text/javascript">// <![CDATA[
  	mixpanel.track('Page View', {
  		'Page Title' : document.title,'URL' : window.location.pathname,'Page Type':'Other' 
  	});
  	// ]]>
	</script>
<?php } ?>
Share This:

One Response to “Setting up Mixpanel pageview and click tracking for WordPress”

Leave a Reply to Clobbe