# Vue CLIでGA4を導入する方法

URL: https://webrandum.net/vue-cli-ga4/
公開日: 2022-09-06
更新日: 2022-09-06
カテゴリー: アクセス解析・サイト運用, コーディング
タグ: Googleアナリティクス, Vue CLI, Vue.js
出典: Webrandum（著者: サイトウ マサカズ）

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に対応できます。