Google Analytics is the goto web tool to understand web traffic that comes to your site. It provides useful information like, where a user is from, how long they are on your website and what pages they have visited. Google Analytics could be used to make powerful design and business decisions based on what your users are doing.
One of the first things that I do when setting up a new website with Jekyll, is create a new Google Analytics account so that I could start collecting data from the website the moment it is up and running.
If you’ve got a Google account, getting Google Analytics is super easy. Since the steps in getting a Google Analytics account are better explained in their official website, I won’t be covering it here. Instead here is a link to the site.
Once you’ve created a new Google Analytics account for the site you want to track, you’ll want to grab the Google Analytics tracking code. This tracking code is a short piece of JavaScript that you include on all the pages you want to gather data regarding visitors to your website.
The tracking code could usually be found under Admin > Property > Tracking Info > Tracking Code.
On the Tracking Code page, take note to write down both the tracking ID and the tracking code which is found under a heading Global Site Tag (gtag.js). What I usually do is open up a blank text file and copy and paste both the tracking ID and code in there, to have it handy later.
Adding Google Analytics to all your pages and posts in Jekyll
Now that you’ve got your Google Analytics tracking code, it’s time to put it in all the pages and posts of your Jekyll project. This may sound daunting since immediately you might think to yourself, I have to copy and paste that tracking code in every single page that I create with Jekyll?
The answer to your question is no! Thanks to the templating system found in Jekyll, we can paste the tracking code once into a file and reference that file to have Jekyll include Google Analytics into every page it generates for us.
To start, create a new file called analytics.html in the _includes folder found in your Jekyll project.
├── _includes
│ ├── analytics.html
Paste the Google Analytics tracking code into analytics.html. And you should have something like this:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X');
</script>
Where UA-XXXXXXXX-X is your tracking ID.
Now we’ll include it in your layout so that it’ll be included on all your pages when Jekyll builds your project.
Open up the file default.html found in the _layouts folder.
Then right above the closing </head> tag you’ll want to add {% include analytics.html %}.
// _layouts/default.html
...
{% include analytics.html %}
</head>
<body>
Now if you run jekyll build from the command-line and open up a page like index.html found in the _site folder, you’ll see that your Google Analytics tracking code is included in the page.
This is great, since you define it once and your tracking code is automatically added to every single page Jekyll generates for you. Even any new post you create will automatically have Google Analytics added to it.
However there is one problem with the way Google Analytics is currently implemented. If you run jekyll serve to serve up your website locally on your machine, all your pages will still have Google Analytics added into them and by navigating to those pages, it will actually ping Google Analytics as a site visit.
What this means is, if you visit your Google Analytics account, you’ll see a bunch of visits from localhost:4000 or 127.0.0.1:4000 depending on the type of operating system you’re developing your Jekyll project. This can potentially muddy up your analytics, so to mitigate this problem, we’ll set Jekyll to only render Google Analytics when its environment is set to production.
To do this, you’ll want to open up default.html again found in the _layouts folder. Then you’ll want to wrap {% include analytics.html %} with {% if jekyll.environment == 'production' %}{% endif %} like this:
// _layouts/default.html
...
{% if jekyll.environment == 'production' %}
{% include analytics.html %}
{% endif %}
</head>
<body>
When you run jekyll serve, your Google Analytics tracking code shouldn’t render at all in any pages. The reason for this is, by default Jekyll’s environment is set to development.
So then, how do you get the analytics to only show up on a production environment? When building your Jekyll project with jekyll build, you’ll want to prefix it with JEKYLL_ENV=production so the complete command looks like,
JEKYLL_ENV=production jekyll build
Check your files in the _site folder, you’ll see that they are being built with the Google Analytics tracking code in them.
Place your Google Analytics tracking ID in your _config file
If you’ve found this article to be helpful, chances are you’re not using Jekyll’s default theme – Minima – but a custom one. When using Minima, the author made it simple to include Google Analytics into your Jekyll project. Navigate to the _config.yml file, add the key google_analytics with your tracking ID as the value and boom you’ve now got Google Analytics on your site.
But you chose to go the custom route and create your own theme. You followed the solution found in this article and like Minima, you too could move your tracking code to the _config.yml file.
Back in _includes/analytics.html replace UA-XXXXXXXX-X with {{ site.google_analytics }} like this,
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ site.google_analytics }}');
</script>
Open up your _config.yml file and add google_analytics: "UA-XXXXXXXX-X" replacing UA-XXXXXXXX-X for your own tracking ID.
To take it one step further, you could also open up _layouts/default.html and add a logical and operator to the if statement to only render the block if the google_analytics key exists in your _config.yml file,
// _layouts/default.html
...
{% if jekyll.environment == 'production' and site.google_analytics %}
{% include analytics.html %}
{% endif %}
</head>
<body>
Now the if statement checks to see if Jekyll is first being built in a production environment and that the site variable google_analytics exists with site.google_analytics before rendering the analytics code.