Simple Tealium Data Layer (UDO) Viewer Bookmarklet

Simple Tealium Data Layer (UDO) Viewer Bookmarklet

by Community Manager Tuesday - edited Tuesday (34 Views)

This bookmarklet is a quick way to view the Tealium data layer on a web page. Once added to your browser as a bookmark, navigate to a page where Tealium is installed and click the bookmark. A pop-up window will appear with a text representation of the Universal Data Object (utag_data).

How It Works

This is a simple tool intended for basic testing of the Universal Data Object (utag_data) on a page. When launched, this tool looks for the page variable utag_data and displays its contents. This tool does not detect the data passed to any tracking calls (utag.view() or utag.link()). It only displays the contents of the utag_data object.

For a more advanced tool that displays all event tracking data, see the Universal Tag (UTAG) Debugger).

The utag_data object often contains variables other than the ones populated on the page. To simplify what information is displayed, only the following variable types will be displayed:

  • Universal Data Object (e.g. utag_data['page_name'])
  • DOM (e.g. utag_data['dom.pathname'])
  • JavaScript Page (e.g. utag_data['js_page.my_global'])
  • Query String Parameters (e.g. utag_data['qp.campaign'])
  • Built-In Tealium (e.g. utag_data['tealium_event'])

Additional resources:

Using the Simple Data Layer Viewer

The viewer is added to you browser as a Javascript bookmark.

Simple Tealium Data Layer Viewer JavaScript code: (function(){ function align_json (str, del) { del = del || ":"; var lines = str.split("\n"); var fields = []; var max_indent = 0; var new_string = ''; var in_array = false; for(var i=0; i < lines.length; i++) { var line = lines[i]; if(line.indexOf(": ") > 0) { if(line.indexOf("[") == line.length-1) { in_array = true; } var new_indent = line.indexOf(':'); if(new_indent > max_indent) { max_indent = new_indent; } fields.push(line); new_string = new_string + '@'; } else { if(in_array) { line = line.replace(/^\s+/, " "); fields[fields.length-1] = fields[fields.length-1] + line; if(line.indexOf("]") > 0) { in_array = false; } } else { new_string = new_string + line + "<br>"; } } } var new_fields_str = ''; var sorted_fields = fields.sort(); for(var j=0; j < sorted_fields.length; j++) { var two_parts = []; var split_ch = sorted_fields[j].indexOf(':'); two_parts.push(sorted_fields[j].slice(0, split_ch)); two_parts.push(sorted_fields[j].slice(split_ch+1)); two_parts[1]=two_parts[1].replace(/\[\s+/, "["); two_parts[1]=two_parts[1].replace(/\s+\]/, "]"); if(two_parts[1].lastIndexOf(",") != two_parts[1].length-1) { two_parts[1] = two_parts[1] + ","; } var line_length = two_parts[0].length; var padding = max_indent - line_length; for(var k=0; padding > 0 && k < padding; k++) { two_parts[0] = two_parts[0] + ' '; } new_fields_str = new_fields_str + two_parts[0] + ' :' + two_parts[1] + "<%2Fbr>"; } new_string = new_string.replace(/@+/, new_fields_str); return new_string; } delete Array.prototype.toJSON; var udo_string = align_json(JSON.stringify(utag.data, function(key, value) { if(typeof key == 'number') { return value;} if(key.indexOf("_t_") == 0 || key.indexOf("va.") == 0 || key.indexOf("cp.") == 0 || key.indexOf("meta.") == 0 || key.indexOf("_c")==0 || key.indexOf("ut.")==0) { return undefined; } else { return value; } }, 4)); window.open("","udo_pretty_print", "width=600,height=600,location=0,menubar=0,status=1,toolbar=0,resizable=1,scrollbars=1").document.write('<title>Simple Tealium Data Layer Viewer<%2Ftitle><pre style="font-family:\'Courier New\',Monaco,monospace; font-size:12pt;" id="udo_string">'+udo_string+'<%2Fpre>'); })();

To add the bookmarklet to your browser:

  1. Copy the code above.
  2. In your browser, add a new bookmark, then edit it so you can modify the URL field.
  3. First, type javascript-colon.png at the beginning of the field, then paste the code after it.
    simple-data-layer-viewer.png

To use the bookmarklet:

  1. Navigate to a site with Tealium installed.
  2. Click the bookmark. A pop-up appears displaying the data layer (UDO) variables and values.
    Simple_Tealium_Data_Layer_Viewer_Example.png