Nuxt.jsでGTMを追加する

Nuxt.jsでサイトを構築する際に、Googleタグマネージャ(GTM)を追加する方法をメモ。

設定方法

@nuxtjs/gtmをインストールして、nuxt.config.jsから設定できます。
まずはインストールします。

npm install @nuxtjs/gtm

yarnの場合は下記になります。

yarn add @nuxtjs/gtm

インストール後、nuxt.config.jsのmodulesに@nuxtjs/gtmを追加します。

export default {
  modules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: 'GTM-XXXXXXX'
  }
}

これでGTMの設定ができました。
GTMの設定を本番環境のみ反映したい場合など、環境によって設定を変更したい場合はRuntimeConfigを使用します。

export default {
  modules: [
    '@nuxtjs/gtm'
  ],
  publicRuntimeConfig: {
    gtm: {
      id: process.env.GTM_ID
    }
  },
}

RuntimeConfigについては以前に記事を投稿していますので、詳しくはそちらをご確認ください。