Tracking Adverts or Units on a Page Using SiteCatalyst

[#1]

Problem

You want to track which ads or units have loaded onto a page on page load and then measure click-throughs on each one, but you don't know how to do it cleanly and simply in SiteCatalyst and you don't want to use a lot of eVars/props.

Solution

You'll want to do the following:

• Capture your data in arrays in Tealium.
• Use Tealium to build a double-delimited string in Tealium iQ.
• Use a list variable in SiteCatalyst to capture this data.
• Use the Classification Rule Builder in SiteCatalyst to split your data into the relevant reports.

Disclaimer : As SiteCatalyst is an Adobe tool, we won't be describing the exact steps required - you will need some prerequisite knowledge of SiteCatalyst and Admin access to the report suite.

Step-By-Step Guide

1. Set your arrays and event flag for impressions as follows in the UDO on the page.

Incorporate advert arrays of your choice into the page (and also a string to denote there was an ad impression):

utag_data = {
    ...other page data (e.g "page_name")...
    advert_sizes:["728x90","300x250"],
    advert_types:["leaderboard","mpu"],
    advert_names:["car ad","drink ad"],
    advert_action:"impression"
}

2. Set your arrays and event flag for a click for any utag.link() calls which should be triggered on an ad click.

Incorporate advert arrays of your choice into a utag.link() call (and also a string to denote there was an ad click) but only for the item you have clicked on:

utag.link({ 
    ...other page data (e.g "page_name")... 
    advert_sizes:["728x90"],
    advert_types:["leaderboard"],
    advert_names:["car ad"], 
    advert_action:"click"
 });

If you're unsure about what utag.link() is, then please refer to this guide. The utag.link() function is something your developers should implement on actions that you want to track on your site.

3. Use the following extension to compile your arrays into a string which SiteCatalyst can use.

Add this code as a JavaScript Code Extension to create a new data source which you'll use as a list var in SiteCatalyst:

Note: you can configure the names of your arrays and the data source you will be outputting at the top of this extension.

// USER CONFIGURATION : area to configure this script
var advert_arrays = "advert_names,advert_sizes,advert_types"; // list your arrays separated by a ',' here
var list_name = "advert_list"; // declare name of data source you want your list to be named as
/*
###################################
### DO NOT EDIT BELOW THIS LINE ###
###################################
*/
var advert_data_object = {
    arrays: advert_arrays.split(',')
};
// FUNCTION : Type checker
function toType(obj) {
    return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
}
// FUNCTION : Array builder
function buildArray(num, whatTo) {
    var arr = [];
    for (var i = 0; i < num; i++) {
        arr.push(whatTo);
    }
    return arr;
}
// FUNCTION : Array slicer
function slicer(varName) {
    if (b[varName]) {
        b[varName] = b[varName].slice(0);
    }
}
// FUNCTION : Length checker
function lengthCheck(varName, how_long) {
    if (b[varName].length !== how_long) {
        return false;
    }
}
// FUNCTION : Replace reserved characters
function charReplace(varName) {
    if (b[varName][i]) {
        b[varName][i] = b[varName][i].replace(/\|/g, "");
        b[varName][i] = b[varName][i].replace(/\:/g, "");
    }
}
// FUNCTION : Array checker
function arrayChecker(varName) {
    if(b[varName]){
        if (toType(b[varName]) !== "array") {
            advert_data_object.run = false;
        } else {
            advert_data_object.length = b[varName].length;
        }
    }
}
// Set 'run' to true
advert_data_object.run = true;
// Check array exists
for (var i = 0; i < advert_data_object.arrays.length; i++) {
    arrayChecker(advert_data_object.arrays[i]);
}
if (advert_data_object.run === true && advert_data_object.length) {
    // Slice vars    
    for (var i = 0; i < advert_data_object.arrays.length; i++) {
        slicer(advert_data_object.arrays[i]);
    }
    // Set Override vars
    for (var i = 0; i < advert_data_object.arrays.length; i++) {
        if (toType(b[advert_data_object.arrays[i]]) !== 'array') {
            b[advert_data_object.arrays[i]] = buildArray(advert_data_object.length, "not set");
        }
    }
    // Ensure arrays are the same length
    if (advert_data_object.run !== false) {
        for (var i = 0; i < advert_data_object.arrays.length; i++) {
            advert_data_object.run = lengthCheck(advert_data_object.arrays[i], advert_data_object.length);
        }
    }
    // Only run further code of lengths match
    if (advert_data_object.run !== false) {
        // Create list variable
        b[list_name] = [];
        // Join arrays
        for (var i = 0; i < advert_data_object.length; i++) {
            //Replace reserved chars
            for (var i2 = 0; i2 < advert_data_object.arrays.length; i2++) {
                charReplace(advert_data_object.arrays[i]);
            }
            b[list_name][i] = [];
            for (var i2 = 0; i2 < advert_data_object.arrays.length; i2++) {
                b[list_name][i].push(b[advert_data_object.arrays[i2]][i]);
            }
            // Join array with ":"
            b[list_name][i] = b[list_name][i].join(':');
        }
        // Convert 'sc_advert_list' to string
        b[list_name] = b[list_name].join('|');
    }
}

4. Ensure your arrays and the 'advert_action' data source has been added in Tealium iQ.

Go to the 'Data Layer' tab and add your data sources so we can map them in the next step:

5 . Map your data sources in the 'Mapping Toolbox' in the SiteCatalyst tag:

Firstly, we'll want to map the data source you're storing the list in ( advert_list in this example) to 'List 1' (s.list1 in SiteCatalyst):

Next, we'll want to map events to the 'view' and 'click' actions we've set for when an ad is viewed or clicked (against the advert_action data source):

6. Configure SiteCatalyst

Disclaimer: You are now outside of Tealium so we won't be describing the exact steps required, so you will need some prerequisite knowledge of SiteCatalyst and Admin access to your report suite.

Firstly, ensure your list var is enabled and is set to split on a '|' and will expire after a hit:

Secondly, create classifications against your new list var for your array names:

Thirdly, ensure event1 and event2 are set up to track ad views and clicks, respectively:

Finally, use the Classification Rule Builder to auto-classify data coming in:

7. You're done!

You should now start receiving data in reports which are easy to access and correlate against one another in SiteCatalyst (or Ad Hoc):

You can easily replicate this process and use different arrays and list vars instead of the names we've used above, e.g., you may want to use different arrays to capture internal promotional units on the page and push them into new data source which is mapped to list var 2.