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.

Wednesday, February 2, 2011

Taggage automatique de liens d'événement avec jQuery

Imaginons que vous devez tagger un site de 20 000 pages et devez ajouter des tags d'évènemet sur celles-ci. Que de travail.

Voici un bout de code en jQuery que j'ai developper pour m'aider à faire exactement ça. Ici, le taggage est effectué avec Coremetrics, mais il serait très facile de modifer ce code pour n'importe quel autres tags.

// 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.
}

Ce javascript inspecte chacun des liens dans une page et vérifie si celui-ci ne contient pas déjà un tag d'évènements mais devrais en contenir un. Si il en trouve, il l'ajoute au onclick et au onkeypress et initialise celui-ci ensuite.

Amusez-vous bien et laisser moi savoir ce que vous en pensez.