Vue CLIでGA4を導入する方法

Vue CLIで作成したプロジェクトにGA4（Google Analytics 4）を使う場合は「vue-gtm」というプラグインがあってGoogle タグマネージャー経由で連携します。

ちなみに、Vue.jsとGoogleアナリティクスを連携する「vue-analytics」というプラグインは2022年9月現在はGA4に対応していないので注意しましょう。

Does this library support GA4?
Nope! GA4 is only supported by the new gtag.js library which you can find in the vue-gtag package. This package only uses analytics.js which doesn’t provide that feature.

GitHub – MatteoGabriele/vue-analytics: Google Analytics plugin for Vue

vue-gtmのインストール

まずはvue-gtmをインストールします。

npm install vue-gtag

Vue3の場合

app.jsを下記のように設定して、「id」の部分にGoogle タグマネージャーのIDを入力します。

import { createApp } from "vue";
import { createGtm } from "vue-gtm";
import router from "./router";

const app = createApp(App);

app.use(router);
app.use(
  createGtm({
    id: "GTM-○○○○○○○○"
  })
);

Vue2の場合

Vue2の場合はVue.js自体に合わせて少し書き方が変わりますが、「id」にGoogle タグマネージャーのIDを入力することは変わりません。

import VueGtag from 'vue-gtag';
import router from "./router";

Vue.use(VueGtag, {
  config: {
    id: 'GTM-○○○○○○○○'
  }
}, router);

「vue-analytics」が対応していないのでGoogle タグマネージャーを経由する方法しかできませんが、これでGA4に対応できます。