Waittimer- Config Overrides for utag.js

[zhaque]

Hello, 

I have a use case where I need to use the option "waittimer" and set it to 3s. Last item in the documentation found here :

https://community.tealiumiq.com/t5/JavaScript-utag-js/Config-Overrides-for-utag-js/ta-p/14048

As far as I understand it's a global option. My questions are :

1. What's the downside of using this option? - e.g. if the visitor leaves the webpage before 3s - my bounce rate will be incorrect? or it will slow down the load time of the page?

2. How can it be used with Adobe Target - does it mean the Target will load the page and then - reload the page (async) or slow down the page loading (Sync) mode?

3. I have played around with dom_complete = true -- but it doesn't seems to do anything different - I thought dom_complete will load "all" external assets file etc - maybe I am not using it right.

I am keen to understand the negetive aspect of overriding waittimer, I am in a legacy enviornment - so my utag_data doesn't get the time to get populated before utag fires - I have managed to halt utag using waittimer - but I want to understand the downside of it. 

Many thanks.

[adrian_browning]

Hi @zhaque

1. You are correct you will see for all tags that are set to wait a delay in fining them from DOM Ready + 3s.
   1. Depending on your configuration, this could indeed decrease you bounce count.
2. With Adobe Target we always recommend that it is used bundled, with the wait off.
   1. With those settings, the waittimer setting will not affect it.
3. The config dom_complete changes the functionality of the utag.js so that instead of loading when the DOM is in either interactive or complete. It will always wait for DOM ready complete before executing. You may not see much of a difference if your page does load quick.

Adrian 

[jan_van_damme · Accepted solution]

This is a setting fo all tags which is the downside of the setting these options.
From a perfromance point of view we would like to evaluate if it is possible to delay some tags till the dom complete whilst others should still fire at dom interactive.
I am having a hard time coming up with a solution that does not feel like a hacky way to do just this.

The setup (simplified):

Two tags:
- a important --> should be loaded on dom interactive
- b less important --> should be loaded after dom load

Setting the dom complete option does not work as both will be deferred till dom complete.

My current solution is as follows:
- load rule which checks a flag set on the document object (document.tealium_load, set to false by default)
- have a preloader extension set up an eventlistener for the domload event
- this eventlistener will set the document.tealium_load to true
- and will trigger a re-evaluation of the loadrules using utag.pre(); and utag.loader.initcfg();
- the it checks all the tags that have a load==1 and manually triggers a view using utag.view(utag_data, null, n) where n is the array of tag id's extracted from utag.loader.cfg where the load ==1

This seems to work fine but feels like a hacky way to do the things.

@adrian_browning Do you have any proposed solution for this type of usecase?

[adrian_browning]

@jan_van_damme

Sorry for the delay, back from holiday now.

My suggestion to do this would be:

The important tags have a rule that says something like window_ready !== true

Less important tags have an additional rule that says something like window_ready === true

 Any future tags that are added will need to have one of these 2 load rules assigned. Else you will get double firing, due to them to "open".

Preloader Extension

window.utag_data = window.utag_data || {};
window.utag_data.window_ready = "false";

Now in a DOM Ready Extension

(function(){
  var RH,
      hasBeenCalled = false,
      callUtag = function(){
        if (!hasBeenCalled) {
          hasBeenCalled = true;
          utag.data.window_ready = "true";
          utag.view(utag.data);
        }
      };
  
  if (document.readyState === "complete") {
    callUtag();
  } else {
    if (document.addEventListener) {
      RH = function () {
        document.removeEventListener("DOMContentLoaded", RH, false);
        callUtag();
      }
      window.addEventListener("load", callUtag, false);
    } else if (document.attachEvent) {
      RH = function () {
        if (document.readyState === "complete") {
          document.detachEvent("onreadystatechange", RH);
          callUtag();
        }
      };
      document.attachEvent("onreadystatechange", RH);
      window.attachEvent("onload", callUtag);
    }
  }
}());

I would recommend this, over calling  utag.pre(); and utag.loader.initcfg(); manually.

Adrian