Tealium Learning Center

Quick proof of concept demonstrating how you can use Github's Content API in conjunction with TIQ's saveTemplate API to replicate a Github hosted file into Tealium's tag templates.. Run it directly in the console, or as a Greasemonkey/Tampermonkey script, or a a bookmarklet, or indeed as a customer Tealium Tools plugin. You run it from within TIQ, from any tab, and the code goes thus: /** * Define an array of objects that define a pair of locations - the first, an account, * profile and tag identifier for a TIQ tag template. The second, a GitHub user, a public * repository, and a path to the file that contains the source for the template. */ var mappings = [ { account: "realiumit", profile: "main", tag_id: "1", git_user: "realiumit", git_repo: "realium-tags", git_path: "tag1.js" }, { account: "realiumit", profile: "main", tag_id: "7", git_user: "realiumit", git_repo: "realium-tags", git_path: "tag7.js" }, ]; /** * Iterate over the list of resource mappings and process them in turn. */ for(var i = 0; i < mappings.length; i++){ loadExternalResources(mappings[i]); } /** * Acquires source code from GitHub, and writes it to a Tealium IQ template * @param {object} mapping - an object that relates a GitHub file to a unique template */ function loadExternalResources(mapping){ getGitCode( mapping.git_user, mapping.git_repo, mapping.git_path, function(content){ setTemplate( mapping.account, mapping.profile, mapping.tag_id, content ); } ); } /** * Accesses the TIQ saveTemplate API and writes the source code presented in the content * argument to the relevant template ID within the given account and profile * @param {string} account - the TIQ account name * @param {string} profile - the TIQ profile name * @param {number} template_id - the ID of the tag within the interface * @param {string} content - the source code to load */ function setTemplate(account, profile, template_id, content) { var tiqapi = "https://my.tealiumiq.com/urest/legacy/saveTemplate?utk=" + utui.util.getUTK(); var payload = { account: account, profile: profile, type: "profile", template: "profile." + template_id, code: content, }; console.log("Setting template: " + [account,profile,"utag." + template_id + ".js"].join("/")); $.post( tiqapi, payload ); } /** * Connects to the Github API and retrieves the source code for the specified file, passing * it to a callback function * @param {string} user - the Github user * @param {string} repo - the Github repository * @param {string} path - the path to the file within the repository * @param {function} callback - a function accepting a single argument to call upon completion * of the asynchronous GET request, passing the retrieved source code */ function getGitCode(user, repo, path, callback){ var git = [ "https://api.github.com/repos", user, repo, "contents", path ].join("/"); console.log("Acquiring code from: " + git) $.get( git, function (a) { callback(atob(a.content)); } ); } There's no reason why other Git implementation couldn't be used, provided they exposed accessible APIs that allow you to grab the contents of files. Nor is there a reason why you'd have to save to templates, as opposed to writing to utui.data.customizations[extension_id].code to populate JS extensions. The sky's the limit, at least while the TIQ APIs still work.... ... View more

The following code will allow you to very quickly create additional event types if created as a DOM Ready extension, without the need to edit templates etc.:   window.utag.createEvent = function(event_name){ if(!this[event_name]){ console.log("Creating utag." + event_name + "() event"); this[event_name] = function (a,c,d){ return this.track({ event:event_name, data:a, cfg:{ cb:c, uids:d } }) }; } }; So if utag.link() wasn't already something that exists, you could create it thus:     utag.createEvent("link");   Some event types that you may want to consider: view Fires when the page loads (this already exists) link Fires on generic on-page interactions seen Fires when the page is first made visible (i.e. tags won't fire if a new tab is opened in the background until focus switches to that tab) visit Fires once per session and then uses a cookie with a 30 minute expiry (whose timings are reset on every page) to suppress future events (take care combining this with load rules, if your load rules aren't met on the first event in the session, the tag won't fire in that session) defer Fires after the page has completely finished loading, for any tags that don't need to execute immediately and might otherwise slow down the overall page load time. return Fires after the page has been inactive for 30 minutes and is then reactivated. Essentially treats a reactivated dormant tab as a new pageview for any tags scoped to that event type Specific use cases and code examples available for anyone interested.. The "seen" and "return" event types are useful for analytics tags that need to better capture the customer experience, whereas "visit" and "defer" make it easier for marketing tags to reduce the number of calls they make, particularly during initial page load. ... View more

