Building Custom Analytics Report – Part3 – SPEAK Report

In the previous posts of this blog series I discussed the business needs for building a custom analytics report and I showed how you can collect data into MongoDB and aggregate this data into the reporting SQL server database, now it’s time to display data as a report and of course adding this report to the existing reports under experience analytics.

Before starting you will need to install Sitecore Rocks plugin to your Visual Studio IDE, you can download it from here

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

•          Building Custom Analytics Report – Part1 – Introduction
•           Build Custom Analytics Report – Part 2 – Storing and Retrieving Data

Now as you can from the following screen shot, I opened my solution code to the right and sitecore rocks connected to my site on the left. 

What we are going to do here is to create a simple SPEAK application in which two main steps:

·         Call a controller that access the reporting database to get the information we need.

·         Display this data using the SPEAK app

You may (not) know that Sitecore SPEAK is the new UI that replace the old Sheer UI, it is being used partially since sitecore 7.2 but it becomes popular with Sitecore 8, if you are new to Sitecore SPEAK you may consider taking a look to the following:

·         https://mhwelander.net/2014/06/27/speak-for-newbies-part-1-creating-a-new-application/

·         https://cmsview.wordpress.com/2015/10/07/sitecore-8-for-beginners-creating-speak-application/

Now let’s start by adding a new SPEAK component, as you can see from the following screen shots:

You can see that Sitecore rocks will allow you to create sitecore item immediately after doing the above, see the following screen shot:

In the next you will need to update JS file by adding a new AJAX call to hit backend controller action in which you access the reporting database to get your information and return them using a simple JSON object.

Following is the code snippet for both the JS file and cshtml file of the SPEAK component:

MyReport.JS

MyReport.cshtml

Following is a code sample of the controller back-end code:

Note you can browser your report directly using a Url like the following:

http://speakpoc/en/sitecore/client/Your Apps/CustomReports/MyReport.aspx?sc_device=Firefox

In the next blog post will show how we can integrate this report with Sitecore Experience Analytics Reports.