Tealium IQ — Event Listeners and Link Tracking

Kansas City’s “The Scout” Statue

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.

UPDATE: In early 2023, Tealium released their “Events” feature, intended to simplify tracking clicks, mouseovers, form submissions, video engagement, and other actions without the need for custom coding. I’ve had mixed results when using this feature, but feel it’s a solid step in the right direction. See Tealium’s documentation for more information.

With Tealium IQ (TiQ), this capability does exist, though there’s no fancy interface that says “use this feature to do something when a visitor clicks that button.” Instead, you get to use an extension and a little JavaScript to work your magic*. (TiQ suggests using a jQuery extension. Personally, I try to avoid jQuery unless I’m 100% positive that the site already uses jQuery and I’m able to use a complimentary version of the library. Honestly, though, I just try to avoid 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:

1. Finds all elements matching the CSS selector
2. Attaches a cross-browser “click” event listener
3. 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
4. Triggers a utag.link() event, passing in the values specified in #3 above

Get the code!

In TiQ, all you need to do is create a new extension using either the “Javascript Code” or “Advanced Javascript Code” options. Then , simply do the following:

1. Copy the code above
2. Modify the selector and event as needed
3. Paste the updated code into your extension
4. Specify a condition (if needed)
5. Publish

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.