Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

 

3 techniques to add Google Analytics to your SilverStripe CMS website

Getting feedback about the performance of your website is important. Our Developer Advocate, Cam Findlay, takes you through 3 techniques for getting Google Analytics up and running on your SilverStripe CMS website.

Read post

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".

google analytics themes

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).

Custom GA code js snippet

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

 CMS editable GA account

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.

Custom GA code dataextension We then use the Config API this to extend the SiteConfig class.

Custom GA code config.yml

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.

Custom GA code Page_Controller

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.

Custom GA code javascript variables

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.

Analytics cheat sheet CTA

About the author
Cam Findlay

Cam is our Developer Advocate, joining the team after impressing them with his insightful keynotes about community development at the SilverStripe meetups.

Post your comment

Comments

  • I found this article when I was tasked by a client to add a tagging script to every page of a site without FTP access. I was able to add it through the CMS in the tracking script field on the /admin/settings/ page. Curious that you don't mention this capability here.

    Posted by NDXM, 27/03/2018 3:43am (16 months ago)

  • We use something similar to the final option, instead though we simply have two textareas in site config - one renders (raw) just above the closing HEAD tag, the other just above the closing BODY tag.

    This allows our clients to paste in any tracking code from any service they need into the appropriate spot.
    This works as usually in the section where these services offer the code they give you full copy & paste snippets so we simply train the clients that when they see that it means put it in this box.

    Thoughts on this method?

    Posted by Matthew Hailwood, 20/04/2016 7:11pm (3 years ago)

RSS feed for comments on this page | RSS feed for all comments

Like what you have read?

Sign up for our weekly blog digest sent to your inbox.

Subscribe