Saturday, February 5, 2011

How to use jQuery to automate page tagging

Hello,

Here a jQuery script to help you tag your pages. Here, I use Coremetrics Event tagging, but you could also easily modify this script to use Google Analytics or any other web analytics solution.

Basicly, this script scan the page for find link that must be tagged (as define in tagList array). If the link already contain a event tag, this link is skipped. Coremetrics have a system to initiate event tag, so once the tagging is added to the onclick and onkeypress DOM event, the event is then initiated once.

// Licensed under the GPL Version 2 licenses.
try {
  // Make sure JQuery doesn't conflict with other JavaScript libraries. (Should be use just after the libraries declaration.)
  jQuery.noConflict();
  
  // Array containing conversion event tag information.
  //   - URL to look for. (See note)
  //   - Conversion event name.
  //   - Conversion event categories name.
  //   - Conversion event point when initialized.
  //   - Conversion event point when completed.
  // Note: The order in the array is important.
  // For example, don't put "/stores/" before "/stores/locator.html".
  var tagList = [
    ['/contact-us/', 'Contact us', 'Call-to-action', '0', '10'],
    ['/online-application/', 'Apply online', 'Call-to-action', '0', '100']
  ];

  // List the detected tags that must be initiated.
  var tagDetected = [];

  // Check for link that need to be tagged. Make sure is not already tagged.
  jQuery(document).ready(function(){
    jQuery("a:not([onclick*='cmCreateConversionEventTag'])").each(function(index) {
      if (this.href != '') {
        var i = findConversionLink(this.href);
        if (i != -1) {
          // Check if that tag have been already detected (so we won't initialize the same tags multiple time.)
          if (jQuery.inArray(i, tagDetected) == -1) {
             tagDetected.push(i);
          }
        }
      }
    });

    // Founded some tag that need to be initiated?
    if (tagDetected.length > 0) {
      for (var i = 0; i < tagDetected.length; i++) {
        for (var j = 0; j < tagList.length; j++) {
          if (j == tagDetected[i]) {
              cmCreateConversionEventTag(tagList[j][1], "1", tagList[j][2], tagList[j][3]);
          }
        }
      }
    }

    // Add the conversion event tag to the onlick and onkeypress event of the link (if not already present)
    jQuery("a:not([onclick*='cmCreateConversionEventTag'])").live('click keypress', function() {
      var i = findConversionLink(this.href);
      if (i != -1) {
        cmCreateConversionEventTag(tagList[i][1], "2", tagList[j][2], tagList[i][4]);
      }
    });
  });

  // Check if a URL exsit in the array.  If so, return "first" founded index.
  // This is why we need to put "/stores/locator.html" before "/stores/" in the tagList array.
  function findConversionLink (a_sURL) {
    for (var i = 0; i < tagList.length; i++) {
      if (a_sURL.indexOf(tagList[i][0]) != -1) {
        return i;
      }
    }
    return -1;
  }

}
catch (err) {
  // Do nothing.
}

Let me know if you found this script useful.

3 comments:

jfverville said...

Bravo Sébastien, je viens de découvrir ton blog, c'est super intéressant.

JF

Sébastien Brodeur said...

@jfverville Merci!

Palm Beach Vending Machine said...

The event is then initiated once.
Palm Beach Vending Machine