Understanding and getting the most out of Activity Map in Adobe Analytics

Adobe Analytics offers a metric ton of useful features which make website tracking super easy. Next to builtin dimensions like Referrer Type or Entry and Exit Page, there are many clever metrics like Entries and Exits for any given dimension. Today, I want to show you one of my favorite features and explain why I love it so much: Activity Map!

Activity Map, also known as Click Map, helps Adobe Analytics users understand where website visitors, you guessed it, click on a given page. It comes with a bunch of dedicated dimensions, its very own user interface, and even is super easy to implement through Adobe Launch. In this post I’m going to cover some basics of Activity Map, explain why you should use the dedicated interface more often, and how you can customize it for your very own use cases. And once you’re done reading this post, watch Jenn talk about Activity Map in this great video. Let’s start!

How Activity Map works under the hood

We have to enable Activity Map before we can use it in both the frontend and backend. First, we need to switch data collection on in the Report Suite settings (under Activity Map -> Activity Map Reporting):

Enabling Activity Map reports in Adobe Analytics

This will give us some new dimensions and metrics in Analysis Workspace (more on that below). For the frontend part, which enables the actual data collection, all we have to do is enable this checkbox in the Adobe Analytics Extension in Launch:

Activating Adobe Analytics Activity Map in Adobe Launch

With this setting enabled, we can now see what Activity Map does on our page. Contrary to popular belief, Activity Map does not send out any events on its own when users click links or buttons. Instead, whenever a relevant UI element is clicked, Activity Map writes information about the element into a cookie named s_sq. This is how it shows up in the browser:

Activity Map Cookie

However, the value in this cookie is rather cryptic:

Raw Activity Map Cookie

To get to the bottom of what this means, we have to URL-decode this value a couple of times. Afterwards it will look like this:


Next to the Report Suite ID at the start of the value, we can see information about the current page (“testpage”), the clicked link (“Backtohomepage”), and the region (“BODY”) of that link on the page. With every new click this cookie will get a new value with information about the clicked element.

Next, whenever a tracking call goes out to Adobe Analytics (no matter if a Page View or Link Event) the Analytics library will attach the information as context data:

Adobe Activity Map Beacon data

Thanks to the values being written to a cookie, we can now analyze how people interacted with links on a page, even if those links lead the user away from the page. Super clever! All those parameters then show up in Analytics as Activity Map dimensions and metrics:

Adobe Activity Map dimensions and metrics

Using those metrics and dimensions is what most people associate with Activity Map today. Because the parameters get attached to whatever the next call to Analytics is, we can not only use those builtin dimensions and metrics on their own but with any other prop, eVar, or Event! The values will be quite different when used with the Page Views metric compared to Custom Link Instances. While both builtin and custom components in Analysis Workspace can help understand user behavior, there is actually a much cooler interface available. This leads me to…

Tip 1: Use the full Activity Map Interface

Activity Map comes with a full browser plugin that we can download from within Analytics by using the top menu:

Getting the Activity Map browser plugin

Once installed, Activity Map can be opened on any of your pages and show some nice bubbles which indicate where people have clicked on that page:

