🐱
nuxt.js v2でGTMを利用する
概要
@nuxtjs/google-tag-managerを利用しているが、既に廃止済みのライブラリであるため、代替先のライブラリを調査した。
調査ライブラリ
- ❌
@nuxtjs/google-tag-manager- 既に廃止されているライブラリ
- ❌
nuxt-community/gtm-module-
nuxt3をサポートしていない
-
- 🟢
@gtm-support/vue2-gtm-
@gtm-support/vue-gtmはvue3をサポートしている -
@gtm-support/vue2-gtmはvue2をサポートしている - 設定方法は同じため,Vue3への移行も容易
-
@gtm-support/vue2-gtm を利用してGTMを導入する
想定読者
- nuxt.js v2でGTMを利用したい方
- nuxt.js v3への移行を検討している方
導入方法
1. ライブラリをインストールする
npm i @gtm-support/vue2-gtm@1.3.0
2. nuxt pluginを作成する
clientのみで利用するため、pluginsディレクトリにgtm.jsを作成する
import VueGtm from '@gtm-support/vue2-gtm'
import Vue from 'vue'
export default () => {
Vue.use(VueGtm, {
id: 'GTM-xxxx',
})
}
3. nuxt.config.jsにpluginを追加する
export default {
plugins: [
{ src: '~/plugins/gtm.js', mode: 'client' },
],
}
以上で、GTMが利用できるようになります。
残りの設定は、GTMの管理画面で行います。
まとめ
@nuxtjs/google-tag-managerは既に廃止されているため、代替先のライブラリを調査した。
@gtm-support/vue2-gtmを利用することで、GTMを利用できるようになった。
Discussion