Tealium IQ — Event Listeners and Link Tracking
Out of the box, many tag management systems (TMS) support common event listeners. You specify a DOM element — or group of DOM elements — with a CSS selector, tell the TMS to listen for an event (click, mousedown, submit…) related to the DOM element(s), then track the event. Perhaps you’re collecting analytics data, logging to your server, or displaying a privacy modal to your visitors. Whatever you’re doing, your TMS is helping you do it.
The sample code below assumes I want to do something when any element with the .looks-like-a-button class name is clicked. The code does four things:
- Finds all elements matching the CSS selector
- Attaches a cross-browser “click” event listener
- Populates the utag.data[“tealium_event”], utag.data[“button_id”], and utag.data[“button_name”] data layer variables by way of the extension-specific b object
- Triggers a utag.link() event, passing in the values specified in #3 above
- Copy the code above
- Modify the selector and event as needed
- Paste the updated code into your extension
- Specify a condition (if needed)
Assuming you’ve already set up the specified Data Layer values (tealium_event, button_id, and button_name), you’re ready to start building load rules, tags, and other extensions that leverage what you’ve just built.
What do you think? How do you approach similar situations with Tealium IQ?
* TiQ does have a “Link Tracking” extension, which appears specific to links (<a>). This is a simple, worthwhile extension when that’s all you need to track, but rarely is that all I need to track.