Showing hidden content in Aggregated Reports

Overview
Some of your webpages may include hidden content that is only displayed when a visitor interacts with the page. For example, a visitor can click a button and a pop-up will be displayed, or hover over a menu header to open the menu drop-down.

Such content is only visible if the visitor interacts with the page (i.e. loading the page in the browser without moving or clicking the mouse will not create these changes on the page), and will not be displayed in the Aggregated Reports by default. This is because the Aggregated Reports do not recreate these user events (a mouse move or click), and so additional setup is required to display the hidden content in the report.

This article provides information on how to use the Aggregated Context API to show such hidden content in the Aggregated Reports.

Using the Aggregated Context API provides a way to control how a page is displayed inside the Aggregated Reports. For example, we can use this API to show a hidden pop-up - or a drop-down menu – inside a Heatmap report. Another common example is to use the API to display collapsed steps in a multi-step accordion-styled form (where only a single step is visible at any given time). Also, this API only affects the page inside the ClickTale system, so the live page is never affected by this API, and the behavior of the live site remains untouched.

For the purpose of this article, we’ll start with a basic HTML page, and add the Aggregated Context API to that page. The final versions of the files used in this example can be downloaded from this link.

The zipped file contains BasicHTMLPage.html and the script file AggCtxtAPI.js.

Step 1 - Start with a basic HTML page
We’re starting with the most basic HTML page. This page includes button and a hidden pop-up. When the visitor clicks on the button, the pop-up is displayed.

Basic HTML page:

Step 2 - Preparing the helper function
The next step is to prepare a helper function that will allow us to easily call the API. We will call this helper function ‘ClickTaleCustomAggCtxt’, and we will use it in the following step. For now, simply copy and paste the code below into a new script file named ‘AggCtxtAPI.js’.

AggCtxtAPI.js:

Step 3 - Using the helper function to show the pop-up
We can now use the helper function to make sure that the pop-up is visible inside Aggregated Reports. We do this by passing a callback function to the helper function. This callback function will be responsible for doing the actual work (showing the pop up in this case). The updated ‘AggCtxtAPI.js’ file now looks like this:

AggCtxtAPI.js:

Step 4 - Adding the API script to the page
The last step is to add the ‘AggCtxtAPI.js‘ script file to the page. We do by using a standard HTML tag – wrapped in special ClickTale HTML comments. These ClickTale comments make sure that the script only runs inside ClickTale, so that the script will only be loaded where it’s needed (the API doesn’t need to run on the live page – it only needs to run inside ClickTale). The updated version of the basic HTML page now looks like this (notice the addition of the script at the bottom of the file):

Basic HTML page:

That’s it! The page is now properly set-up to display the pop-up inside your Aggregated Reports.


 * Don’t forget to add your tracking code so that the page is actually recorded

Important Notes:

 * The example page above (Basic HTML Page) does not include the tracking code. This code isn’t shown on the page for the sake of brevity. Please make sure that your live page does include the tracking code, so that it will be recorded (the API code is only responsible for capturing the pop-up, it does not record the page).
 * The Aggregated Context API does not apply to the Session Player. In the example above, the pop-up will not be displayed when playing back a recorded session. To add support of dynamic content for the Session Player, please see the ActivePlayback API article.
 * The special HTML comments used in ‘Step 4’ above are part of the ClickTaleExcludeBlock API.