Custom Container Tag only shows Loaded not OK

[mitchellt]

Hello Everyone, I'm looking for some pointers on how to get a tag I've placed into a Custom Container to fire properly.

At the moment the tag shows the status of Loaded in Web Companion.  I don't see any JavaScript errors reported for this tag, but I can't open the tag's source code in the Sources tab of the browser inspector.  I can open that container source code in a seperate browser tag, so it does exist in the TiQ CDN.   Other posts on this board suggest that when a tag shows only LOADED that there may be a JS error afoot. The fun part for me is how to reveal that!

For some background, the tag that I need to fire is not currently in the TiQ Marketplace yet.  It consists of an external JS file and another snippet which declare/set two global vars.  I've added these into the Custom Container.    Another observation, when I peeped into the contents of the external JS tag I noticed "eval()" in the script - would that make this tag non-compatible with TMS, or are other considerations/prep necessary?  What else should I look for?

Thanks for any ideas and suggestions.

[mitchellt]

Hey @UnknownJ - if I might impose on you for an idea, I'd love to get your thoughts on the above!  Thanks in advance!

[UnknownJ]

Can't think of a reason why eval() would necessarily break it, unless your content security policy forbids it.. But if it did, I would expect to see JS errors in the console..

In terms of stepping through the debug process, if your tag ID is X, then in order it would go along the lines:

• Check utag.loader.cfg[X] to make sure its load and send properties are both set to 1
• Check your dev tools network tab for utag.X.js being loaded from the CDN
• Check that typeof utag.sender[X] === "object"
• Check utag.sender[X].ev to make sure that either "link", "view" or "all" are set to 1.
• Clear network tab, and try running utag.view(utag.data,null,[X]) and see what shows up

If the code is meant to set global variables, could it be that it assumes it'll be run directly on the page (in which case declaring var x is equivalent to setting window.x) but being wrapped in a send() function means the variables are created locally to that function, and are thus unavailable to other parts of the code that need them?

If they're created globally, can you see them after the tag is meant to have fired?

[mitchellt]

Thanks @UnknownJ, that's exactly the kind of info I was looking for.  

The variables do seem to be intended to be global. They go with a tag that's originally intended to be placed directly on page, but I can't think of any reason why it can't be fired through a TMS other than that eval() call.  

For global variables, where's the best place to load them? In an extension all by themselves?  

[dan_george]

@mitchellt @UnknownJ

You can still declare them within the template, just instead of:

 var a, b;

You would want to use:

 window.a;
window.b;


Also, maybe try jslint or something similar that checks the vailidity of the code.

Lastly, if you're able to paste the code contents here we can check it for you. Just be sure to redact sensitive code.

[mitchellt]

@dan_george, thanks for chiming in!  I've attached the template below, there's no secrets in there! :)

Besides the template below, I have the external script plugged into the Custom Script Source field:  //resources.infolinks.com/js/infolinks_main.js

I hope I've just done something non-sensical which is preventing it from executing and your input can help me get it going.  Thanks in advance for the help!

//~~tv:20010.20140827
//~~tc: Tealium Custom Container

/*
  Tealium Custom Container Notes:
  - Add sending code between "Start Tag Sending Code" and "End Tag Sending Code".
  - Add JavaScript tag library code between "Start Tag Library Code" and "End Tag Library Code".
  - Add JavaScript code only, do not add HTML code in this file.
  - Remove any <script> and </script> tags from the code you place in this file.

  Loading external JavaScript files (Loader):
  - If you need to load an additional external JavaScript file, un-comment the singe-line JavaScript comments ("//") within the following Loader sections near the bottom of this file:
      - "Start Loader Function Call"
      - "End Loader Function Call"
      - "Start Loader Callback Function"
      - "End Loader Callback Function"
  - After un-commenting, insert the path to the external JavaScript file you want to load.
  - Finally, within the Loader callback function, insert the JavaScript code that should run after the external JavaScript file has loaded.
*/

/* Start Tag Library Code */
//resources.infolinks.com/js/infolinks_main.js
/* End Tag Library Code */

