Back

Next page personalization is a key strategy for creating an engaging customer experience. The solution described below utilizes the Data Layer Enrichment feature. However, since the default behavior of Data Layer Enrichment has a two page view delay making next page personalization difficult. Since many A/B testing vendors prefer to control content based on cookies the following article describes how to set cookies using Data Layer Enrichment for the purpose of next page personalization.

In this article:

Table of Contents Placeholder

 

Definitions

Visitor Service

A service that sits betweent the client/webpage and AudienceStream and handles all communication requests. For example, receiving data from the webpage and also Data Layer Enrichment. It caches the visitor profile for all active visitors, and visitor profiles are refreshed every 2 seconds. If a webpage makes 5 requests in 2 seconds, all 5 requests will receive the same visitor profile response. This helps prevent unncessary load on AudienceStream.

Polling

The process of performing Data Layer Enrichment multiple times on the same page with a pre-defined and customizable delay between each request.

Callback

The ability to tap into the response from the Visitor Service to know when the Data Layer Enrichment request has been returned.

Setup

Polling

Polling is a relatively unknown AudienceStream solution provided by the Tealium Collect tag. It's a feature that is used sparingly due to the amount of additional load it causes to the AudienceStream services.

Typically, the Tealium Collect tag makes a single Data Layer Enrichment request per page, but on important pages like the Order Confirmation page the Visitor Service is called 2 extra times with 4 seconds between calls - ergo polling. The idea being to bring the latest visitor profile into LocalStorage so that it's available on the next page load, often times the first page view of the next visit.

The polling logic was pre-built into the Tealium Collect tag and is available for any event we deem necessary. To use, within Tealium iQ add a JavaScript extension scoped to the Tealium Collect tag. The following is a sample script that will run on the Cart page and make 3 total requests all 2 seconds apart.

if (b.page_type == "Cart") {
// total number of enrichment requests to make (including initial page view)
u.enrichment_polling = 3; 

// the number of seconds (in milliseconds) to delay subsequent calls
u.enrichment_polling_delay = 2000;
}

Callback

See this post for details on how the callback function works. To summarize, when the Data Layer Enrichment request receives a response back from the visitor service, a function can be called so that an action can be taken. Since this use case speaks to reading cookies, here is an example of the callback setting a cookie leveraging Tealium's utag.loader.SC function. Note, SC stands for Set Cookie, the cookie name is "dest_name", and the cookie value to set is "dest" which was captured from Trait (a.k.a Property) ID 5555. Be sure to name the function "tealium_enrichment" to automatically enable the callback.

if (b.page_type == "Cart") {
window.tealium_enrichment = function(data) {
console.log("Visitor Service Cookie Callback");
var page = utag.data.page_name;

var dest = data['properties']['5555'] || "";

if (dest !== "") {
utag.loader.SC("dest_name", dest);
}
};
}

Sequence of Events

Let's assume the visitor is well into their session with multiple page views. It's also important to know that the above Trait (5555) was set from data on the current page load, and needed on the next page load, hence the need for polling.

Visitor lands on an important page

  1. The CMS attempts to read the "dest_name" cookie in the head
  2. The "dest_name" cookie does not exist
  3. The UDO is declared
  4. The utag.js script is triggerred
  5. Local Storage is read (still 2 page views behind)
  6. AudienceStream visitor attributes are injected into Local Storage
  7. DOM Ready occurs
  8. Vendor Tags fire
  9. Tealium Collect Tag fires last
  10. The JavaScript extension scoped to the Tealium Collect tag enables 3 total Data Layer Enrichment calls each 2 seconds apart
  11. The 1st Data Layer Enrichment request is made for the standard page view
  12. Local Storage is updated
  13. 2 seconds later, the 2nd Data Layer Enrichment request via polling is made
  14. Local Storage is updated
  15. The callback function is triggered
  16. The tealium_enrichment function will run and look for the Trait's existence, if the Trait exists the "dest_name" cookie will be set
  17. 2 seconds later, the 3rd Data Layer Enrichment request via polling is made
  18. Local Storage is updated
  19. The callback function is triggered
  20. The tealium_enrichment function will run and look for the Trait's existence, if the Trait exists the "dest_name" cookie will be set

Visitor moves to next page

  1. The CMS attempts to read the "dest_name" cookie in the head
  2. The "deest_name" cookie existss so the CMS knows to change the site content
  3. The UDO is declared
  4. utag.js is declared
  5. Local Storage is read (now it reflects the previous page data)
  6. AudienceStream visitor attributes are injected into Local Storage
  7. DOM Ready occurs
  8. Vendor Tags fire
  9. Tealium Collect Tag fires last
  10. The JavaScript extension scoped to the Tealium Collect tag evaluates that this is not a page to enable polling
  11. Only 1 Data Layer Enrichment request is made
  12. Local Storage is updated

Conclusion

This example can be used for many different use cases, with only the callback function code requiring a change.

Also, please remember that enabling polling causes extra load on the Tealium services so use smartly and sparingly.

Go forth and personalize!