Desired Persona
Desired Persona
Affiliate marketer. Media buyer. Developer.
Updated · 2 min read

Google Analytics for Jekyll

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. Your tracking ID and property number are displayed at the top of the page.

Install Google Analytics tracking on your website

First create a new file called analytics.html in your site’s _includes directory.

Now paste the following Google Analytics tracking code in to your analytics.html file and save it.

1
2
3
4
5
6
7
8
9
10
<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>

The {{ site.google_analytics }} liquid object included above will allow us to add our tracking ID from our sites _config file.

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

Open your sites _config.yml file and add the following lines of code. It is important to reference your own tracking ID, so replace UA—XXXXXXXX-X below with your websites unique tracking ID.

# Google Analytics
google_analytics: UA—XXXXXXXX-X

Finally, Google recommends placing the code in the <head> section of your site, so that all visits to your website are tracked correctly.

Opened your head.html file which is normally located in your site’s _includes/ directory and paste the following code just before the end </head> tag.

(Important: The code must go in the <head> section of your website so that all your pages are tracked correctly by Google. This head.html file name may vary depending on what Jekyll theme you are using.)


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

In future, when you run bundle exec jekyll serve your Analytics tracking will no longer render when browsing your website locally. This prevents visit from localhost:4000 messing up your analytics because by default Jekyll’s environment is set to development.

Great right?

“But how do i setup Google Analytics to only track site visitors on a production environment?” I hear you say.

If you are using Github Pages to build your site, GitHub Pages will automatically set jekyll.environment == 'production' for you.

Only add Google Analytics when Jekyll’s enviroment = production

If you are using another hosting provider or building your site locally, you will now 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 should now have Google Analytics installed correctly on your Jekyll website.

Unsure?

Open your _site folder after you build your site. Check to see if Google Analytics tracking code was added to the <head> section of the generated files before you push updates to your live site.

Did you find this tutorial helpful? Let me know in the comments.

Desired Persona
Affiliate marketer. Media buyer. Developer.