category icon
2021-09-17
Grav

GRAV で Google Analytics (GA4) を設定する方法

Grav
1.7.18
Grav Coder
0.1.8
profile
hikaru
Software Developer / DIY'er

(1) はじめに

本来はプラグインを作って対応するべきなのですが、ずぼらしてテーマ内のテンプレートを直接いじって対応しました。
なので、テーマを更新をしてしまうと追加したコードは消えてしまうと思います。

(2) テーマのテンプレートに gtag コードを追加

私は grav-coder というテーマを使用しているので、user/themes/grav-coder/templates/partials/base.html.twighead タグ内に以下のコードを追加しました。

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

  gtag('config', 'G-xxxxxxxxxx'); /** GA4 の『測定 ID』を指定する */
</script>

以上で完了。

(3) 公式によるプラグインの作成チュートリアル

参考までにプラグインの作り方をメモ。

https://learn.getgrav.org/plugins/plugin-tutorial