|  Register

Adobe Tag Manager - Deferred Asynchronous Function Calls For SiteCatalyst

by brett hale in Omniture

Here is the code that makes it all work. I'll break this down by function followed by how to implement it.

var sQueue = function () {
    var queue_now = [], queue_post = [], now_flushed = false, post_flushed = false, queue = [], i = 0;
    function run_queue(q) {
        if (q === 'post') {
            queue = queue_post;
            queue_post = [];
            post_flushed = true;
        } else if (q === 'now') {
            queue = queue_now;
            queue_now = [];
            now_flushed = true;
        }
        for (i = 0; i < queue.length; i++) {
            do_fire(queue[i]);
        }
    }

    function run_now() {
        if(now_flushed) {
            do_fire(arguments);
        } else {
            queue_now.push(arguments);
        }
    }

    function run_post() {
        if (post_flushed) {
            do_fire(arguments);
        } else {
            queue_post.push(arguments);
        }
    }

    function do_fire(args) {
        var b = [];
        for (i = 0; i < args.length; i++) { b[i] = args[i]; }
        var t = window.s;
        t[b[0]].apply(t,b.slice(1));
    }
    return {
        now_flushed: now_flushed,
        post_flushed: post_flushed,
        run_now: run_now,
        run_post: run_post,
        run_queue: run_queue
    };
}();

These are the functions you will use to call your custom tracking functions. As you would expect, sQueue.run_now() will call your functions as soon as they are ready. The sQueue.run_post() function will fire your functions after the main SiteCatalyst pixel. The way I have it implemented, you have to create your functions within your s_code namespace. Most implementations I've seen use 's' but you can change this if needed. I'll explain how a bit later. Now, here's a brief explanation of these functions. Simply put, these functions check to see if the queue has been run already and if it has, fire the functions. If it hasn't, we'll add it to the queue of functions to be called later.

    function run_now() {
        if(now_flushed) {
            do_fire(arguments);
        } else {
            queue_now.push(arguments);
        }
    }

    function run_post() {
        if (post_flushed) {
            do_fire(arguments);
        } else {
            queue_post.push(arguments);
        }
    }

The sQueue.run_queue() function takes two parameters: now and post. This function is called as a trigger to run the functions in the applicaable queue ie. flush it.

    function run_queue(q) {
        if (q === 'post') {
            queue = queue_post;
            queue_post = [];
            post_flushed = true;
        } else if (q === 'now') {
            queue = queue_now;
            queue_now = [];
            now_flushed = true;
        }
        for (i = 0; i < queue.length; i++) {
            do_fire(queue[i]);
        }

My custom tracking functions are defined right after the SiteCatalyst object is created with the var s=s_gi(s_account) and I have the sQueue.run_queue('now') in with the product code for sitecatalyst immediately after all my plugin functions are defined.  This makes sure you can also use plugin functions in your custom functions. Next, I have the sQueue.run_queue('post') function called in the dependent code block after the product code. This way, I know the main pixel for SiteCatalyst has fired and I can safely run the queued up functions. When these now and post functions are called, the queues are emptied and any future calls to my custom functions will be run immediately.

The last piece is where you can change your object variable. Just change the highlighted line to set t equal to your object.

    function do_fire(args) {
        var b = [];
        for (i = 0; i < args.length; i++) { b[i] = args[i]; }
        var t = window.s;
        t[b[0]].apply(t,b.slice(1));
    }

I'm sure there are many ways to get this done and feel free to improve upon this one.

Comments

Gravatar

brett hale

2013-07-16

ATM 2.0 is already asynchronous and provides callback functions for dealing with function calls. If you have any specific questions, feel free to contact me via linked in.

Gravatar

2013-07-16

Thanks for this writeup. Is this functionality needed only for Adobe Tag Manager 1.0 or is it also needed for ATM 2.0 as well?

Any other info/experience about Adobe Tag Manager is welcome!

Post a comment


StraightFromHale.com
  • Top ↑
  • ©2017 StraightFromHale.com. All Rights Reserved.