Building Custom Analytics Report – Part5 – Experience Analytics custom Filter

In previous posts in this series we discussed the business needs for custom analytics report, I explained how to collect data, how to save them and how to aggregate the data into reporting databases and how you can display them as a SPEAK report, in this part I will show you how you can create new filter in other words how you can extend the current existing filters.

If you missed the first two posts you can check them from here:

1. -          Building Custom Analytics Report – Part1 – Introduction
2. -          Build Custom Analytics Report - Part 2 – Storing and Retrieving Data
3. -          Building Custom Analytics Report – Part3 – SPEAK Report
4. -          Building Custom Analytics Report – Part 4 – Experience Analytics New Menu.

What are the default experience analytics filters components?

We already know that the default experience analytics filter come with date and subsite filters, to be able to extend the experience analytics filters we need to identify the related files for each component,  

Mainly there are three main components, the filters container view and its logic, the filters logic and the filter view and logic, following are the default paths:

·         Filters Container and its logic

This view  name is “ExperienceAnalyticsFilterscshtml” and will be located in the following path:

\Website\sitecore\shell\client\Applications\ExperienceAnalytics\Common\Layouts\Renderings\ExperienceAnalyticsFilters.cshtml

Following is the content of this file, and as you can see it include the default rendering “filters”, 

The JS logic file name is “ExperienceAnalyticsFilters.js” and will be located in the following path:

\Website\sitecore\shell\client\Applications\ExperienceAnalytics\Common\Layouts\Renderings\ExperienceAnalyticsFilters.js

Following is the content of this file:

·         All filters logic

In this component you will find all the JS code that handle the different type of operations, like selecting subsite, picking date, setting values of filters and clearing them.

The file name is “ExperienceAnalytics.js” and can be found in the following path:

Website\sitecore\shell\client\Applications\ExperienceAnalytics\Common\Layouts\Renderings\Shared\ExperienceAnalytics.js

Following is the content of this file:

·         Filter view and logic

For each filter we will find a view and JS file that handle the different operation, as example if we want to take the subsite filter as example, following are files related:

View file name is “SubsiteFilter.cshtml” and can be found in the following path:

Website\sitecore\shell\client\Applications\ExperienceAnalytics\Common\Layouts\Renderings\SubsiteFilter.cshtml

Log JS file name is “SubsiteFilter.js” and can be found in the following path:

Website\sitecore\shell\client\Applications\ExperienceAnalytics\Common\Layouts\Renderings\SubsiteFilter.js

This filter is actually a rendering that can be found in sitecore as an item, this can be found in the core database in the following path:

/sitecore/client/Applications/ExperienceAnalytics/Common/Layouts/Renderings/SubsiteFilter

There you can find all the rendering used in experience analytics.

Did you figure it out yet? J 

I believe you should have a clear idea of what I will explain next to extend experience analytics to add a new filter.

Custom Experience Analytics filters extending Steps?

• Create new rendering component for the new filter.
• Create the following files as a copy from the original:
•  ExperienceAnalyticsFiltersExtended.js
• ExperienceAnalyticsFiltersExtended.cshtml
• ExperienceAnalyticsExtended.js
• Update the above to include your new rendering “filter”

Example?

I want to add a new dropdown filter called “Event Type”, see the updates in the files below, I highlighted most of the files that I updated:

Event type filter files:

Event Type view

Event type JS file

Container view and logic

Container view file:

Container JS File:

All filters logic

Hope the above gave a clear idea of how you can extend sitecore experience analytics filters.