Google Analytics visualization

Goal

Magnolia integration with Google Analytics Reporting API https://developers.google.com/analytics/devguides/reporting/core/v3/. This integration should benefit from the "Google Analytics Visualization Demo" (https://www.magnolia-cms.com/blogs/christopher-zimmermann/detail~@google-analytics-visualization-demo~.html).

Google Analytics API Java Client - https://developers.google.com/api-client-library/java/apis/analytics/v3

This integration doesn't insert google analytics tags into pages, integration is meant to visualize the data from google analytics in Magnolia. Markting Tags module can be used for inserting the tags.

Authorization

Google Reporting API supports only OAuth 2.0 authorization. For more information see: https://developers.google.com/analytics/devguides/reporting/core/v3/gdataAuthorization

Limits and Quotas

Google Analytics is used by millions of sites. To protect the system from receiving more data than it can handle, and to ensure an equitable distribution of system resources google limits the number of request per day, number of queries per second and etc. For more information see: https://developers.google.com/analytics/devguides/reporting/core/v3/limits-quotas

To avoid exceeding quota limits the implementation needs to implement centralized obtaining data from google analytics. The scheduler can be used for it (similarly to how it's done in demo) and also Batching Google Analytics API Requests should be used.

Functions

Google Analytics visualization app

Provide the app which shows Google analytics data within Magnolia. The app should be configurable via configuration.

The demo uses Highcharts and Highstock charts which cannot be used for free in commercial products (http://shop.highsoft.com). So instead of creating the charts on our own Google Analytics Embed API should be used. The Google Analytics Embed API is a JavaScript library that allows easily create and embed a dashboard on a 3rd party website. Google Analytics Embed API documentation, Google Analytics Embed API demo

Integration with the pages app

The integration should provide several configurable column definitions and formatters to display google analytics data within the Browser subapp of Pages app. The column definitions and parameters should be configurable via configuration so they can be easily set to display various different data from google analytics.

Example from the demo showing "time on page(weekly)" column.

Show the google analytics page data within the detail subapp. Most likely in down side of the action bar or in status bar.

Issues & Question

Name of the module

Google Analytics Visualization Module was chosen and approved.

OAuth authnetication

OAuth authentication doesn't work anymore in the demo.

DEV-57 - Getting issue details... STATUS

Visualization data in pages detail subapp

Where to display data from google analytics in pages detail subapp?

Option 1: Display data in status bar. Status bar is ideal place for this kind of data, only problem is that is visible only on author instance.

Option 2: Display data in down side of actionbar. Actionbar is not place where this kind of data should be displayed, but the area provide more space than status bar.

My choice would be to display data in status bar, because in pages detail app we want to show just most important information and more details will be visible in google analytics visualization app. Of course action "show page data in google analytics visualization app" will be added to detail subapp.

Option 2 selected and implemented in MGNLGAV-6 - Getting issue details... STATUS

Commercial chart libraries

The demo uses Highcharts and Highstock charts which can be used for free only in personal or non-profit project see http://shop.highsoft.com/highcharts.html and http://shop.highsoft.com/highstock.html. So we need find free alternative or buy OEM license of some commercial chart library.

Few free alternatives to Highcharts and Highstock charts:

http://www.chartjs.org available under the MIT license.
http://d3js.org available under BSD license.
https://developers.google.com/chart/ available under Creative Commons Attribution 3.0 License.

More javascript chart libraries exists. For example see this list http://www.sitepoint.com/15-best-javascript-charting-libraries/.

Instead of creating charts on our own Google Analytics Embed API can be used.

Results of MGNLGAV-10 - Getting issue details... STATUS :

Google Analytics Embed API should fit to our use case.

<div id="chart-1-container"></div>

<script>
gapi.analytics.ready(function() {
  gapi.analytics.auth.authorize({
    'serverAuth': {
      'access_token': 'API_TOKEN'
    }
  });
  
  var dataChart1 = new gapi.analytics.googleCharts.DataChart({
    query: {
      'ids': 'ga:24199737',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
      'metrics': 'ga:pageViews',
      'dimensions': 'ga:date',
      'filters': 'ga:pagePath==/travel.html'
    },
    chart: {
      'container': 'chart-1-container',
      'type': 'LINE',
    }
  });
  dataChart1.execute();
  
});
</script>

Code above displays 'pageviews' for /travel.html page for last 30days.

Date range should be easily configurable by using custom DateRangeSelector (provided by google, see https://ga-dev-tools.appspot.com/embed-api/custom-components/). And it should not be tough to write our own components for selecting metrics, dimentsions, etc. https://developers.google.com/analytics/devguides/reporting/embed/v1/custom-components

Implementation done in MGNLGAV-18 - Getting issue details... STATUS

Instead of implementing custom components for Embed API, vaadin components are used.

Page tree