3 techniques to add Google Analytics to your SilverStripe CMS website

For a seasoned SilverStripe CMS developer, this might seem trivial. However, we've recently had lots of requests and questions from new community members about how to get Google Analytics (I'll refer to this as "GA" for the rest of my post) installed on SilverStripe CMS.

You generally have three choices when it comes to getting GA javascript code to execute on SilverStripe CMS: template, module or custom code.

The template approach

Pros

• Easiest approach
• Option to customise the javascript (if you know a little about the advanced uses of GA code)
• Only requires knowledge of html

Cons

• You'll need to learn about SilverStripe templates
• Not editable in the CMS

Firstly, you'll want to head over to your Google Analytics account and get the code snippet.

Next, you'll want to access your SilverStripe CMS code. Ideally, don't edit this code directly on your live server. Test locally, ensure your template change works before putting it on your live site.

In the "themes" folder, there should be your website templates in a subfolder, for example the default theme for SilverStripe CMS is in a folder simply called, well… "simple".

To add your GA code snippet globally to all the pages in your site, you'll want to edit the file called "themes/simple/templates/Page.ss" (remember to change "simple" to whatever your theme is called).

When you open this, if you're familiar with html, there won't be any surprises. SilverStripe CMS templates are actually just html and a selection of useful variable placeholders for the dynamic content and some programmatic operations such as looping, conditionals etc.

Google recommends to paste your code above the closing </head> tag, you might want to add some other customisations to the GA javascript (such as any event tracking).

Install a module

Pros

• Leverages already written code
• Makes use of SilverStripe CMS extensibility
• For developers, clients can update the tracking ID themselves in the CMS

Cons

• Need to learn about Composer to install
• Requires a deployment to your live server (at least the first time)

• Customising the GA code might require some knowledge of SilverStripe classes
  
  

With this approach, you'll be making use of SilverStripe CMS modules that have been created by our community of developers and are reusable under Free (as in Freedom) & Open Source licenses. It requires the use of the Composer package manager tool, luckily we have a useful video to help show you how this works.

Head over to our module website and search for "Google Analytics", there are a number of modules for this need, so you might want to look for one that suits your needs (the new module scores may help with this).

When I was working through writing this article, I came across and tried this module with good results.

To install, run the appropriate Composer command, then look over any documentation that comes with the module.

You'll need to:

• Include a template variable to render the GA javascript into your global Page.ss template (as in the first option).
• Run dev build and flush
• Login to the CMS and add your GA account ID
• Test your module feature locally and then put the code change on to your live website

Code it yourself

Pros

• Can customise it as much as you need
• Best of both CMS editable parts and more advanced aspects of GA like Google Event tracking, Custom Dimensions etc

Cons

• The most difficult method (you'll need SilverStripe CMS developer skills for this)
• You might be duplicating something already done (could you use a module?)

This is where the rubber hits the road with SilverStripe CMS. One of the other great things about SilverStripe CMS is the web framework that underpins it (this is certainly what won me over many years ago when I first started using it).

Here is a quick tutorial of how you might add GA in a more programmatic way to get the best of CMS editable and custom code parts from the two previous options. I do stress, however, that if there is a perfectly good module out there that does the bulk of what you need, you should go for that first.

This tutorial might give you some ideas of what's possible though, and could be applied to other javascript snippets you need to integrate into your website (maybe even make a module for so others can reuse your work).

I'm going to be using the Requirements and DataExtensions classes to integrate this service into our SilverStripe website.

Check out the Gist for the full code examples you can copy and paste into your own projects.

Firstly, we need to create a subclass of DataExtension, add our custom field to store the GA tracking ID.

 We then use the Config API this to extend the SiteConfig class.

Next, we'll edit the Page.php page type. Using the init() function of the Page_Controller class, we'll require the javascript for our GA snippet into our templates. Using this method, we can also pass in PHP variables directly to the javascript! Very handy. The variables are passed in as a key/value pair.

Lastly, we will create a javascript file, include the standard GA code, our variable placeholders and any more complex GA tracking. For example here, I'm going to add a simple Google Event Track action anytime someone clicks to download my Ebook as part of their marketing campaign.

You can now:

• Log to the CMS and alter the GA tracking ID if needed.
• Apply some more advanced tracking techniques (while it's hardcoded in this example, it would be possible to make this CMS editable using similar approach to the track id form field).

So there you have it: 3 different ways to get GA on your SilverStripe CMS website. Hope you've found this useful. 

Once you have Google Analytics running for your SilverStripe CMS, here are some great tips to make the most of it.