Activity Map overlay (source: https://www3.an.adobe.com/p/suite/1.3/images/activitymap_video.png)

Super nice! I know quite a few people working in marketing who would appreciate a nice click map overlay like this. Now, one thing that most users overlook is this little eye-icon on the Activity Map panel:

Page Details toggle in Activity Map

Once we click that icon, we are greeted with this awesome tabular view of all the links on our page, together with some handy download and search options:

Page Details in Activity Map

But wait, what is this drop-down menu on the top left where it says “Links on Page”?

What’s hiding here?

Switching the dropdown menu to “Page Details” shows my absolute favorite view on the same data:

Page Details view in Adobe Analytics’ Activity Map

Look at all that helpful information! We have some summary metrics on the left and an awesome Flow visualization as the centerpiece. And not only that: Do you see the External Referrers item in the Flow viz? You can click that to reveal all external referrers to the current page:

Page Details view with external referrers in Adobe Analytics’ Activity Map

Super neat! I know quite a lot of stakeholders who would be super happy with this exact view, it’s literally all they need in their day-to-day work. The Flow view goes even beyond what we have in Analysis Workspace today, as it’s mixing multiple aggregated dimensions in the same column. If my stakeholders are only interested in those surface-level metrics and basic flows for a handful of pages, why not given them access to Activity Map instead of overwhelming them with Workspace?

The next two tips are a bit more technical. First, let’s look at how we can…

Tip 2: Customize Link ID and Region in the page HTML

As we saw before, Activity Map tries to automatically identify each clicked element using the link’s name and the region where the link is found on the page. It achieves this using two methods:

  • To determine the link’s region, Activity Map tries to find the first element surrounding the link that has an ID attribute
  • To determine the link name, Activity Map considers a bunch of attributes of the clicked element, like the display text or link target

While this methodology is quite robust it may produce results that are not very self-speaking. On top of that, many modern websites are created as Single Page Applications or use minified code which may make HTML IDs unreadable or even random. And even if the region would make sense, we would still have an issue on international sites where the display text of a link might be localized and therefore shows up multiple times in reporting. Luckily, Activity Map gives us ways to customize this logic!

To customize the name of a link, we can change the clicked element itself to have a name of our choice. There’s two ways we can do this, depending on what we can change on the page without interfering with the normal page functionality. First, we can define an onClick function that sets the name using Java Script. For example, if we wanted to change the way the link labeled “Back to homepage” shows up in reporting, we could modify it like this:

<a href="..." onclick="s_objectID='Homepage Link';">Back to homepage</a>

By adding s_objectID=’Homepage Link’;” as an onClick function, we instruct Activity Map to take this value as the link name. While this is the way Adobe recommends us to handle this case it may interfere with other onClick handlers that should fire with this click. Luckily, we can also use a dedicated HTML attribute called s-object-id like this:

<a href="..." s-object-id="Homepage Link">Back to homepage</a>

This resolves the potential conflict and, in my experience, works just as fine. If you want to customize the reported link name I would recommend this second approach.

We don’t have something similar for the link region out-of-the-box. However, we can customize the attribute that Activity Map considers for the region by globally defining the s.ActivityMap.regionIDAttribute variable like this:

s.ActivityMap.regionIDAttribute = "s-object-region";

This example says that Activity Map should look at the clicked element’s surrounding element’s s-object-region instead of the ID. You can define any attribute you want, but if you would go with my attribute, your code should look something like this:

<div id="navigationContainer" s-object-region="Main Navigation">
  <a href="..." s-object-id="Homepage Link" style="">Back to homepage</a>

See how the s-object-region attribute sits on the div that surrounds our link? Now, instead of the link showing up as “Back to homepage” in the “navigationContainer” region, it will show up as “Homepage Link” in the “Main Navigation” region. That’s much nicer!

A word of warning before you start changing your link names for existing pages: Those attributes are super handy when you start with a fresh project that doesn’t have any legacy implementations on them but may throw things off for older pages that have already been tracked. For legacy pages it’s quite unlikely that all required links are changed at the same time, so you may end up with some broken references for links that have not been changed. Especially for those scenarios, it’s super handy to know about the option to…

Tip 3: Customize Link and Region functions

If customizing link attributes is not feasible for you or you want to maintain backwards compatibility in mixed implementations, you can also change the core logic how Activity Map works. To do that, you can overwrite the s.ActivityMap.region and s.ActivityMap.link functions. By default, they look something like this:

Activity Map Link and Region functions

If you look closely at this (minified, unfortunately) code, you can catch a glimpse of how Activity Map collects the information we discussed above. Take a look at the region function:

Activity Map Region function

We can see how Activity Map loops through the parentNode attributes of the clicked element and searches for the regionIDAttribute (that we used before) or the ID. Finally, if we make it all the way up to the body element without finding anything, we use the value “BODY” as a fallback. Very nifty!

The link function is quite a bit more complex:

Activity Map Link function

You can again see how Activity Map checks for the s-object-id attribute we used above and, if it doesn’t find one, tries to name the link by the innerText or textContent attributes (more on the hierarchy of attributes can be found here).

Let’s imagine we want to change the way we define a link’s region. For this example, I want to return the s-object-region attribute if there is one, otherwise the ID or, as a fallback, the name of the tag. All we have to do is overwrite the s.ActivityMap.region to something like this:

s.ActivityMap.region = function(clickedElement) {
  var regionId;
  while (clickedElement && (clickedElement = clickedElement.parentNode)) {
    regionId = clickedElement.getAttribute("s-object-region") || clickedElement.getAttribute("id") || clickedElement.tagName;
    if (regionId) {
      return regionId.toLowerCase();

This is adapted from this example and illustrates the functionality quite nicely. You can do something similar for the Link function too, for example when you have some custom attributes that identify the link. I quite like this way of customizing how Activity Map works as it’s independent from the actual code on the page. However, I would highly recommend to collaborate with some frontend developers to make sure all edge-cases are covered.

Closing thoughts

I hope I was able to show you something new today. If you work with Activity Map already, maybe the insight into how links and regions are named were actually useful to you. If you saw it for the very first time in this post, I recommend you take a look at the interface for yourself and see what it can do for you and your business.

As always, let me know if you have some cool examples to share for yourself and enjoy the rest of your day!