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.

No comments: