What To Do When You Don’t Have A Data Layer

Tag Management requires a little effort up front, but the returns are worth it. The main bit of work is adding a clean data layer into your web page or app. But what if you can’t? You’ve developed a large set of static content pages and updating each individual page is next to impossible. Or you need to get a data layer into your content but have no one to assist. (Has your entire web development team just decided to use their unlimited vacation days?) Tealium provides a way to make possible what was previously impossible.

History

The Hosted Data Layer (HDL) feature provided with Tealium iQ was originally called Data Layer Enrichment (DLE). Recently, the Tealium visitor service that provides visitor-specific Data Layer Enrichment was updated to be called “DLE.” Although they both are similar in that they will effectively bring data from an external source (CDN or service) to the data layer on the page. The main difference is that while DLE retrieves visitor-specific data, the HDL is designed to retrieve data about anything except a visitor.

Architecture

The HDL is composed of both an API to upload JSON data and a set of .js files hosted on a public-facing CDN location for download and execution. In addition to hosting JavaScript files, the feature is currently being expanded to provide hosting for JSON-format files as well. The reason JavaScript (.js) files are used is to allow for all browsers including legacy Internet Explorer to retrieve the data. This is done using JSONP. Modern browsers can directly retrieve JSON object from a third party domain. With support for JSON format, we expect Progressive Web Apps or Google AMP HTML configuration directives can be hosted in JSON format and provide additional flexibility to our clients. Regardless of how the data is retrieved from Tealium’s CDNs, it is uploaded in JSON format using Tealium’s API.

Web Page Usage

Tealium iQ provides an Extension to configure how/when a web page will retrieve (execute) an HDL JavaScript file to add data to the web page. In the case of retrieving product data, the extension can be configured to add product detail data based on the “product_sku” value currently showing in the visitor’s web browser. This could be additional metadata about a product that might not be available on the page or might not be easy to get to on the page. Once retrieved, this information becomes a part of the data layer and can be passed along to a tag vendor or even used as conditions to load additional tags for that specific product.

The Tealium iQ Extension is called “Hosted Data Layer.” The typical use case on a web page would be to configure this extension with a variable that contains the “MD5” string of the current URL. That means it will lookup/retrieve all the additional data for this URL in one request. This allows for easy ‘deployment’ of Tealium iQ on a site with many static web pages and not a lot of developer resources to update each and every web page with a data layer. Best practice is to only request the minimum number of files per page to reduce HTTP requests and increase the likelihood of tracking with your tag vendors. The more data files to retrieve, the more delays are added to tracking calls that want to fire with the data.

Single Page Apps Usage

While the HDL feature was originally designed for the use case of a website with many static and difficult-to-modify pages, this feature can also be leveraged on Single Page Apps. For this scenario, we recommend that you do not use the Tealium iQ Extension. Instead, create a wrapper function to retrieve the data form HDL service before calling utag tracking functions (utag.view or utag.link.) This allows for your app developer to decide what is required and what is optional data. Required data should “block” (retrieve data and call callback) before executing utag.link or utag.view. Optional data can be asynchronously requested.

For example, if you have currency conversion data, you might want to retrieve that data in order to fire a purchase event with the adjusted amount at the time of the transaction. However, you may also want to pull data around general stock market shifts. This data is interesting, but not required. You would like to send the recent stock trend data to your analytics provider, but it will be OK to send that information on the 2nd or 3rd tracking event in your app.

Choosing to retrieve some data asynchronously allows for increased tracking (firing pixels sooner) and increased information (additional data is eventually retrieved, but user experience takes precedence.)

Example

// Simple wrapper function for tracking clicks on product button
// Assumes: dataLayer has a product_sku and utag.js has already loaded

function trackButtonClick(dataLayer) {
  var path = "https://tags.tiqcdn.com/dle/#ACCOUNT#/#PROFILE#/";
  var lookup = dataLayer.product_sku;
  // Reset any data previous HDL values
  utag.globals = {dle:{enrichments:{}}};
  // Get data from HDL, then call utag.link to track button click
  utag.ut.loader({
    src: path + lookup + ".js",
    cb: function(){
      utag.ut.merge(dataLayer,utag.globals.dle.enrichments[lookup]);
      utag.link(dataLayer);
    }
  })
}

Conclusion

Tealium’s best practice is to place the data your tag vendors need in your data layer in the page. During your implementation process, the Deployment Engineering team will ensure you have the best data layer in the business. This provides the most powerful, intuitive, and performant solution. However, the Hosted Data Layer feature provides a framework for those cases where this is either technically not possible or just not practical.  Many enterprise clients have complex implementations or internal processes.

We’re looking forward to some additional applications of HDL with added support for JSON files hosting. This allows for CORS support out of the box.  

We’d love to hear about how you’re using this feature!