Event Tracking with SiteCatalyst

[#1]

Function Types

Tealium has two event tracking function types: utag.link and utag.view.

utag.link – Used to track post page load events that should be tracked as “click” events and not page views. This function will trigger the s.tl() function of the SiteCatalyst code. Events may include: clicks, hovers, video plays, etc.

utag.view – Used to track post page load events that should be tracked as a page view. This function will trigger the s.t() function of the SiteCatalyst code. Events may include a modal popup that should be counted as a separate page. An AJAX heavy site may need to call this when the user views a new “page” but the browser does not refresh. This is also common in Checkout flows that do not navigate to separate pages, but rather the view changes when the user clicks “Next.”

Example - Tracking a button on your site with utag.link:

Here we are going to focus on sending the data to SC correctly. If further assistance is needed to configure the jQuery onHandler extension refer to this post: https://community.tealiumiq.com/t5/Tealium-iQ/jQuery-onHandler-Extension-jQuery-v1-7-and-up/ta-p/986...

So, let’s assume the jQuery onHandler extension is all set up to track a button on your site. Make sure the “link” option is chosen from the Tracking Event dropdown. This will trigger the utag.link function whenever the event is initialized.

Now we are going to pass three variables and an event: eVar1, prop1, pev2 (link name) and event1.

• eVar1 = Click Type
• prop1 = Click Type
• pev2 = Link Name
• event1 = User Tool Interaction

We are going to set up our JQuery Extension like so:

• Set:    click_type      To:    Text    “Social Button”
• Set:    link_name      To:    Text    “Pinterest”

Depending on how the link is coded you can also dynamically retrieve the link name or link text using something like this: 

• Set:   link_name  To:  JS Code  jQuery(this).text();

This will grab the text value dynamically from the HTML instead of using a static value.

The End result should be something like this:

Mapping Data to SiteCatalyst

Now we are going to map these data points to the SiteCatalyst tag.

1. In the Mapping Section of the tag follow these steps:
2. Select “click_type” from the Variables Dropdown.
3. Click “Select Destination”
4. In the Mapping Toolbox modal select prop1 from the Props tab then select eVar1 from the eVars tab.
5. Now select the “Events” tab
6. In the Value: box type in “Social Button” This is the value of the click_type variable that we are setting when the user clicks on the button.
7. From the Trigger Dropdown select “event1”
8. Select Apply.

The end result of the mapping should be something like the following:

To set the link text / link name value, we will use mappings to handle this. Select the variable being used to populate the link name and map that value to “linkName” like so:

SiteCatalyst also has a linkType value that can be one of three values: o, e or d.

• e = Exit Link
• d = Download Link
•  o = Other

Typically there isn’t any configuration needed when it comes to the link type. The SiteCatalyst library will automatically handle Download and Exit links if your tag is configured properly. Tealium will always default to “o” if there isn’t link type specified.

However, if you do need to overwrite the default value or just want to set this manually you can map a variable to “linkType” in the mapping section like so:

You’ve now configured your jQuery onHandler extension to create data on click of a button and pass that data to SiteCatalyst using the mappings section of the tag.