こんにちは、フルスタックエンジニアのryuです。
今回の記事では、Nuxt.jsでGTMを簡単に実装する方法を解説します。Nuxt.jsにGoogleTagManagerを導入しましょう。gtmを実装するには、nuxtjs/gtmをインストールします。そして、nuxt.config.jsにIDを入力すれば完了です。
※本ページには、プロモーション・アフィリエイトリンクが含まれています
Nuxt.jsでgtmを簡単に実装する方法解説！
どうやってNuxt.jsにgtmを導入するの？
今回の記事では、Nuxt.jsでgtmを簡単に実装する方法を解説します。手順は以下の通りです。
- モジュールのインストール
- gtmのidを入力
- 拡張機能を入れてタグを確認する
では、早速解説します。
nuxtjs/gtmをインストールする
まず、モジュールのインストールを行います。コマンドは以下の通りです。
npm i @nuxtjs/gtm
もしくは
yarn add @nuxtjs/gtmインストールが完了したら、nuxt.config.jsファイルにgtmのIDを入力します。
gtmのidを入力
次に、nuxt.config.jsファイルの編集です。
ファイルを開いて、”modules”に先ほどインストールしたモジュールを記入して、gtmのidを入力します。
export default {
modules: [
'@nuxtjs/gtm',
],
gtm: {
id: 'GTM-XXXXXXX'
}
}動作環境によって、gtmのidを変更したい場合は、RuntimeConfigを使用しましょう。環境変数にidを格納することで、本番環境のみgtmを反映させることもできます。
export default {
modules: [
'@nuxtjs/gtm'
],
gtm: {
id: 'GTM-XXXXXXX', // Used as fallback if no runtime config is provided
},
publicRuntimeConfig: {
gtm: {
id: process.env.GOOGLE_TAG_MANAGER_ID
}
},
}その他の設定については、こちらをご覧ください。
GitHub – nuxt-community/gtm-module: Google Tag Manager Module for Nuxt.js
Nuxt.jsでgtmが実装されているか確認する
最後に動作確認をしてみましょう。
gtmタグの確認をするためには、以下の拡張機能をGoogleChromeにインストールしましょう。
Tag Assistant Legacy (by Google) – Chrome ウェブストア
この拡張機能をインストールして、アプリにアクセスすると、gtmのタグが確認できました。
Nuxt.jsでgtmを実装する方法まとめ
今回の記事では、Nuxt.jsでgtmを実装する方法を解説しました。まとめると以下のようになります。
- npmでモジュールをインストール
- nuxt.config.jsにgtmのidを入力
- 拡張機能を入れてタグを確認する
Nuxt.jsとGoogleAnalyticsやGoogle広告を導入する際はgtmを使うのが便利なのでぜひ覚えておきましょう
当ブログでは、インフラに関する内容をメインで発信しています。興味のある方はこちらから。
また、Nuxt.jsについてさらに勉強したい方はこちらの参考書がオススメです。
