omniture Utilities:

What it is, what it does, and how it does it.

IT is a commonjs package


  • It is installable via npm.

  • It uses the require/exports idiom for sharing code between modules (scripts).

  • It is well-tested using Jasmine and requires no browser for unit tests to function.

  • It is packaged for the browser by browserify and grunt


IT consists of several modules


  • events: provides the track_event method for sending a simple or complex data payload in response to an event.

  • storage: methods for storing omiture-related data in localStorage

  • utilities: data transformation and eVar/prop setup tools

  • userdata: specific user  data handling for CMG metrics; also, it is the browserify entry point

events

  • track_event takes a variable number of arguments
  • Examples
    var track_event = cmg.s_coxnews.utilities.track_event;
    // The simple scenario
    $('.myLink').click(function () {
        track_event(42, this,
            ['eVar61', 'prop61', 'a bit of data'],
            'Clicked my link'
        );
    });
    
    // A more complex situation
    $('.myLink').click(function () {
        var args = [42, this];
        args.push(['eVar61', 'prop61', 'a bit of data']);
        if ($(this).parent().is('.feature')) {
            args.push(['eVar63', 'prop72', 'featured']);
        }
        args.push('Clicked my link');
        track_event.apply(null, args);
    });

storage

  • Used primarily to cache data from Janrain currently

  • Automatically namespaces keys to cmg_sc to indicate they are for SiteCatalyst data and JSON [de]serializes them for you

  • Could be used to cache data from any third-party provider or from Medley data

  • store and restore methods
  • store('userdata', {…my user data …});
    
    var userdata = restore('userdata');
    // OR
    restore('userdata', function (data) { …do stuff with userdata… });

utilities

  • Provides tools for complex data transformation and eVar/prop setup
  • transformer: generates configurable transform functions 

var transform_config = [
    ['user.gender', 'gender'],
    ['user.birthday', 'age', function (birthday) {
        var ts = Date.parse(birthday + 'T00:00:00'),
            now = Date.now();
        return Math.floor((now - ts) / (365.25*86400000));
    }],
    ['user.primaryAddress.zip', 'zip']
];
var userdata_transform = transformer(transform_config);
var transformed = userdata_transform({
    user: {
        gender: 'm',
        birthday: '1974-07-03',
        primaryAddress: { street: '123 Main St.', zip: 30303 }
    }
});
// returns { gender: 'm', age: 39, zip: 30303 }

utilities (cont.)

var_setup : sets eVar/prop values based on a config 
[
    [
        int eVar,
        int prop,
        str or fn (prop_path or data transform/gatherer)
    ]
]

var var_config = [
    [7, 7, function (data, raw_data) {
        var signed_in;
        if (raw_data) {
            var action = util.resolver('action', raw_data) || '',
                status = util.resolver('status', raw_data) || '';
            signed_in = (action.indexOf('Signin') !== -1) && status === 'success';
        } else {
            signed_in = document.cookie.indexOf('ur_name') !== -1;
        }
        return signed_in ? 78 : 24;
    }],
    [3, 3, 'gender'], [4, 4, 'age'], [5, 5, 'zip']
];

UTILITIES (CONT)

// returns a function that given a data object
// (typically a transformed one), will iterate the var_config,
// perform any additional transforms, mappings or data gathering
// and return an object containing eVar/prop values
// to be (programmatically) set on cmg.s_coxnews via ($||_).extend.
// eVar7 and prop7 will be set per the data function in var_config's
// first entry, and so on, when userdata_setup is called
var userdata_setup = var_setup(var_config);// userdata_setup's signature: function (data, raw_data, callback) {…// where data is the transformed data and callback is to be called with the resulting eVar/prop container

// returns "eVar7,prop7,eVar3,prop3,eVar4,prop4,eVar5,prop5"
var userdataTrackVars = track_vars(var_config);

it is well tested


  • call npm test to run the test suite

  • testing is done via the Jasmine testing framework

  • the tests do not require a browser, so they are very fast

How it comes to be in MEDLEY-TEMPLATES

  • listed as a dependency in package.json
    "dependencies": {
        "omniture_utilities": "git+ssh://vcs.ddtc.cmgdigital.com/git-repos/omniture_utilities.git"
    }
  • run `npm install` to update in node_modules
  • run `grunt copy:install` to copy the browser build to media/web/common/javascript/modules
  • feel the power 

UPDATING

  • feature branch in omniture_utilities

  • use npm link locally during dev work

  • merge to omniture_utilities master after passing code review

  • npm install && grunt copy:install in medley-templates

commonjs in the browser 

Taking Javascript development from 

to

Omniture Utilities Overview

By Aaron McCall

Omniture Utilities Overview

  • 1,189