Jekyll Learning #01 - Add Google Analytics

Adding Google Analytics to your Jekyll website enables you to know more about your visitors, including the number of visitors, the time they visit, their locations and more. Sounds interesting right?

Well, nothing comes without a price. From then on, Google has an eye on your website :-)

But let’s get started and go through the steps.

Create a Google Analytics account

First, go to Google Analytics and create an account.

Then, create a property for your website. During the process, remember to open Show advanced options and turn on the switch for Create a Universal Analytics property. Input the URL of your website and choose Create a Universal Analytics property only.

Finish the property creation steps and you should see your “UA-“ tracking ID and a code snippet similar to the following (my tracking ID is replaced with “X”s btw so make sure to use your own ID).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());

  gtag("config", "UA-XXXXXXXXX-X");
</script>

Configure Jekyll settings

Use the previous code snippet to create a new file called google_analytics.html and put it inside the folder _includes of your Jekyll project. Create the _includes folder as well if you don’t have one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());

  gtag("config", "UA-XXXXXXXXX-X");
</script>

Then, include the google_analytics.html inside the layout file we want to have the tracking functionality. For me it is the default.html inside the _layouts folder.

1
{% include google_analytics.html %}

The last step is to put your tracking ID inside the _config.yml of your Jekyll website.

1
google-analytics: UA-XXXXXXXXX-X

That’s it!

Now you may access Google Analytics, clicking the left sidebar and go to REPORTS/Realtime/Overview.

You will see that your website has one visitor, which is yourself!

What a success!

References

• How to add Google Analytics to a blog hosted on Github pages

• Previous
  Hello, World! 你好，从新开始
• Next
  Jekyll Learning #02 - Mac配置Homebrew环境+国内源配置