Journey to Jekyll: Part 2 - Google Analytics

In a previous post, we covered how to get your Jekyll blog working with Bluemix. Once you start posting your content, you’ll want to do more with it and will want to see how many pages are accessed and who’s coming knocking from where. For this, one of the easiest ways to get started is to use Google Analytics.

This is really easy to do but I’ll post the instructions here simply to show you how easy it is!

Step-by-step

  1. To get started, you need to make sure you have a Google ID (e.g. by signing up for GMail or such). If not, sign up for a Google ID that you want to use.
  2. Next, visit Google Analaytics and log in. If you have multiple Google Accounts, I would recommend using a private browser window to log in so that your accounts do not get mixed up.
  3. Click on Admin so that you can create a new Google Analytics Tracking ID. Under Account, click on Create a New Account.
  4. Select Website and fill in the details below. Remember to set the reporting time zone to what makes sense for you.
  5. Then, click Get Tracking ID – this will bring up the Terms of Service Agreement. Read it and accept it.
  6. On the next page, you will get your Tracking ID that will start with something like: UA-11111111-1

You are now ready to get started. The page will also give you the code that you need to include into your pages. However, most Jekyll themes already include this code in the template and you only need to add the Tracking ID to the _config.yml

Open the _config.yml and just add your tracking ID to it. Rebuild your site and upload it. You’re good to go.

The first set of analytics might take up to 48 hours to start showing.

Reference Code

The theme will usually just wrap the Google Analytics code into Liquid tags and put it onto your page if an ID is provided. For the theme that I am using, this is what the code looks like.

The code below is included in the _incude\footer.html which is the fragment that is included in the layouts for the footer.

{% if site.google_analytics %}
<script>
  (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', '{{ site.google_analytics }}', 'auto');
  ga('send', 'pageview');
</script>

{% endif %}

You’ll see it does two main things:

  • Checks if site.google_analytics is defined – if it is, the above code is included into your footer and therefore the page
  • Outputs the site.google_analytics variable into the second last line after the 'create' to identify your account

That’s all there is to it – simple, and really no magic even if you want to do it yourself!

comments powered by Disqus