This article covers a Hippo CMS version 7.7. There's an updated version available that covers our most recent release.

Add Google Analytics tracking to your site and the CMS 

Since CMS 7.7

Google Analytics integration is available since Hippo CMS 7.7.

Hippo CMS 7 provides support for tracking site statistics using Google Analytics in the form of an addon. This page gives an overview of the functionality provided by this addon and the steps needed to use this addon in your site and the cms.

Provided functionality

The Google Analytics addon consists of the following three modules:

  • org.onehippo.cms7:hippo-addon-google-analytics-repository: repository configuration for Google Analytics addon.
  • org.onehippo.cms7:hippo-addon-google-analytics-frontend: 1) Google Analytics configuration service that can be used by cms plugins that want to access Google Analytics data access API to create custom reports; 2) document hits plugin that can be added to a document editor template to show a graph showing the hit count over a configurable period of time.
  • org.onehippo.cms7:hippo-addon-google-analytics-hst: tags and tracking code to incorporate Google Analytics tracking into an hst site.

To use this functionality specify the following dependencies in your poms:

cms/pom.xml:

<dependency>
  <groupId>org.onehippo.cms7</groupId>
  <artifactId>hippo-addon-google-analytics-frontend</artifactId>
</dependency>

<dependency>
  <groupId>org.onehippo.cms7</groupId>
  <artifactId>hippo-addon-google-analytics-repository</artifactId>
</dependency>

site/pom.xml:

<dependency>
  <groupId>org.onehippo.cms7</groupId>
  <artifactId>hippo-addon-google-analytics-hst</artifactId>
</dependency>

Then in site/src/main/resources/META-INF/hst-assembly/overrides place the following file: google-analytics.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">
  <import resource="classpath:/org/onehippo/cms7/hst/ga/config/hippo-google-analytics.xml" />
</beans>

This will make sure the required Spring components are loaded.

Set up Google Analytics tracking for your site

If you haven't set up a Google Analytics account yet you will need to do that first. Go to http://www.google.com/intl/en/analytics/ and sign up for google analytics. You will probably want to create a dedicated Google account for this.

Configuring the account id

Assuming you have successfully set up a Google Analytics account, the first thing you need to do is to configure the id of the account in the repository.

The account id is used by the tracking code. It is sent to Google Analytics as part of the tracking request whenever a user requests a page on your site.

You can find this id by logging into Google Analytics and viewing the account information by clicking the name of the account in the account listing. You will be presented with a listing of website profiles. Next to the name of the website you have configured you will see a string starting with UA- and then a number. This is your account id.

Go to the CMS console and browse to the node /hippo:configuration/hippo:modules/googleAnalyticsConfiguration/hippo:moduleconfig. Specify the property hippogoogleanalytics:accountId with your account id.

You will probably want to add this configuration automatically when bootstrapping the repository. To do this add a file with the following contents to your content module:

<?xml version="1.0" encoding="UTF-8"?>
<sv:node xmlns:sv="http://www.jcp.org/jcr/sv/1.0"
  xmlns:h="http://www.onehippo.org/jcr/xmlimport"
  sv:name="googleAnalyticsConfiguration"
  h:merge="combine">
  <sv:node sv:name="hippo:moduleconfig" h:merge="combine">
    <sv:property sv:name="hippogoogleanalytics:accountId" sv:type="String" h:merge="override">
      <!-- TODO: specify your account id -->
      <sv:value>UA-XXXXX-XX</sv:value>
    </sv:property>
  </sv:node>
</sv:node>

and then in hippoecm-extension.xml add a corresponding initialize item:

<sv:node sv:name="myhippoproject-prod-google-analytics-configuration-properties">
    <sv:property sv:name="jcr:primaryType" sv:type="Name">
      <sv:value>hippo:initializeitem</sv:value>
    </sv:property>
    <sv:property sv:name="hippo:contentresource" sv:type="String">
      <sv:value>hippo-configuration/google-analytics-configuration-properties.xml</sv:value>
    </sv:property>
    <sv:property sv:name="hippo:contentroot" sv:type="String">
      <sv:value>/hippo:configuration/hippo:modules</sv:value>
    </sv:property>
    <sv:property sv:name="hippo:sequence" sv:type="Double">
      <sv:value>910</sv:value>
    </sv:property>
  </sv:node>

However, if you add this bootstrapping code to your default content module then the account id will be available during development of your site, and developer visits and page views will be registered with Google Analytics. This is probably something you will want to avoid. To do that you must add this bootstrapping configuration to a content module that is only deployed to a production environment.

