Drupal Technical

How to gets alerts on document downloads using Google Analytics

Thomas.john | | 2 min read

While working on a WordPress site one of the requirement was that client should get alerts on document downloads. In-order to achieve this we implemented an event tracking functionality for the site. In this article I will be explaining different methods to track an onlick event using jquery and get the updates in Google Analytics.

In your site if you have a multiple files to download, say .doc, .pdf, .txt etc, we could easily track this using a Google Analytics.

First step is to create a Google Analytics Account which helps you to generate the ID to track all your site actions.

Now download and enable the Google Analytics plugin for your site. In Google analytics settings page 'wp-admin/options-general.php?page=googleanalytics' enter the ID generated in Google Analytics site.

You can view the event details in Google Analytics Site path "All Website Data --> Content--> Event--> Overview".

Here comes the tracking part. Different ways to implement this is shown below

Simple way to do this is by calling an onClick event in corresponding a tag. See the code below


 <a href="URL/filepath/filename.pdf" onClick="_gaq.push(['_trackEvent', 'PDF', 'PDF_Download', 'Filename']);">Click to Download</a>

But its not a good practice. Instead of this we could call this event using a jquery.

In case of Wordpress site

Create a js file in "wp-content/themes/theme_folder/js/name.js. Now enter the following code.

Following code is to track a single pdf file.



$(document).ready(function() {
    $('a[href$="filename.pdf"]').click(function() {
        _gaq.push(['_trackEvent', 'PDF Downloads', 'PDF_Download', $(this).attr('href')]);
    });
});

To track all the pdf files together, use the follwoing code



$(document).ready(function() {
    $('a[href$="pdf"]').click(function() {
        _gaq.push(['_trackEvent', 'PDF Downloads', 'PDF_Download', $(this).attr('href')]);
    });
});

Now you can call this function in the corresponding page where the file download is available, by inserting follwoing code


 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/name.js"></script>

In case of Drupal website

Create a js file in "sites/all/themes/theme_folder/js/name.js. Now enter the following code.

Following code is to track a single pdf file.



(function($){
  Drupal.behaviors.pdbfileonedownload = function (context) {
    $('a[href$="Pdffileone.pdf"]').click(function() {
        _gaq.push(['_trackEvent', 'PDF', 'PDF_Download', $(this).attr('href')]);
    });
  }
}(jQuery));

To track all the pdf files, use the follwoing code



(function($){
  Drupal.behaviors.pdbfiledownload = function (context) {
    $('a[href$="pdf"]').click(function() {
        _gaq.push(['_trackEvent', 'PDF', 'PDF_Download', $(this).attr('href')]);
    });
  }
}(jQuery));

You can define this js file in corresponding info file as shown below.


scripts[] = js/name.js

If you want to the js file for particlar pages then you can do this using preprocess_page function. Here using function drupal_add_js we could add the js file. See the code below.



function theme_name_preprocess_page(&$vars) {
  /*By checking URL arguments and calling js*/
  if (arg(0) == 'users' || arg(0) == 'user') {
    drupal_add_js(drupal_get_path('theme', 'theme_name') . '/js/name.js');
    $vars['scripts'] = drupal_get_js();
  }
  
  /*By checking node yupe and calling js*/
  if ($vars['node']->type == 'problem') {
    drupal_add_js(drupal_get_path('theme', 'theme_name') . '/js/name.js');
    $vars['scripts'] = drupal_get_js();
  }
}

Hope you came to know how to track an event using jQuery and Google Analytics. If you have any doubts/queries regarding this feel free to comment below.

Reference URL : https://developers.Google.com/analytics/devguides/collection/analyticsj…

 

 

Related Topics