2019/07/06 (2020/05/03)

Jekyll製ブログにGoogle Analytics導入

ツール・サービス

ブログ, Jekyll

先日、当ブログに Google Analytics を導入したので、その流れをメモしておきます。

Google Analytics とは#

Google が提供するアクセス解析ツール。
有料版もありますが、無料版でも多くのデータが得られます。

サイトへのアクセス数
サイトページごとの閲覧数
アクセスしたデバイスの種類
どこの国からアクセスがあったか

などなど。

導入#

Google Analytics 側#

まずは Google Analytics のページから登録します。すでに Google アカウントがあれば、そのアカウントで利用可能です。
どのサイトで利用するか等、入力していきます。

登録すると、すべてのウェブサイトのデータの画面になります。

管理 → トラッキング情報 → トラッキングコードに移動すると、Google Analytics を利用するために必要なトラッキングコードが確認できます。
ブログ側で埋め込みに使用するのでコピーしておきます。

※黒で塗りつぶしている箇所は、トラッキング ID が記載してあります。

ブログ側#

トラッキングコード埋め込み#

先ほどのトラッキングコードを、全てのウェブページの<head>タグに埋め込む必要があります。

使用しているテーマによっても異なると思われますが、自分が使用している jekyll-theme-hydeout では、元々このためのファイルが存在していました。
ただ、Google Analytics で確認したトラッキングコードと異なっていた（古くなっていた？）ため、新しく同名のファイルを作成して上書き。

また、トラッキング ID の箇所は、config.ymlに切り出したかったので以下のように変数にしました。

{% if jekyll.environment == 'production' and site.google_analytics %}
  <!-- 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>
{% endif %}