jQuery On Handler Extension Tracking

[james_hartley]

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?

[Clint]

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

[james_hartley]

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

[son_hoang]

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

[james_hartley]

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!

[Clint]

does the parent block have a useful ID or Class?

[son_hoang · Accepted solution]

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!

[james_hartley]

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">

[james_hartley]

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.

[son_hoang]

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.

[james_hartley]

Will do - thanks guys!