Since click tracking is implemented in almost every project these days, new ways of triggering events and sending tracking code are very important and vary from project to project. With this context in mind, I was asked to implement tracking code on several links. Each link had different tracking ID’s for each language. Since our content for each language is fetched from the DataBase our basic HTML stays the same.


>> 

Adding the onclick event as an attribute is one thing, but adding it with different tracking code in another language is something else. This is where jQuery helped me out since targeting elements and triggering events … well … is basically something jQuery is very good at.

var AdformTracking = function (lang) {
    // Init variables
    var cId = 25910;
    var adformMap = {
        "sv-SE": {
            0: 350591,
            1: 350592,
            2: 350593,
            3: 350594,
            4: 350595,
            5: 350596,
            6: 350597,
            7: 350598
        },
        "fi-FI": {
            0: 350567,
            1: 350568,
            2: 350569,
            3: 350570,
            4: 350571,
            5: 350572,
            6: 350573,
            7: 350574
        }
    };
    var buyNow = $("#header .dealer a:first");
    var whereToBuy = $("#header .dealer a:last");
    var promoItem1 = $(".promoItem .button a").get(0);
    var promoItem2 = $(".promoItem .button a").get(1);
    var promoItem3 = $(".promoItem .button a").get(2);
    var promoItem4 = $(".promoItem .button a").get(3);
    var pdf = $(".banners .pdf a");
    var facebook = $(".banners .facebook a");

    var clickArr = [buyNow, whereToBuy, promoItem1, promoItem2, promoItem3, promoItem4, pdf, facebook];

    // Events
    $(clickArr).each(function (i, item) {
        $(item).click(function () {
            Adform.Tracking.Track(cId, adformMap[lang][i], "");
        });
    });
};

What I did was adding a parameter “lang” to my function so I can switch mapping in the adformMap variable. Once set up I target my elements with jQuery. Enlist all the jQuery objects in the clickArr. Loop over the clickArr and add for each item a click event trigger. Inside the click event we’ll be executing a function which can be our tracking code.

The position of the jQuery object in the clickArr matches the numeric value in the adformMap.

adformMap["sv-SE"][4]

On execution this will give you “350595″.

A couple of benefits popup into my mind …:

  • All your tracking code can be mapped in one file (or script)
  • Easier to add languages
  • More easy to add links to track
  • Your HTML code stays nice and clean (if you didn’t mess that up already ofcourse :p)

Works like a charm!