Nuxt Scriptsを使用してGoogle Tag Managerを設定する

こんにちは、GMOペパボのkeigoと申します。NuxtアプリケーションでGoogle Tag Managerを設定する際、さまざまなモジュールが存在しており、かつNuxt3に対応しているかどうかが分からず困ったことはありませんか？

今回は、公式が提供しているNuxt Scriptsを使用してGoogle Tag Managerを設定する方法をご紹介します。

※Nuxt Scriptsは、記事執筆時点（2024年9月11日）ではパブリックプレビュー段階にあります。

Nuxt Scriptsについて

Nuxt Scriptsは、サードパーティスクリプトを使用する際に、パフォーマンスやプライバシー、セキュリティ、そして開発者体験を向上させることが可能なNuxtモジュールです。

https://scripts.nuxt.com/

こちらの記事でもわかりやすく紹介されています ⬇️

https://zenn.dev/comm_vue_nuxt/articles/what-is-nuxt-scripts

今回はそんなNuxt Scriptsを使用した、Google Tag Managerの設定方法を紹介します。

導入

以下のコマンドを使用して、@nuxt/scriptsを導入します。

npx nuxi@latest module add @nuxt/scripts

nuxt.configでの設定

NuxtアプリケーションでGoogle Tag Managerをグローバルに設定するには、以下の設定を記述します。

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleTagManager: {
        id: 'YOUR_ID'
      }
    }
  }
})

Production環境のみ動作させる場合は、以下のように設定します。

export default defineNuxtConfig({
  $production: {
    scripts: {
      registry: {
        googleTagManager: {
          token: 'YOUR_TOKEN_ID',
        }
      }
    }
  }
})

また、環境変数を使用してidを設定する場合、以下の設定で実現可能です。

runtimeConfig: {
    public: {
      scripts: {
        googleTagManager: {
          id: '', // NUXT_PUBLIC_SCRIPTS_GOOGLE_TAG_MANAGER_ID
        },
      },
    },
  },

コンバージョンイベントを送信

コンバージョンイベントを送信するには、useScriptGoogleTagManager関数を使用します。

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID'  // nuxt.configにてidを設定している場合は不要
})
proxy.dataLayer.push({ event: 'conversion', value: 1 })

まとめ

Nuxt Scriptsを使用することで、サードパーティースクリプトをより便利に使用できます。今回はそのうちのGoogle Tag Managerの設定方法を紹介しました。

Nuxt Scriptsに関する詳細は、以下の公式ドキュメントをご覧ください。

https://scripts.nuxt.com