Google Analytics with Jekyll

Help
1

Hi,

I’ve created a new Google Analytics account and added an analytics.html file under the _includes dir with the code for my GA account like

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-????????-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-????-1');
</script>

And it works but I’m not sure if I should add anything else so I can track of every page the user visits (because it looks like I’m only tracking the home page).

In this page https://markomatic.me/blog/jekyll-google-analytics/ it talks about the default.html file located in the _layouts directory and right above the closing </body> tag add {% include tracking.html %}

which I do not have.

Thanks for your help!

1 Like
2

To answer your question, yes, you need that script on every page.

To start you off on the right path:

  1. Visit Google Tag Manager Quick Start Guide
  2. Notice that there are 2 scripts to install on every page you want tracked
    a. the JavaScript excerpt like your current script you have above (although it looks like you’re missing a few items [see their example], this is to be located in the
    b. The iframe that’s supposed to be located in the
  3. Now, once you have the correct scripts (visit your GTag manager dashboard and copy and paste both script), you have a decision to make, do you want to manually add them to every page, or you want to create 2 partials (I call them layoutPartials, but Jekyll refers to them as includes)? Let’s be efficient, and choose the includes path.
  4. Create 2 files in includes:
    a. src/_includes/GoogleTagManager_head.liquid
    b. src/_includes/GoogleTagManager_body.liquid
  5. In GoogleTagManager_head.liquid add the JavaScript snippet from GTag manager dashboard
  6. In GoogleTagManager_body.liquid add the non-JavaScript code/iFrame snippet from GTag manager dashboard
  7. So, if you’re still with me (and I hope you still are =), it’s time for you to reference these in the layout file you are using for your blog (actually, if you have more than 1, add to all layout files).
    a. In the of your layout, {% include GoogleTagManager_head.liquid %}
    b. In the of your layout, {% include GoogleTagManager_body.liquid %}

Hoping this helps get all your pages tracking well! Give thumbs up if it helps :+1: so others can learn as well as mark as the answer..

All the best

2 Likes
3

Thanks Vsiege

Now, 2 days later it looks like it works with the google code i pasted. I have the statistics of the pages and viewers, so I think it works.

1 Like
4

:grinning:Glad to hear it!

Hope the above can helps another one of the community. Take care.

5

Did you do anything else? I created the _includes folder and the analytics.html file . I pasted the code that google gave me into that file and saved it.

I restarted my Jekyll server list this

bundle exec jekyll serve --drafts

But I don’t see any references to google in the page source. Also google analytics doesn’t show any data being reported. o/c it’s only been about 30 minutes of me refreshing different pages to try to generate traffic.

6

@majorgear if you are just rendering a script in a layout then try step away and look back at it to see what you’re missing.

You might start with putting it directly on a .md page then move it to a layout and then to includes file, testing at each step. Also make sure you it in a layout that is being used and if you make say H2 changes that the content appears

In case you are using a flow where it is only rendered on a production build use

JEKYLL_ENV=production bundle exec jekyll s

I also covered a few approaches to using Analytics if you want to try them. minima theme vs includes vs plugin

1 Like
7

Side note on GTM references in an earlier comment, for anyone confused about Google Analytics vs Google Tag Manager.

Even if an approach below references Google Tag Manager, that is just where the GA script usually comes from. You don’t have to login to GTM at all, you could login to Google Anlytics only and get all the functionality you need.

8

Great points. I did some additional research which revealed the source of my confusion - there are several different ways to implement GA depending on the use case.

In my case, I’m using the Minima theme. To enable GA , I had to add my tracking id to the “google_analytics:” variable in _config.yml. Minima takes care of the rest.

I could probably also use _includes and other methods, but I’m satisfied with using the variable for now.

Until I decide to switch themes :wink:

9

I believe this one is more complete. Google Analytics for Jekyll – Desired Persona

10

I guess I like things simple :laughing:

in _layout/default.html
{% include google_analytics.html %}

none of this complicated _config.yml bizzo etc etc

11

Dear Michael,

I can’t find the Cheatsheet you mention in the post.
I’m having problems with this, as Google analytics doesn’t show any data being reported for mi Jekyll site.

Can you (or someone else) explain step by step how to implement this when you are using a Jekyll template website, but you don’t have in your main directory neither an _includes or a _layouts folder?

Thanks for the help!

12

Oops sorry I moved the page

13

Hey – no worries. I’ve resolved this on my side. Many thanks for this guide!

1 Like