Rich-text Reply

Tracking Clicks on a Drop-Down Nav Bar

MichelleST 01-18-16

Tracking Clicks on a Drop-Down Nav Bar

Hi all,


I'm running a simple sitewide A/B test to reposition an element in my top nav, however, each link in the top nav menu has a drop-down conatining around 19 further links.


Is there a way to track these multiple links within one click-track goal? And how would I go about doing so?


I read on another thread that I can use the selector field > Advanced, then enter a selector for the link I want to track, such as:

#menu a[href~="signup.html"]


(This example will track clicks on any link inside #menu that contains "signup.html" in the target URL.)


If I use this theory, do I need to use a unique identifier for each of the 19 links, or could I use which envelopes them all?


Any help greatly appreciated!

JDahlinANF 01-18-16

Re: Tracking Clicks on a Drop-Down Nav Bar

[ Edited ]

You can track each of your links using this:

#menu a

or, if you want to track only certain ones, you can list each of them like you illustrated for the signup link.


Once the goal is in place, that goal will automatically track for all users (but is only relevant in connection to an experiment) so you could create an experiment that targets all pages of your site and actually does nothing just so that you would record how often people interact with your menu.



MichelleST 01-19-16

Re: Tracking Clicks on a Drop-Down Nav Bar

Thanks so much for your help,

Just to clarify, if I want to track links for two separate top-nav items e.g. home and blog, can I simply add '#menu a' to both top-nav selector fields and the subsequent drop-down links will be tracked separately under each menu item? (Each top nav item has a click-goal applied). I don't need to use a different selector, do I?

Thanks again and sorry for the basic questions!
JDahlinANF 01-19-16

Re: Tracking Clicks on a Drop-Down Nav Bar

Without seeing the page, I cannot say for sure, but I don't think that will work the way you want it to.


"#menu a" probably represents every link in the top-nav, so no matter which link is clicked, it would record as a success to the goal that uses "#menu a".


You will need to find selectors that capture only the links that you want tracked for each goal.

Do you have a link to a live page?

MichelleST 02-01-16

Re: Tracking Clicks on a Drop-Down Nav Bar

Thanks Nap0leon,

Here's the link to a live page -
In my experiment, I have the original vs variation 1 which moves the top nav item 'NOMES' to first position in the top nav menu. Ideally for the most accurate data, I would be able to track the total number of clicked links within the drop-down, but only for NOMES.

I don't need to track each of the drop-down links individually, just a whole would suffice.
JDahlinANF 02-01-16

Re: Tracking Clicks on a Drop-Down Nav Bar

Since the "Nomes" (names) menu item has id "babynames" and all menu-items under "names" is located inside that wrapper, you can get all <a> by using the following jQuery selector:


$('#babynames a')

If you create that as a goal, it will track all clicks on the Names header and all links in the sub-menu.

With this, you will be able to see if you get more clicks into those topics with the original menu or the test menu.