GridsomeでGoogle Analytics 4を使う方法

公式のプラグインはGA4に対応していない

Gridsomeには公式のGoogle Analyticsプラグイン「@gridsome/plugin-google-analytics」が存在しますが、こちらは旧Google Analytics用のプラグインなので、Google Analytics 4（GA4）に対応していません。

コードを入れてみてもトラッキングされません。

GridsomeでGA4を使うならGoogle Tag Managerを使おう

GridsomeはVue.jsベースなので、Vue.jsでGA4を使う方法を探していたら下記のページがありました。

Vue.jsでGoogle Analytics 4(GA4)に対応する方法

このページによると、Google Tag Managerを使う必要があるようですね。

GridsomeにGA4を組み込んでみる

では、実際に実装してみます。Google Tag Managerで計測タグを発行して、GA4と連携ができているものとします。連携する際は、「Google アナリティクス GA4 設定」というタグの種類を使ってください。

まず、Google Tag ManagerについてはVue.js向けの「vue-gtm」をGridsome向けにカスタマイズした「gridsome-plugin-gtm」があるので追加します。

npm install gridsome-plugin-gtm --save

// or

yarn add gridsome-plugin-gtm

インストールができたら、Gridsomeの設定ファイル（gridsome.config.js）にプラグインの指定を追加します。

module.exports = {
  siteName: 'Gridsome',
  //
  //以下省略
  //
  plugins: [
    {
      use: 'gridsome-plugin-gtm',
      options: {
        id: 'GTM-XXXXXXX',
        enabled: true,
        debug: true
      }
    }    
  ]
}

「GTM-XXXXXXX」のところを自分のプロジェクトの計測タグにします。これだけでGridsomeでGA4が使えてしまいます。きちんとページ遷移なども計測されています。すごい簡単ですね。

以上、GridsomeでGoogle Analytics 4を使う方法でした。