Add and Track Any Link With Google Analytics

This post is a follow-up to the "Use Google Analytics Instead of the Statistics Module" post. If you want to use Google Analytics for all of your site statistics, you may need to add links that the google_analytics module can't handle. The google_analytics module is great, and handles almost everything you may need, including clicks on external links. In some cases, however, it has no way to track an external click.

I was recently presented with the problem of tracking clicks on an "Add This" dropdown. The drop-down handles everything in javascript, so the "links" don't even have an anchor tag. Each one is made up of a div with an onClick event attached. Fortunately, we can add an event listener to the AddThis drop-down in jQuery, then add our share click with one line of code. Here is an example:

  $(function() {
    var add_button = null;
    addthis.addEventListener('addthis.menu.share', shareEventHandler);
    $('.addthis_button').mouseover(function() {
      add_button = $(this);
    });
    function shareEventHandler(evt) {
      if (evt.type == 'addthis.menu.share') {
        pageTracker._trackPageview(add_button.attr('addthis:url') + '/share/' + evt.data.service);
      }
    }
  });

In the above example, an event listener is being added on 'addthis.menu.share', which is when a user clicks on one of the share links. I've also added a mouse-over event to all buttons with the '.addthis_button' class, since we have more than one share button on a page. This is where I set the button the user is currently using.

Since AddThis requires a special attribute (addthis:url), I can simply grab that attribute in the event handler, and add it to the Google Analytics tracker. In this case, we created a fake share link for the node types being shared (for example, blog/22/share or blog/22/share/facebook). When someone tries to go to the link directly, it will redirect them back to the home page, so the share is only tracked when someone actually clicks on one of the links in the drop-down.

The next step would be to use the techniques outlined in the last blog post to properly track these links in a useful format. In the case above, we've taken an external click and transformed it into an internal click. For example, a click to share the link blog/22 on Facebook would result in an internal click to the link blog/22/share/facebook. If we wanted to see how many people shared any blog on any site, we could set our filter to the following:

$filter = 'pagePath =~ /blog/[0-9]+/share';

and if we wanted to see how many people shared any blog post on Facebook, we could set our filter to the following:

$filter = 'pagePath =~ /blog/[0-9]+/share/facebook';

But what about clicks to actual external links? Let's say our site has user profiles, and users are able to enter a website URL to display on their profile. We can tell the google_analytics module to track clicks to external links, but how do we track these clicks using the techniques outlined in the last blog post? Well, the google_analytics module tracks these clicks as an "Event". So if we wanted to see how many times someone clicked on the external website link for a particular profile (using a content_profile node), we would write something like the following:

<?php
  $website 
db_result(db_query("SELECT field_website_value FROM {content_field_website} WHERE nid = %d"$nid));
  
// Always add an ending slash
  
if (substr($website, -1) !== '/') {
    
$website .= '/';
  }
  
$request = array(
    
'#metrics' => array('uniqueEvents'),
    
'#filter' => 'eventLabel == '.$website,
    
'#start_date' => $start_date,
    
'#end_date' => $end_date,
    
'#start_index' => 1,
    
'#max_results' => 1,
  );
  try {
    
$entries google_analytics_api_report_data($request);
  }
  catch (
Exception $e) {
    return 
$e->getMessage();
  }
  if (!empty(
$entries)) {
    foreach (
$entries as $entry) {
      
$metrics $entry->getMetrics();
      
$stats['more info'] = $metrics['uniqueEvents'];
    }
  }
?>

The code above will get the total number of events involving the external website. Since the google_analytics module only tracks click events for these links, there's no reason to further narrow the events to look at click events. If you wanted to track all external click events, however, you would set your filter to the following:

$filter = 'eventCategory==Outgoing links && eventAction==Click";

Comments

dalin (not verified)

In the JavaScript you used
$(function() {});
which is a short-form for
$(document).ready(function() {});
However event binding, since it doesn't affect the appearance of the page, should generally be done using
$(window).load(function(){});
Which fires after the page has rendered. This will result in a page that renders faster.

Also you may want to investigate using Drupal.behaviors since nodes (and hence addThis links) can be added via AHAH after the page has loaded.

Nice work though. Using GA for stats is a great idea.

Recent Posts

6.29.2012
By: Matthew Krick | 0 Comments
6.27.2012
By: Evan Jenkins | 4 Comments
3.14.2012
By: Tom Friedhof | 1 Comment
2.28.2012
By: Tom Friedhof | 9 Comments
Twitter icon
Facebook icon
Flickr icon