//tealium universal tag - utag.sender.custom_container ut4.0.##UTVERSION##, Copyright ##UTYEAR## Tealium.com Inc. All Rights Reserved.
try {
  (function (id, loader) {
    var u = {};
    utag.o[loader].sender[id] = u;

    // Start Tealium loader 4.32
    // Please do not modify
    if (utag === undefined) { utag = {}; } if (utag.ut === undefined) { utag.ut = {}; } if (utag.ut.loader === undefined) { u.loader = function (o) { var a, b, c, l; a = document; if (o.type === "iframe") { b = a.createElement("iframe"); b.setAttribute("height", "1"); b.setAttribute("width", "1"); b.setAttribute("style", "display:none"); b.setAttribute("src", o.src); } else if (o.type === "img") { utag.DB("Attach img: " + o.src); b = new Image(); b.src=o.src; return; } else { b = a.createElement("script"); b.language = "javascript"; b.type = "text/javascript"; b.async = 1; b.charset = "utf-8"; b.src=o.src; } if (o.id) { b.id = o.id; } if (typeof o.cb === "function") { if (b.addEventListener) { b.addEventListener("load", function () { o.cb(); }, false); } else { b.onreadystatechange = function () { if (this.readyState === "complete" || this.readyState === "loaded") { this.onreadystatechange = null; o.cb(); } }; } } l = o.loc || "head"; c = a.getElementsByTagName(l)[0]; if (c) { utag.DB("Attach to " + l + ": " + o.src); if (l === "script") { c.parentNode.insertBefore(b, c); } else { c.appendChild(b); } } }; } else { u.loader = utag.ut.loader; }
    // End Tealium loader

    u.ev = {'view' : 1};

    u.initialized = false;

    ##UTGEN##

    u.send = function(a, b) {
      if (u.ev[a] || u.ev.all !== undefined) {
        //##UTENABLEDEBUG##utag.DB("send:##UTID##");

        var c, d, e, f, i;

        u.data = {
          /* Initialize default tag parameter values here */
          /* Examples: */
          /* "account_id" : "1234567" */
          /* "base_url" : "//insert.your.javascript.library.url.here.js" */
	  /*"base_url" : "//resources.infolinks.com/js/infolinks_main.js", */
          /* A value mapped to "account_id" or "base_url" in TiQ will replace these default values. */
        };


        /* Start Tag-Scoped Extensions Code */
        /* Please Do Not Edit This Section */
        ##UTEXTEND##
        /* End Tag-Scoped Extensions Code */


        /* Start Mapping Code */
        for (d in utag.loader.GV(u.map)) {
          if (b[d] !== undefined && b[d] !== "") {
            e = u.map[d].split(",");
            for (f = 0; f < e.length; f++) {
              u.data[e[f]] = b[d];
            }
          }
        }
        /* End Mapping Code */


        /* Start Tag Sending Code */


        /* End Tag Sending Code */


        /* Start Loader Callback Function */
        /* Un-comment the single-line JavaScript comments ("//") to use this Loader callback function. */

        u.loader_cb = function () {
          u.initialized = true;
          /* Start Loader Callback Tag Sending Code */
//var infolinks_pid = 11111;
//var infolinks_wsid = 9;
window.infolinks_pid = 1111111;
window.infolinks_wsid = 9;

	  
	  // Insert your post-Loader tag sending code here.

          /* End Loader Callback Tag Sending Code */
        };

        /* End Loader Callback Function */


        /* Start Loader Function Call */
        /* Un-comment the single-line JavaScript comments ("//") to use Loader. */

          if (!u.initialized) {
            u.loader({"type" : "iframe", "src" : u.data.base_url + c.join(u.data.qsp_delim), "cb" : u.loader_cb, "loc" : "body", "id" : 'utag_##UTID##' });
            u.loader({"type" : "script", "src" : u.data.base_url, "cb" : u.loader_cb, "loc" : "script", "id" : 'utag_##UTID##' });
          } else {
            u.loader_cb();
          }

          u.loader({"type" : "img", "src" : u.data.base_url + c.join(u.data.qsp_delim) });

        /* End Loader Function Call */


        //##UTENABLEDEBUG##utag.DB("send:##UTID##:COMPLETE");
      }
    };
    utag.o[loader].loader.LOAD(id);
  })("##UTID##", "##UTLOADERID##");
} catch (error) {
  utag.DB(error);
}
//end tealium universal tag

[dan_george]

@mitchellt I don't think you can actually use the Custom Script Source for a Custom Container. I see you have the u.data.base_url defined so I believe you need to add that back in because right now it doesn't have a URL to call out to when u.loader is triggered.

[craig_rouse]

@mitchellt, @dan_george is right. Custom Script Source bypasses the usual tag loading completely, and simply loads the file you specify in the Custom Script Source field. If you remove the value from the Custom Script Source field and instead load the JS file inside the template using the "u.loader" function, it should work.

Custom script source basically turns a tag into a dumb script loader, and you'll notice that it gets loaded inside utag.js instead of utag.X.js (where X is the tag ID), if my memory serves me correctly.

[mitchellt]

Thanks @dan_george and @craig_rouse - your input helped me make progress - the tag shows OK in Web Companion and I can see the tag source in Sources (but not in the DOM) because the tag is still not 'firing'.  There isn't a callback provided by the vendor.  What's my best option for making this tag fire and function? 

[dan_george]

@mitchellt

First, I noticed that within the template you have all 3 u.loaders  functions being trigger. Please call only one, since this is a JS file then comment out the iframe and image such as below.

/* Start Loader Function Call */
/* Un-comment the single-line JavaScript comments ("//") to use Loader. */

if (!u.initialized) {
  //u.loader({"type" : "iframe", "src" : u.data.base_url + c.join(u.data.qsp_delim), "cb" : u.loader_cb, "loc" : "body", "id" : 'utag_##UTID##' });
  u.loader({"type" : "script", "src" : u.data.base_url, "cb" : u.loader_cb, "loc" : "script", "id" : 'utag_##UTID##' });
} else {
  u.loader_cb();
}

//u.loader({"type" : "img", "src" : u.data.base_url + c.join(u.data.qsp_delim) });

/* End Loader Function Call */

Second, the callback is managed by our library. As long as the call out is successful we will trigger the callback. This is what the code after Start Tealium loader 4.32 is managing.

Let's see where this gets you.

[mitchellt]

Wow, @dan_george  - that did it - I suppose I made that a lot more difficult than necessary, but it was a good learning experience for me.   Thanks so much for the pointers and guidance through the setup and context info for each aspect of the Custom Container.