Let's say I've got a website, let's call it "Realium IT". It has a two-step logon journey, and I want to add a new tag to the second page (after primary authentication has been successful) in order to build an audience of "existing customers". But, I've got an IT team who will go spare if I increase their "End User Response Time" metric by adding another tag JS file to the page (meaning an additional 4kb to be downloaded but also another HTTPS socket to open). The logon journey is a critical one, we can't be going around slowing it down. What we can do is pre-load that tag file on the preceding page (in the background, after page load has completed) so that it's already cached when the customer reaches the page on which the tag should fire. This can be done by adding an additional function to TIQ, e.g. through a DOM Ready JS extension: utag.loader.preloadTag = function(t,o,u){ u = utag.cfg.path + "utag." + t + ".js?utv=" + utag.cfg.template + this.cfg[t].v; try{ o = document.createElement('object'); o.data = u document.body.appendChild(o); } catch(e){ // msie fallback? or don't bother? } }; So if I want to load Tag ID 27 in an inert state, without it being loaded into the utag object, I can then simply run: utag.loader.preloadTag(27); So I could, for example, create another JS extension that runs the following convoluted script: if(window.location.pathname === '/login_1.asp'){ $(window).on('load', function () { window.setTimeout(function() { utag.loader.preloadTag(27); }, 1000); }); } Which effectively says "if we're on the first login page, wait until the window has finished loading, then wait another second, and then pre-load tag ID 27". Upon hitting the second login page, the user's browser will simply retrieve the tag from the cache, and they won't need to request or download the file, moving those activities out of the critical path to page loading on the second page, and into spare time on the first. ... View more

As per the instructions here, the following is an implementation of the Snap Pixel. The steps are as follows: Create a Tealium Custom Container tag Map your pixel ID (e.g. e0bfc1fc-8a06-48a8-b221-673653f0020e) to a variable "pixel_id" Map the customer's e-mail address or phone number to the variable "user_email" or "user_phone_number" Add suitable load rules Go to the "Account Admin" menu, "Manage Templates", and overwrite the template for the new Tealium Custom Container tag with the following: //tealium universal tag - utag.sender.custom_container ut4.0.##UTVERSION##, Copyright ##UTYEAR## Tealium.com Inc. All Rights Reserved. //modified by @unknownj to support Snap Pixel try { (function (id, loader) { // ################################################ // Abort tag loading if no utag object exists if (utag === undefined) return; // ################################################ // ################################################ // Create the tag object, with loader function, // qualifying event types, initialisation status, // event counter (and limit), and a local debug // function that embeds the tag ID in the log // entries for ease of debugging var u = { loader: utag.ut.loader, ev: { all : 0, // CONFIG: Set to fire on all event types view : 1, // CONFIG: Set to fire on utag.view events link : 0 // CONFIG: Set to fire on utag.link events }, initialized: false, event_count: 0, event_limit: 20, // CONFIG: Set to limit the number of events per page DB: function(log){ if(typeof log == "string"){ utag.DB("Tag##UTID##: " + log); } else { utag.DB(log); } } }; // ################################################ // ################################################ // Load tag object into parent utag profile u.DB("Loading tag"); utag.o[loader].sender[id] = u; // ################################################ // ################################################ // Inject the code that creates the mapping object // and array of extension functions as defined in // the TIQ UI ##UTGEN## // u.map = { ... }; // u.extend = [ ... ]; // ################################################ // ################################################ // Define a function to run the first time the tag // fires. u.initialize = function(){ u.DB("Initialising tag"); // ################################################ // Snapchat Specific: Create the Snapchat event // handler. if(window.snaptr) return; var tr = window.snaptr = function(){ if(tr.handleRequest){ tr.handleRequest.apply(tr, arguments); u.DB("Event triggered"); } else if(tr.queue) { tr.queue.push(arguments); u.DB("Event queued"); } }; tr.queue = []; // ################################################ // ################################################ // Snapchat Specific: Load the externally hosted // JS file that powers the tag utag.ut.loader({ src: "https://sc-static.net/scevent.min.js", type: "script", cb: function(){ u.DB("Remote script loaded"); } }); // ################################################ // ################################################ // Snapchat Specific: Create the initial payload // object that will be passed to the init event // and establish the customer's identity // // We need a data item mapped to pixel_id // and at least one out of user_email, // user_phone_number, user_hashed_email and // user_hashed_phone_number var init_payload = { user_email: undefined, user_phone_number: undefined, user_hashed_email: undefined, user_hashed_phone_number: undefined }; for(var k in init_payload){ if(u.data[k]){ init_payload[k] = u.data[k]; } else { delete u.data[k]; } } u.DB("Firing init event"); tr('init', u.data["pixel_id"], init_payload); // ################################################ }; u.send = function(a, b) { if (!!u.ev[a] || !!u.ev.all) { u.DB("Sending tag"); // ################################################ // Abort send if we've reached the limit for // on-page events if (u.event_count >= u.event_limit){ u.DB("Exceeded event limit of " + u.event_limit); return; } // ################################################ // ################################################ // Iterate over tag-scoped extensions and run them ##UTEXTEND## // for(c=0;c<u.extend.length;c++){ // try ... // ################################################ // ################################################ // Use the mapping object to translate elements in // the event payload to their local tag-specific // parameters and store them in u.data u.data = u.data || {}; for (var d in utag.loader.GV(u.map)) { if (b[d] !== undefined && b[d] !== "") { var e = u.map[d].split(","); for (var f = 0; f < e.length; f++) { u.data[e[f]] = b[d]; } } } // ################################################ // ################################################ // If the tag has not yet been initialised, run its // initialisation function if(!u.initialized){ u.DB("Tag requires initialisation"); u.initialize(); u.initialized = true; } // ################################################ // ################################################ // Snapchat Specific: Fire pageview u.DB("Firing page view event"); window.snaptr('track', 'PAGE_VIEW'); // ################################################ // ################################################ // Increment internal event counter u.event_count += 1; // ################################################ } }; utag.o[loader].loader.LOAD(id); })("##UTID##", "##UTLOADERID##"); } catch (error) { utag.DB(error); } //end tealium universal tag Standard caveats apply, including the fact that I've not got an advertiser account so I've not been able to test it end to end, just fancied reminding myself how tag templates work really.. ... View more

TIQ's Hosted Data Layer functionality is great, but it's also possible to extend it to behave more like a JSONP service, running a callback immediately upon the loading of the data. For example, you might not want to hold up the initial utag.view() event waiting for the responses to come back (or indeed, you might be running extensions that don't play nicely with the noview config option), but would like to fire a specific tag once a response comes back. The following function will allow you to grab a data object from the CDN, and pass it to a given callback object: function getDLE(key, callback, errorFunction){ var enrichmentData; var account = "your-account-name"; var profile = "profile-name"; try { enrichmentData = window.utag.globals.dle.enrichments; } catch(e){ var logFunction = console.log; if(window.utag && window.utag.DB) logFunction = window.utag.DB; if(errorFunction && typeof errorFunction == "function") logFunction = errorFunction; logFunction("Attempted to use Hosted Data Layer but extension hadn't initialised"); return false; } utag.ut.loader({ type: "script", src: "https://tags.tiqcdn.com/dle/" + account + "/" + profile + "/" + key + ".js?cb=" + Math.random(), cb: function(){ var res = enrichmentData[key]; if(typeof callback == "function" && typeof res != "undefined"){ callback(res); } } }); return true; } You can then run it as follows: getDLE("product002",console.log,console.error); Which will pass the object returned by product002.js into the console.log function. If you don't have Hosted Datalayer enabled in your profile (or if it hasn't initialised when you try to run the call), it'll produce a console error. In general this doesn't let you do much that the vanilla functionality doesn't already do, but there are a few special use cases for it: Chaining lookups, if you wanted to perform a Hosted Datalayer request based on a value retrieved from a Hosted Datalayer call Performing a lookup after the initial page load - for example, in a single page application where your lookup key may only become available after the customer has reached a certain point You can in theory make it work without using the Hosted Datalayer extension at all, by creating the window.utag.globals.dle.enrichments object from scratch in advance, but I'm not sure that that would be best practice.. Bonus Awesome / Awful Use Case: Tired of defining your tag mappings in advance? Want to live life on the edge defining them whenever you like without a publish? Why not have an empty mapping object in your tag file, and then create a tag scoped extension which: Tests whether the u.map object has no keys (!Object.keys(u.map).length) If it has no keys: Run a DLE lookup against a known Hosted Datalayer key with a callback that: Writes the response object to u.map Fires a utag.view/link against that specific tag ID Return false If it has keys, do nothing Effectively what happens is that when the tag fires for the first time, with an empty mapping object, it'll request its data mapping from the server and abort that particular send. Upon receiving the mapping data, it'll load it into the tag, and then re-fire itself. Now, I have no idea why you'd want to store your variable mappings dynamically outside of TIQ and update them outside of a full profile publish. But it's a decent illustration of the power the Hosted Datalayer functionality has. Post your own dangerous use cases below :o) ... View more

Is there any reason why it would be a bad idea to amend the utag.sync.js template to add the code necessary for asynchronously loading the utag.js script?   Advantages, as I see it:   Tealium can be deployed onto the page with a single reference to the utag.sync.js script Gives you complete control over how the utag.js script is deployed (e.g. ability to add onerror handlers) Disadvantages, I'll let you guys point out to me... :o) ... View more