Expand my Community achievements bar.

SOLVED

Top Navigation Tracking

Avatar

Level 2

Hi there,

I need to track clicks on the dropdown navigation menu (Javascript menu).

How can I do it with Adobe Analytics?  

Thanks

N.

 

Nav Tracking.png

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

There are many ways to do this... but first and foremost do you actually need to track these as clicks??

 

By which I mean, adding click tracking to these element will create additional server calls, which affects your overall contract costs... An alternative to this, and this is something I use for our menu, is to use Activity Map to track these.

 

Activity Map is a very slick function that when a link is clicked (that takes you to another page), three pieces of information are collected, then passed as context data on the following page view (or as part of the exit click, if the link goes external to your site).

 

Those pieces of information are:

  • Link Text
  • Link Region
  • Page Name of the Page where the link was clicked

 

Now, this method does take some getting used to (and yes, you can use the Activity Map plugin on your browser to see the info as an overlay, I don't do this.. I exclusively use the information available in Workspace - primarily using the dimensions Activity Map Link and Activity Map Region, and the metric Activity Map Link Instance)

 

Now, out of the box.. sometimes the Activity Map data isn't the easiest to use...

 

https://experienceleague.adobe.com/docs/analytics/analyze/activity-map/link-tracking/activitymap-lin...

 

I have created custom Link Regions in our sites using data-lpos="region-name", and adding this code to my implementation:

s.ActivityMap.regionIDAttribute = "lpos";

(lpos I believe stands for "link position", you could use any value.. just so long as the attribute and the code to detect it match)

 

In this way, with our developers, I can control how each region of our sites gets recorded... in the case of main navigation, you could group all under data-lpos="main-nav" or you could add the first data-lpos around all, then for each sub menu you could use something like data-lpos="main-nav|products|cybersecurity" (allowing you to pull ALL main nav items by:

Activity Map Region contains main-nav

and then see each specific drop down by it's main header (products) and classification (cybersecurity)

 

If you have multiple languages for your site, you could even override the default "link text" which is susceptible to tracking based on the exact text in the site, which changes, and use something like 

onclick="s_objectID='abc'

 

To override the collected data to a value of your choice ("abc")

https://experienceleague.adobe.com/docs/analytics/analyze/activity-map/link-tracking/link-tracking-f...

 

Or, you could add some custom code to the LinkID to extract another custom data attribute, which means you aren't adding a bunch of "onclick" JS to your buttons...  I personally would do the second, as it ensures no potential conflict with site functionality (in case the developers have other inline onclick functions for other purposes)

 

 

Now, Activity Map aside, if you still really want to track clicks on your main nav links, you can set this up without a developer by using Adobe Launch to create a rule, using the Click trigger, and finding the appropriate CSS selector to identify your main nav links

Jennifer_Dungan_0-1690951203365.png

 

Once you have identified and tested that your selector is working for all the links you want, and nothing else; you can build out the tracking call for them... make sure you trigger the "Link / Action" beacon s.lt()

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

There are many ways to do this... but first and foremost do you actually need to track these as clicks??

 

By which I mean, adding click tracking to these element will create additional server calls, which affects your overall contract costs... An alternative to this, and this is something I use for our menu, is to use Activity Map to track these.

 

Activity Map is a very slick function that when a link is clicked (that takes you to another page), three pieces of information are collected, then passed as context data on the following page view (or as part of the exit click, if the link goes external to your site).

 

Those pieces of information are:

  • Link Text
  • Link Region
  • Page Name of the Page where the link was clicked

 

Now, this method does take some getting used to (and yes, you can use the Activity Map plugin on your browser to see the info as an overlay, I don't do this.. I exclusively use the information available in Workspace - primarily using the dimensions Activity Map Link and Activity Map Region, and the metric Activity Map Link Instance)

 

Now, out of the box.. sometimes the Activity Map data isn't the easiest to use...

 

https://experienceleague.adobe.com/docs/analytics/analyze/activity-map/link-tracking/activitymap-lin...

 

I have created custom Link Regions in our sites using data-lpos="region-name", and adding this code to my implementation:

s.ActivityMap.regionIDAttribute = "lpos";

(lpos I believe stands for "link position", you could use any value.. just so long as the attribute and the code to detect it match)

 

In this way, with our developers, I can control how each region of our sites gets recorded... in the case of main navigation, you could group all under data-lpos="main-nav" or you could add the first data-lpos around all, then for each sub menu you could use something like data-lpos="main-nav|products|cybersecurity" (allowing you to pull ALL main nav items by:

Activity Map Region contains main-nav

and then see each specific drop down by it's main header (products) and classification (cybersecurity)

 

If you have multiple languages for your site, you could even override the default "link text" which is susceptible to tracking based on the exact text in the site, which changes, and use something like 

onclick="s_objectID='abc'

 

To override the collected data to a value of your choice ("abc")

https://experienceleague.adobe.com/docs/analytics/analyze/activity-map/link-tracking/link-tracking-f...

 

Or, you could add some custom code to the LinkID to extract another custom data attribute, which means you aren't adding a bunch of "onclick" JS to your buttons...  I personally would do the second, as it ensures no potential conflict with site functionality (in case the developers have other inline onclick functions for other purposes)

 

 

Now, Activity Map aside, if you still really want to track clicks on your main nav links, you can set this up without a developer by using Adobe Launch to create a rule, using the Click trigger, and finding the appropriate CSS selector to identify your main nav links

Jennifer_Dungan_0-1690951203365.png

 

Once you have identified and tested that your selector is working for all the links you want, and nothing else; you can build out the tracking call for them... make sure you trigger the "Link / Action" beacon s.lt()

Avatar

Level 2

I have tried with Activity Map. It does not captured the data. I will try the other method.

Thanks

N.