Tracking Drupal's Fivestar with Google Analytics

Google Analytics can track more than just page views! Here's a simple Drupal module that records an event when a visitor rates content with Fivestar.

fivestar_ga.js

/**
 * @file
 * Records a google analytics event when a fivestar rating is made.
 */
 
Drupal.behaviors.fivestarGA = function(context) {
  $('.fivestar-widget .star', context).click(function() {
    $form = $(this).parents('form');
    var contentPath = $("[name=content_path]", $form).val();
    var rating = $(this).parent().find('.star').index(this) + 1;
    _gaq.push(['_trackEvent', 'Rating',
      rating + ' star', contentPath]);
  });
};

fivestar_ga.module

<?php
/**
 * Fivestar / Google Analytics integration.
 */
 
/**
 * Implements hook_form_alter().
 */
function fivestar_ga_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'fivestar_custom_widget' ||
    strstr($form_id, 'fivestar_form_node_')) {
 
    // Store the content path in the rating form.
    // This will be used later as an identifier for the event.
    if ($form['content_type']['#value'] == 'node') {
      $content_path = drupal_get_path_alias('node/' .
        $form['content_id']['#value']);
      $form['content_path'] = array(
        '#type' => 'hidden',
        '#value' => $content_path,
      );
    }
  }
}
 
/**
 * Implements hook_init().
 */
function fivestar_ga_init() {
  if (user_access('rate content')) {
    drupal_add_js(drupal_get_path('module', 'fivestar_ga') .
      '/fivestar_ga.js');
  }
}
Filed under:

Comments

Can you expand on the benefits of this approach - why would someone want to do it?

What does it change on the GA side that is helpful?

It's just a different way to visualize the data - pushing events into Analytics gives you access to a variety of charts and reports. Visits that include events aren't counted as bounces, so it can also lower your bounce rate.

Here's a screenshot of what event tracking looks like:

analytics screen capture

A slight modification which passes on the value to GA, for example a 5 star rating would give return 5 - then in GA you can find the average value of rating etc:

_gaq.push(['_trackEvent', 'Rating',
rating + ' star', contentPath, rating]);

Hi,

Nice script. Do you know if something similar can be used to track data that a user enters into an exposed filter in views with the operator "contains"? I expose a text field to search through title fields of a content type and would like to track what users actually type in... Thanks, Jens

There is no need to store the path of the page in a hidden form field. Just use window.location.pathname in the javascript. Then you can eliminate the hook_form_alter completely.

Drupal.behaviors.fivestarGA = function(context) {
$('.fivestar-widget .star', context).click(function() {
var rating = $(this).parent().find('.star').index(this) + 1;
_gaq.push(['_trackEvent', 'Rating', rating + ' star', window.location.pathname, rating]);
});
};

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Ready for transformation?