Google Analytics for Jekyll | Desired Persona
Desired Persona
Desired Persona
Affiliate marketer. Media buyer. Developer.
Updated 16 May 2017 · 2 min read

Google Analytics for Jekyll

Setup Google Analytics in less than five minutes.

Google Analytics tracking is a free web analytics service offered by Google that tracks and reports website traffic. It’s really easy to add the tracking code to your Jekyll static website.

Login to Google Analytics and create a new property to receive a Tracking ID for your website. You will find your Universal Analytics tracking code under Admin > Property > Tracking Info > Tracking Code.

Add Google Analytics tracking to all your website pages

Create a new file called analytics.html in the _includes folder found in your Jekyll website’s directory.

Paste the Google Analytics tracking code in to analytics.html and replace your Tracking ID with {{ site.google_analytics }}. When you have finished it should look 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','https://www.google-analytics.com/analytics.js','ga');

 ga('create', '{{ site.google_analytics }}', 'auto');
 ga('send', 'pageview');

</script>

Add Google Analytics Tracking ID to Jekyll’s _config.yml file

Now you need to reference your Tracking ID in your _config.yml file. Replace UA—XXXXXXXX-X with your own unique Tracking ID.

# Google services
google_analytics: UA—XXXXXXXX-X

Finally, Google recommends placing the code in the <head> section of your website so that Google Analytics will track correctly. I opened the file _includes/head.html and placed the following code just before the end </head> tag. As a reader kindly pointed out what’s important for people to know is that the code must go in the <head> section, this file will vary depending on what Jekyll theme you are using.

{% if site.google_analytics and jekyll.environment == 'production' %}
{% include analytics.html %}
{% endif %}

Now when you run bundle exec jekyll serve, your Google Analytics tracking code will not render at all in any pages. This prevents visit from localhost:4000 messing up your analytics because by default Jekyll’s environment is set to development.

So how do you get the analytics to only show up on a production environment?

NB: It’s worth mentioning that GitHub Pages is set to jekyll.environment == 'production' automatically so you’re good to go!

If you are using another hosting provider or building your site locally, you will need to prefix the build command with JEKYLL_ENV=production like so

JEKYLL_ENV=production bundle exec jekyll build

If you have followed all the steps correctly, you now have Google Analytics installed on your static website. You can double check your files in the _site folder when you build your site, to make sure your Google Analytics tracking code has been added before you push updates to your live static website.

Did you find this tutorial helpful?

Let me know by leaving a comment.

Desired Persona
Affiliate marketer. Media buyer. Developer.