Solution: how to trigger tags after X amount of seconds

[AndreScholten]

One of my clients wants to fire a few pixels after 15 and after 30 seconds. Tealium has no standard Load Rule feature to fire tags after X amount of seconds. So the first solution was a custom javascript extension scoped on "Dom Ready": 

setTimeout(function() {

  var example = new Image();
  example.src="http://url-of-pixel";

}, 15000)

I stripped the code as far as I could. In my clients case they have 5 pixels that are fired filled with datalayer elements (utag_data["example"]) and are fired on different pages. And the code was also different in that it counted the amount of seconds a visitor was on a site, and it would count on when navigating to other pages.

The main disadvantage: only people with coding skills could add new pixels. And if they wanted to add new pixels with different cookieconsents (based on if visitors allowed only functional or all cookies), they also needed a coder.

Now I made 3 new extensions to create the firing behavior I want. First the timer extension:

/*
Main script to start a timer that tracks session time per second and stores it in a cookie
*/

function TLD()
{
  var parts = document.domain.split(".");
  return parts[parts.length - 2] + "." + parts[parts.length - 1];
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function createSessionCookie(name,value) {
  document.cookie = name + "=" + value + ";domain=" + TLD() + ";path=/";
}

function updateCookieCount()
{
  var actualcount = readCookie("delayed_pixels_timer");
  if (actualcount != null) { actualcount = parseInt(actualcount) + 1 } else { actualcount = 0;}

  createSessionCookie("delayed_pixels_timer", actualcount);
  if (actualcount < 32) { setTimeout(function() { updateCookieCount() }, 1000); }
}
setTimeout(function() { updateCookieCount() }, 1000);

 This script triggers a timer that updates a sessioncookie every second. So when a visitor goes to the next page the timer will continu where it stopped. This extension is scoped on "Dom Ready". Change the "32" in the script if you need it longer then 32 seconds.

The second extension looks like this:

/*
Scope to the tag(s) that you want to delay
Adjust the timeout in the script below
It will only fire once per session
*/

if ( !b.tag_delay && a == "view" ){

  function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  } 

  var spendtime = readCookie("delayed_pixels_timer");

  if (spendtime != null) {
    spendtime = parseInt(spendtime);
  } else {
  spendtime = 0;
  }

  if (spendtime < 15)
  {
    var timeout = 15 - spendtime;
    var dataLayer = utag.handler.C(b);

    setTimeout( function(){ 
      dataLayer.tag_delay = true;
      utag.view(dataLayer, null, [id]); 
    }, timeout * 1000);
  }
  return false;
}

In the "Scope" field you put all the tags that need to be delayed. If you need an extra timer for let's say 30 seconds you just copy this extension, scope it to the appropriate pixels and change the "15" on both locations to whatever you need.

My client is now able to create new pixels that have normal loadrules (for several types of cookie consents or different url's, etc) without the need to code. After the creation of the pixels they open the 15-second extension and put the new tag in the scope of that extension.

 Any thoughts?

[kathleen_jo]

Great stuff @AndreScholten. Thank you so much for sharing!

[javi1]

Thanks for the work arround!

This should be a native functionality.

[matusrebros]

Hey Andre!

Thanks a lot for your post about delaying tags with Tealium.

I already set up everything now, everything what i need to set up on specific tag, not extension, is load rule to All pages? Or any another specific rule I need to set up?

Thanks a lot for your help