vue.js

Nuxt.jsでgtmを簡単に実装する方法解説!GoogleTagManagerを導入しよう

こんにちは、フルスタックエンジニアの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を確認する拡張機能

この拡張機能をインストールして、アプリにアクセスすると、gtmのタグが確認できました。

gtmタグの確認

Nuxt.jsでgtmを実装する方法まとめ

今回の記事では、Nuxt.jsでgtmを実装する方法を解説しました。まとめると以下のようになります。

  • npmでモジュールをインストール
  • nuxt.config.jsにgtmのidを入力
  • 拡張機能を入れてタグを確認する

Nuxt.jsとGoogleAnalyticsやGoogle広告を導入する際はgtmを使うのが便利なのでぜひ覚えておきましょう

当ブログでは、インフラに関する内容をメインで発信しています。興味のある方はこちらから。

また、Nuxt.jsについてさらに勉強したい方はこちらの参考書がオススメです。

About me
大手メーカのIT部門→上場ベンチャーでインフラエンジニアやってます。エンジニア歴は8年目。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!