Highlighted

jQuery On Handler Extension Tracking

Tealium Employee

I have the following HTML for a navigation element and I am attempting to track using an onHandler Extension.

<a class="static selected menu-item" title="Home" href="/Pages/home.aspx">
<span class="additional-background">
<span class="menu-item-text">Home</span>
<span class="ms-hidden">Currently selected</span>

I have also tried using the TagCompanion but have had no luck. Any ideas?

10 REPLIES 10
Highlighted

jQuery On Handler Extension Tracking

Employee Emeritus
Jim, are we talking about the a object with the "static selected menu-item" class?
Highlighted

jQuery On Handler Extension Tracking

Tealium Employee
Hey Clint, yes we are. Ideally, I could capture the event within that object and map the menu-item-text as well.
Highlighted

jQuery On Handler Extension Tracking

Employee Emeritus
Are you having problems writing the selector? Or the text value for span.menu-item-text? Or both?
Highlighted

jQuery On Handler Extension Tracking

Tealium Employee
Both. Each item within the navigation shares that same class so I could map a global link_text with the event each time any nav item is clicked but like I said it would be ideal to capture item-text. Any help is appreciated!
Highlighted

jQuery On Handler Extension Tracking

Employee Emeritus
does the parent block have a useful ID or Class?
Highlighted

jQuery On Handler Extension Tracking

Employee Emeritus

Hi Jim.

If I'm understanding this correctly this should work:

The selector should be:

a.menu-item

I'm not sure if the other classes are dynamic are not, we'd probably have to look at how your navigation functions. You'd probably need to throw in some parent selector values to make it less generic (e.g. "ul#idhere li").

To return the value of menu-item-text, you'd do this as JS code and the value could be set to any variable:

jQuery(this).children('span.menu-item-text').text()

If this doesn't work for you please contact your Account Manager so we can look at your specific use-case directly. Hope this helps!

Highlighted

jQuery On Handler Extension Tracking

Tealium Employee

Here is an extension of the html. Maybe s4-tn? <div id="zz14_TopNavigationMenuV4" class="s4-tn"> <div class="menu horizontal menu-horizontal"> <ul class="root static"> <li class="static selected"><a class="static selected menu-item" title="Home" href="/Pages/home.aspx"> <span class="additional-background"><span class="menu-item-text">Home</span><span class="ms-hidden">Currently selected</span></span></a> This is where the nav breaks in to dynamic dropdowns - I would want to track these separately though. <ul class="static"> <li class="static dynamic-children"> <a class="static dynamic-children menu-item" href="/ourcompany/Pages/default.aspx"> <span class="additional-background"><span class="menu-item-text">Our Company</span></span></a> <ul class="dynamic">

Highlighted

jQuery On Handler Extension Tracking

Tealium Employee

Hey Son,

So I have tried the following.....

jQuery Selector: a.menu-item
Primary Selector: Left this blank - this is new right?

Trigger On: click
Tracking Event: link

Set TestNav(js) to JS Code jQuery(this).children('span.menu-item-text').text()

Still not getting any result.

Highlighted

jQuery On Handler Extension Tracking

Employee Emeritus

Hey Jim,

Yes that is new. It's an enhancement so people can use the extension for AJAX events.

You should contact your AM directly so we can take a quick look. Let them know the URL if it's public (or staging info if it's not). It'd be faster for us to do quick testing and then provide you with the answer.

Highlighted

jQuery On Handler Extension Tracking

Tealium Employee
Will do - thanks guys!