Ah, I think we might have looked at solving the same issue.
In our case, we wanted to:
- Not have any vendor-specific code on pages so that any future change of vendor didn't require an HTML code change, and
- Not risk causing JS errors if a customer's ad blocker prevents utag.js from loading
There are two approaches you can take. The first is to create wrapper functions for utag.view() and utag.link(). If handling utag.js unavailability is your primary goal, then try the following:
// Add this code to all your pages
window.utag_view = function(){
// do nothing
};
window.utag_link = function(){
// do nothing
};
// Add this code to a DOM Ready Tealium extension
window.utag_view = window.utag.view;
window.utag_link = window.utag.link;
That'll basically give you a set of utag_view and utag_link functions which will be inert if utag.js hasn't loaded, but once utag.js has loaded, they'll be repointed to be references to the built-in utag.view and utag.link functions. Then any time you want to trigger a link event, use utag_link - if Tealium is there, it'll be routed via the utag function, otherwise it will fail gracefully. If you were to later change your tag management vendor, you could just repurpose those two functions and point them at the alternative vendor.
The other approach is to build all of your tracking within Tealium itself, so never fire events from the page, but rather create event listeners. In our case, we used custom attributes against on-page elements, for example:
<input
id="0.1.1.1.2"
name="txtTitle"
data-analytics-narrative="Customer Title"
data-analytics-tracking="full"
data-analytics-persist="customer_title"
/>
Those attributes describe the field in question in a reporting-friendly way, the expected behaviour for an event (do we capture an interaction, capture the value of the interaction, or capture nothing?) and the UDO variable into which we might persist the value thereafter (if needed).
Then we used jQuery to track blur events against input elements, registering the event handlers in a Tealium extension, and used the custom attributes against the element in question to populate the event payload before pushing it into utag.link, all within Tealium extensions.
Hope that's of some use..
Expand/CollapseMenu
