Page tree
Skip to end of metadata
Go to start of metadata


Magnolia integration with Google Analytics Reporting API This integration should benefit from the "Google Analytics Visualization Demo" (

Google Analytics API Java Client -

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.


Google Reporting API supports only OAuth 2.0 authorization. For more information see:

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:

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.


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 ( 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 documentationGoogle 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 and So we need find free alternative or buy OEM license of some commercial chart library.

Few free alternatives to Highcharts and Highstock charts:

More javascript chart libraries exists. For example see this list

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> {{
    'serverAuth': {
      'access_token': 'API_TOKEN'
  var dataChart1 = new{
    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',

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 And it should not be tough to write our own components for selecting metrics, dimentsions, etc.

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

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

  • No labels

1 Comment

  1. Not much meat on the bone here I'd say.

    • provide summary of all issues that need to be solved (e.g.  use of commercial chart library). If you have proposed solution, list that solution as well
    • for where there are decisions pending, e.g. whether to display page data in status bar or in action bar, list pros/cons for each of the option. Make recommendation as well.
    • when suggesting to display "spent time" in pages, why exactly this number and not some other, e.g. number of page views? Provide rationale for the suggestion. Also why weekly and not say daily or monthly data? Or would that be configurable? If yes, how? Provide more details or rationale for the choice.
    • Integration w/ SEO functions
      • how, where do you plan to achieve. What is the benefit for the user? (in other words: what problem is this solving?) Please provide more details.