Adding Analytics

Even when running static sites, you can still gather analytics about your users. If you are self-hosting using nginx, Apache, or another web server, you can create your own analytics based on your logs. People have been doing this for a very long time with a wide range of tools. The upside is you can do it yourself, the downside is you have to do it yourself. The posts to date have focused on consuming services that are available such as Disqus so that you don’t have to run these things yourself. The fewer services that you have to manage, the easier managing your sites will be.

I’m going to give an example of setting up Google Analytics, which allows for you to include some Javascript into your site, and Google Analytics will do the heavy lifting of processing and graphing my data. There are other alternatives such as New Relic Browser which can be employed in much the same way.

Google Analytics

The first step is to follow the Setup Analytics tracking how-to article. The only piece of information you’ll need after you’ve setup your site is the Tracking ID.

Now that you have your Tracking ID, we can implement Google Analytics. We’re going to setup Google Analytics to only run for our production environment. First, add the following to your _config.yml and replace TRACKING_ID with the one from Google:

# Google Analytics Tracking ID
ga_tracking_id: TRACKING_ID

This Tracking ID variable will be used in our Google Analytics template.

With things like Google Analytics, we only want this to be running in our places like our production environment. When we’re developing and testing locally, we don’t want this to load. If we include this code in non-production environments, it can throw off our numbers.

Create a file in the _includes directory called googleanalytics.html that looks like this:


<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', 'UA-75433646-1', 'auto');
  ga('send', 'pageview');

</script>

The two things to notice are the first line, which tells Jekyll to only use this code in the environment named production. Second, you’ll see that we’re using the site.ga_tracking_id setting that comes from the earlier setting in our _config.yml.

Next, we need include this new analytics file in our default layout. In _layouts/default.html, add {% include googleanalytics.html %} at the top of the <body> section. Once included, the first few lines of your default layout should look like this:

<!DOCTYPE html>
<html>

  {% include head.html %}

  <body>

    {% include googleanalytics.html %}
    {% include header.html %}

Once you’ve done that, you’re done. To build your site and include the Google Analytics code we’ve included, pass in JEKYLL_ENV=production when running jekyll build:

JEKYLL_ENV=production jekyll build