How to add content grouping for Google Analytics in Jekyll

Google has a really nice feature where you can lump different groupings of content together in order to answer questions like “what colour of shoe converts best on my site” or “what type of content has the most engagement”.

The latter question is one I’m sure plenty of Jekyll users have for their site.

If you have a content hierarchy that is clearly visible from the URL structure then you can set everything up in Google Analytics without any code changes. An example of this would be a URL that looked like;

https://mysite.com/broad-category/sub-category/content.html

This guide assumes you have more of a flat structure (like I have), with all content hanging off the root domain.

Setting up Content Grouping on Google Analytics

Step zero in all of this is to work out what content groupings you need. For my blog I have fairly simple needs, I want to know what categories of content are performing well. You may have more detailed requirements. If you do, don’t worry, Jekyll can handle it all.

Once you know what you want you need to go to the admin area for the site you care about inside of Google Analytics.

There, under the “View” section you will see Content Grouping, click on it.

For our simple case we just want to do the following;

• Click New Content Grouping
• Give it a name (I used Content Type)
• Select the Group By Tracking Code Option
• Take a note of the code used

The code to take a note of should look something like

ga('set', 'contentGroup1', 'My Group Name');

That should be everything you need to do on Google’s side. Now lets get the code set up in Jekyll.

Setting up Content Grouping on Jekyll

Locate the file where you include your Google Analytics code, it is there we need to add our new bit of code.

Your current Google Analytics code should look something like;

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']()=r;i[r]()=i[r]()||function(){
  (i[r]().q=i[r]().q||[]()).push(arguments)},i[r]().l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0]();a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-66666666-1', 'auto');

Just after the ga('create') is where we want to add our new code. But we need to do something a bit more special than simply copying and pasting. The dummy code we have has the hard-coded value of “My Group Name” we need to replace this with our category name, and we don’t want to include the code at all if we are on a page without a category.

Jekyll has some lovely properties which make this simple. Here is the completed code, I will explain it shortly;

{% if page.categories.first %}
  ga('set', 'contentGroup1', '{{ page.categories.first }}');
{% endif %}

The if block says “only execute this next line if there is non-empty content for page.categories.first.

• If there is no page attribute, we won’t get in.
• If we’re on a page but we haven’t defined any categories, we won’t get in.
• If there are several categories, that is great, for our needs we just care about the first.

The code within the if simply replaced that hard-coded string we spoke about with the first category on our page. Imported to note the ' around it because this isn’t a simple JavaScript variable that will turn into a string, Jekyll would just put out an unstringified word and JavaScript wouldn’t know what to do with it.

I hope that helps, Content Grouping is really powerful and I would advise you get started with it!