How to track on click events with Tealium jQuery onHandler extension?

[tomas_balciunas]

So at the moment I have following JS extension:
jQuery('.chat').click(function() {
var chat_source = jQuery('.chat').attr('data-source') ? jQuery('.chat').attr('data-source') : (jQuery('.chat').attr('name') ? jQuery('.chat').attr('name') : "Undefined source. Talk to Web team.");

// SiteCatalyst
if(s){
s.linkTrackVars = "eVar1,eVar2,events";
s.linkTrackEvents = s.events = "event1";
s.eVar1 = "D=g";
s.eVar2 = chat_source;
s.tl(this,"o","Chat Started");
}

}

How do I convert this code into Tealium jQuery onHandler extension?

[adrian_browning]

Hi Tomas,

So what you will need to do if you want to use the jQuery Event handler is to:
1) Select the appropriate extension so either 1.6 and below / 1.7 and above
2) Set the selector to ".chat"
3) Change Trigger On to on click
4) Set Tracking Event to custom
5) Add the following code to the JS text are:

//---Start
var chat_source = jQuery('.chat').attr('data-source') ? jQuery('.chat').attr('data-source') : (jQuery('.chat').attr('name') ? jQuery('.chat').attr('name') : "Undefined source. Talk to Web team.");

utag.link({
"chart_source":chart_source,
"linkTrackVars": "eVar1,eVar2,events",
"linkTrackEvents" : "event1",
"URL" : utag.data['dom.url'],
"link_text":"Chat Started"});
//---End
In the mappings for the Site Catalyst Tag make sure that you have a mapping for:
chart_source to eVar2
URL to eVar1
and a event mapping for event1 to be fired when link_text equals "Chart Started"

Hope this helps

Adrian

[tomas_balciunas]

Thanks Adrian. I was reading on previous posts that Tealium automatically appends "linkTrackVars" and "linkTrackEvents". Is that true only in some specific cases?

[adrian_browning]

Hi Thomas,

You are indeed correct there is functionality to allow you to auto link tracking.
It is more out of habit that I set these as it means no other values will be sent across if an extension was populating other variables.
If you are happy that nothing else will be set or if anything else is added you are happy for that to be sent across as well, then feel free to remove these key value pairs from the JSON object.

Adrian

[tomas_balciunas]

Right, ok. Thanks a lot for your help. I will keep using custom JS though as it requires to write same amount of code and less set up.

[jared_hislop · Accepted solution]

Adding to Adrians Comment, if you do not want custom js code you can select "Link" in the Tracking Event drop down. Then you can add a new variable, chat_source. Select Chat source from the first drop down then select JS Code in the "To:" drop down and paste the in-line if statement into the box:

jQuery('.chat').attr('data-source') ? jQuery('.chat').attr('data-source') : (jQuery('.chat').attr('name') ? jQuery('.chat').attr('name') : "Undefined source. Talk to Web team.");

Then select "link_text" as the next variable, leave the "To:" box as Text and type in "Chat Started"

Then you can add URL as a new variable and select variable from the "To:" drop down and select url as the option. However, if eVar1 is always mapped to the URL this step isn't needed.

Then just as Adrian said make sure you have the mappings set up for chat_source and the event mapping defined.

If you are on the H25 or H26 linkTrackVars and linkTrackEvents will get set automatically for you.

So in the end it will look like this:

[jared_hislop]

It is set to None after the server call is made so that the next server call starts with a clean slate. Tealium will automatically set linkTrackVars and linkTrackEvents based off of the mappings and what is defined in the extensions. Are you saying that when you click on this button all the variables from the previous server call are also firing? What acccount / profile is this for? I'd like to check the SiteCatalyst template to see if it has the latest update that clears the variables after the server call. Thanks

[tomas_balciunas]

I looked at it again and actually it fires only one evar out of 4 previously defined. Also it fires completely different page name. It is an existing "thankyou" page name but I have no idea where does the onclick handler get it from. Account: rackspace Profile: test Let me know if you need more details.

[jared_hislop]

The functionality to clear the variables does not clear the page name. This is by design. Also, whenever you call s.tl() (which is the utag.link function) even though the page name shows up in the server call SiteCatalyst will *not* capture this value and count it as a page view. SC recognizes the "click" server call and disregards the pageName value. In your profile, I only see eVar2 mapped. I am assuming this is the one that is firing. For eVar1 you'll need to either map url to eVar1, which would send the url into eVar1 on each server call. Or you'll need to add a variable called link_url and add it to the jQuery click handler extension like: Set: link_url To: Variable - then select url from the drop down. Then map link_url to eVar1 in the mapping toolbox. This will fire eVar1 and eVar2 along with event5 as you outlined in the original question. Are there more variables that should fire?

[tomas_balciunas]

Thanks a lot! For testing purposes i did not define evar1 so it's fine. For page name I also understand now. The only other thing is that it fires is evar11 which it should not. You can test the onclick if you go to beta.rackspace.co.uk and click on "Live Chat" (top right). Clicking this will fire to sitecatalyst calls. You should look only at "rackspace-emea-dev" call.

[jared_hislop]

Ahhh, it's becoming clear now. I love dev sites :) eVar11 is being set from a cookie value, which is being persisted in this case. The functionality to clear eVars and props does not clear the cookie values. So if you want to not pass this value then you'll need to do an extension that will clear the cookie when the link_name equals a value or from some other condition. Here is an example:

[tomas_balciunas]

Correct me if I'm wrong, so that means that Tealium sets linktrackvars and linktrackevents to "none" and then starts clearing the variables manually and anything that is not cleared still will be passed with s.tl() (because of the none value in linktrack variables). Maybe I'm wrong but isn't it better to set correct values to linktrack variables which will ensure that only defined sitecat variables will be tracked and therefore no need to do a manual variable clean up?

[jared_hislop]

Tomas, I may have misunderstood your original question. linkTrackVars and linkTrackEvents are set to "None" on page load because on page load they are not needed. linkTrackVars and linkTrackEvents are only used for link tracking. When utag.link or s.tl() is called, Tealium will only set linkTrackVars and linkTrackEvents to "None" if there aren't any values. The clearing of the variables happens *after* each server call that is made so every time SiteCatalyst gets called the server call is starting with a clean slate. So to answer your question, Tealium already does what you suggest, but with the addition of clearing the variables after each server call to ensure data isn't being sent when it shouldn't. If linkTrackVars and linkTrackEvents were set to "None" before the server call was made then no variables would get sent to SiteCatalyst. In your specific case, eVar11 is populated with a cookie value. Tealium does not clear cookie values after each server call, only SiteCat variables. Because that cookie has a value that is persisted, it contains a value each time SiteCat is called. Because it contains a value, our mappings will pick it up and populate eVar11 with the value of the cookie. Then because eVar11 has a value Tealium will auto populate linkTrackVars with eVar11. Hope this helps clear things up. Cheers!

[tomas_balciunas]

Got it! Thanks for such a detailed explanation! My confusion was around what and when is called during the whole process. I was not aware that the mapping is done again when s.tl() is called because normally s.tl() calls contain limited and specific variable only to that particular call.

[jared_hislop]