A Veeva ClickStream helper class for page and event tracking. *Requires veeva-library.js

ClickStream.js

/**
 * Veeva ClickStream tracking class.
 * 
 * Author: Jeremy Daley
 * Liscence: MIT
 */

ClickStream.prototype.virtualInterval   = -1;
ClickStream.prototype.calls             = []; // Queued calls
ClickStream.prototype.debug             = false;

function ClickStream(debug){
    if (debug !== undefined)
        this.debug = debug;
}

/**
 * This is an event call, with a zero duration. It's used for tracking
 * things like clicks.
 * 
 * @param  {string} id          Track Element Id
 * @param  {string} type        Track Element Type
 * @param  {string} description Track Element Description
 */
ClickStream.prototype.trackEvent = function(id, type, description){
    var self = this;
    var obj = {
        'Track_Element_Id_vod__c':          id,
        'Track_Element_Type_vod__c':        type,
        'Track_Element_Description_vod__c': description,
        'Usage_Start_Time_vod__c':          new Date(),
        'Usage_Duration_vod__c':            1
    };

    if (self.debug)
        console.log('trackEvent:', obj);

    self.queue('create', 'Call_Clickstream_vod__c', null, obj, self.noop);
};

/**
 * This is a page tracking call, that should be started at the load of a page. It uses a 
 * timer to continually update the duration on the page
 * 
 * @param  {string} id          Track Element Id
 * @param  {string} type        Track Element Type
 * @param  {string} description Track Element Description
 */
ClickStream.prototype.trackPage = function() {
    var self = this;
    var obj = {
        'Track_Element_Type_vod__c':        'Page View',
        'Usage_Start_Time_vod__c':          new Date(),
        'Usage_Duration_vod__c':            1
    };

    if (self.debug)
        console.log('trackPage:', obj);

    self.queue('create', 'Call_Clickstream_vod__c', null, obj, function(data){
        var duration = 1;
        // Every second, we need to update the Duration field for this record
        window.setInterval(function(){
            duration++;
            obj['Usage_Duration_vod__c'] = duration;

            self.queue('update', 'Call_Clickstream_vod__c', data.Call_Clickstream_vod__c.ID, obj, self.noop);
        }, 1000);
    });
};

/**
 * Track a section within a key message, like for tabs
 * @param  {string} pageName The name of the virtual section
 */
ClickStream.prototype.trackVirtualPage = function(id, description){
    // First clear the tracking of a previous virtual pageview
    window.clearInterval( this.virtualInterval );

    var self = this;
    var obj = {
        'Track_Element_Id_vod__c':          id,
        'Track_Element_Description_vod__c': description,
        'Track_Element_Type_vod__c':        'In-Page View',
        'Usage_Start_Time_vod__c':          new Date(),
        'Usage_Duration_vod__c':            1
    };

    if (self.debug)
        console.log('trackVirtualPage:', obj);

    self.queue('create', 'Call_Clickstream_vod__c', null, obj, function(data){
        var duration = 1;
        // Every second, we need to update the Duration field for this record
        self.virtualInterval = window.setInterval(function(){
            duration++;
            obj['Usage_Duration_vod__c'] = duration;

            self.queue('update', 'Call_Clickstream_vod__c', data.Call_Clickstream_vod__c.ID, obj, self.noop);
        }, 1000);
    });
};

/**
 * Veeva can't take more than one action at a time, so we have to queue up each call
 * @param  {string}   action   Something like 'Call_Clickstream_vod__c'
 * @param  {string}   type     'update' or 'create'
 * @param  {object}   obj      Tracking fields/values to send to Veeva
 * @param  {Function} callback 
 */
ClickStream.prototype.queue = function(action, type, id, obj, callback){
    var self = this;
    var call = {
        action:     action, 
        type:       type, 
        id:         id, 
        obj:        obj, 
        callback:   callback
    };
    this.calls.push( call );

    // If this is the first item in the queue, go ahead and call it right away
    if (this.calls.length == 1)
        makeCall( call );

    function makeCall(call){
        console.log(call);
        switch( call.action ) {
            case 'update':
                com.veeva.clm.updateRecord(call.type, call.id, call.obj, queueCallback);
                break;
            case 'create':
                com.veeva.clm.createRecord(call.type, call.obj, queueCallback);
                break;
        }
        // If we're running in debug mode, we wanna make act like the records were successfully created/updated
        if (self.debug === true)
            queueCallback( {Call_Clickstream_vod__c: {ID: new Date().getTime()}} );
    }

    function queueCallback(data, _action){
        // Call the original callback function
        self.calls[0].callback( data );
        // Remove the current item in the queue
        self.calls.shift();

        // If there's anything left in the queue, let's call it.
        if (self.calls.length > 0)
            makeCall( self.calls[0] );
    }
}

/**
 * A callback "ground".
 */
ClickStream.prototype.noop = function(data){
    // Do nothing   
};

Is it possible to add clickstreamtracking to a deep html5 using a js ? We've created long presentations (100 pages) and automatically generate deep or wide html5 files that can be used in Veeva or Pitcher and would like to add tracking to them in a efficient way...

Thanks!