Web elements template

[Hith]

Hi,

I'm still new to this space and haven't used any analytics tool before, can someone please help answer if there's a way to create a template to collect metrics around navigation bars, buttons, links on the web page that I can use to accommodate for different channels?

Thanks!

[Jennifer_Dungan]

Hi, 

There are many ways to go about this, I'm sure everyone here will likely have a slightly different take. For my own implementation, I like to use the built-in Activity Map (with some minor configurations) to pick up navigation elements automatically. This means I don't need to create a lot of custom click tracking, I don't inflate my server calls (which we know our contracts are based on number of server calls), and for the most part it's pretty dynamic.

One thing you should know about, is that the Activity Map values track on the "next" page view, this is how it reduces server calls.

Activity Map collects three pieces of information:

• Activity Map Page - which uses the PageName value of the page where the link was clicked
• Activity Map Link - which is the Link Text of the link that was clicked
• Activity Map Region - which is the region on the page

Out of these three, Activity Map Region isn't the best out of the box... by default it grabs the closest id attribute up the chain from the link... but since developers naming conventions aren't always the easiest to identify this arguably isn't really what you probably want to use... however, with a little work you can create a customized breakdown of your site and make regions that make sense to you and your users... starting with things like "header", "footer", "main nav", "sub nav", "main content", "right rail", "left rail", etc - you can get as detailed as you need.

I would suggest reading up on this to see if this would work for you. Frederik Werner wrote a recent blog post about this subject (and while I do mine a little differently the basics are essentially the same): https://www.fullstackanalyst.io/blog/adobe-analytics/understanding-and-getting-the-most-out-of-activ...

To be honest, while Frederik does show the "plugin" side of this... I haven't used the plug-in in years.. but I use Workspace extensively to pull out data. Since I want to see things like use of "main nav" across the entire site, or I want to see what regions/pages are bringing people to page X, etc... 

This is a super powerful tool that when used right can get you a lot of information right away, and as you build on it, you can make it super powerful.

[Hith]

Thanks for your response. 

But while configuring data collection, basically using Javascript code, can we create a template for one page and reuse it for another with minor changes to the code?

[Jennifer_Dungan · Accepted solution]

Unless I am mis-understanding your question:

If you are using Activity Map... the "Activity Map Page" should provide the variation you need by default.

This will allow you to pull ALL navigation links site wide (using region "main-nav" for instance).... Or pull the use of "main-nav" based on a specific page (i.e. "home" page).

If you want to pull the usage of groups of pages (i.e. content pages - like articles, blogs, videos, etc; or maybe "section" pages) IF you page names are formatted in such a a way that you can use a "Activity Map Page" contains "X" to group those page types, that can work as well... if your page names aren't formatted in such a way, that can be more difficult and may cause challenges.... 

You could try to create region names that are specific to page types (like "home|main-nav" vs "section|main-nav", etc (using whatever format you choose)... but I will warn you that your developers may not want to try and code all these variations in per page, and if could cause more overhead on the rendering of the content.. things like your main nav tend to be shared assets.. you don't normally create a lot of variation to them... but it could be done; just work with your team to figure out a solution that works for everyone.

If this wasn't what you meant, please let me know and I will try to answer you better.

[Alexis_Cazes_]

You might as well check other tools that provides you with a heat map view of your page like ContentSquare, it also allows you to do recording of users session so you can understand in depth how users use your site. Also it is better when you want to understand specific bug as you can see in recordings how your site behaves. 

Another approach is to ask your developers to update the data layer with details about element interacted with. Nowadays website are created based around reusable components, so developer will just add additional logic around components your want to track and push details in data layer. If you check this article : https://dev.to/alcazes/generic-data-layer-1i90 and check the events section you will see properties defined to accommodate this. 

i.e when an ACTION or FORM - FORM_FIELD_ACTIONS happens the following properties in the event object should be defined:

• pageSection
• element

This should give you enough details to report on top elements interacted with on the page. Also if you have same element on the page like an Apply button at top and bottom of page, the pageSection property will allow you to understand at which location the button is interacted with the most.

Overall I think your choice should depend on how much details you need, what type of reporting you need (i.e: table or visual) and how much dev time/expense you want to put in.