Adding the tracking code to your site

To add Google Analytics tracking code to your site first add the following taglib declaration to a global jsp page, such as a general layout page that is always rendered:

<%@ taglib uri="http://www.onehippo.org/jsp/google-analytics" prefix="ga" %>

This imports the hippo Google Analytics addon jsp library. Then, in the same page, just before the closing html body tag add the following snippet:

<c:if test="${not composermode}">
    <ga:accountId/>
    <hst:link var="googleAnalytics" path="/resources/google-analytics.js"/>
    <script src="${googleAnalytics}" type="text/javascript"></script>
  </c:if>

The accountId tag inserts a piece of javascript inside your page that defines a javascript variable holding the account id. This is then used by the google-analytics.js script that is included next and which is also delivered by the Google Analytics addon HST module.

Tracking document views instead of page views

The Google Analytics addon frontend module delivers a CMS plugin that can show the number of times a document is viewed over time. However, in order for this plugin to work your pages must tell Google Analytics to track the document path instead of the page path. You do this by using the <ga:trackDocument /> tag inside a detail page that shows the document you are interested in.

Say your site has a section that shows details of products like the Go Green demo site does. Then you will have a products detail page with a corresponding ProductDetail.java component. In this scenario you first add something like the following to your ProductDetail.java component class in order for the bean that represents the current product to be available in the jsp page:

Product document = (Product) getContentBean(request);

if (document == null) {

  redirectToNotFoundPage(response);

  return;

}

request.setAttribute("document", document);

Then in the jsp that displays the product add the following tag:

<ga:trackDocument hippoDocumentBean="${document}"/>

The tag will add a piece of javascript to your page that will be picked up later by the google-analytics.js we saw earlier.

Note that you can track multiple documents on a single page in cases where your pages display more than one document at a time. Do consider however that usually you don't want to let overview pages track documents as if they were viewed.

Adding the document hits plugin to the editor

The Google Analytics addon frontend module delivers a plugin for showing a graph of document views over time. The following describes how to add this plugin to the editor.

Configure Google Analytics account information

First you need to configure /hippo:configuration/hippo:modules/googleAnalyticsConfiguration/hippo:moduleconfig with the login details and data feed table id for accessing the Google Analytics data. Change the properties hippogoogleanalytics:username and hippogoogleanalytics:password with the corresponding details of the account you are using. You also need to set the value of the googleanalytics:tableId property. You can find this by going to the Google Analytics data export API query explorer, click on the dropdown labeled "click to list your accounts", and select your account. The table id is shown in the left input field.

Register the plugin with the editor

Assuming you have a document type with a two column layout editor add the following node to /hippo:namespaces/myhippoproject/mydocumenttype/editor:templates/_default:

<?xml version="1.0" encoding="UTF-8"?>
<sv:node sv:name="documentHits"
  xmlns:frontend="http://www.onehippo.org/jcr/frontend/nt/2.0"
xmlns:sv="http://www.jcp.org/jcr/sv/1.0">
  <sv:property sv:name="jcr:primaryType" sv:type="Name">
    <sv:value>frontend:plugin</sv:value>
  </sv:property>
  <sv:property sv:name="caption" sv:type="String">
    <sv:value>Document Hits</sv:value>
  </sv:property>
  <sv:property sv:name="interval" sv:type="String">
    <sv:value>weeks</sv:value>
  </sv:property>
  <sv:property sv:name="numberofintervals" sv:type="String">
    <sv:value>15</sv:value>
  </sv:property>
  <sv:property sv:name="plugin.class" sv:type="String">
    <sv:value>org.onehippo.cms7.ga.editor.DocumentHitsPlugin</sv:value>
  </sv:property>
  <sv:property sv:name="wicket.id" sv:type="String">
    <sv:value>${cluster.id}.right.item</sv:value>
  </sv:property>
  <sv:property sv:name="wicket.model" sv:type="String">
    <sv:value>${wicket.model}</sv:value>
  </sv:property>
</sv:node>

Registering the plugin for different layouts should be almost the same. The only difference will be the wicket.id property. Inspect the properties for the other registered plugins to see what values you can use.

The graph displayed by the plugin can be configured by the following two properties:

interval: the time interval between two data points or more technically: the Google Analytics dimension that is used.
Possible values: days, weeks, months
Default value: weeks
numberofintervals: the number of data points on the graph or less technically: how far back in time your graph must display document hits
Default value: 10