Nuxt.jsでGoogle Tag Manager+Google Analyticsを使ってみた

Google Tag Manager+Google AnalyticsをNuxtで使うときに、
ちょっとめんどうだったので、その備忘録。

タグマネージャで拾ってこれるのは、aタグとかのリンクとかHTMLベースだけ。。
なので、JavaScript側で行っているページ遷移とかは取れないのでよしなにやる必要がある。

タグマネージャのモジュールの導入

@nuxtjs/google-tag-managerというモジュールがあるのでそれを使う。

インストール

$ npm i --save @nuxtjs/google-tag-manager

nuxt.config.jsの設定

  modules: [
    ['@nuxtjs/google-tag-manager', { 
      id: 'GTM-XXXXXXX',
      pageTracking: true,
    }]
  ],

pageTrackingをtrueにするとPage Viewも計測できるっぽい。
ただ、ページ遷移時にvue-routerのafterEachフックで、 カスタムイベント(nuxtRoute)を飛ばしているのでGTM側の設定が必要

PVを計測する

参考: Nuxt SPAのPVを @nuxtjs/google-tag-manager を利用して計測する - アクトインディ開発者ブログ

@nuxtjs/google-tag-managerでPVを計測するために、
カスタムイベント(nuxtRoute)の設定をGTM側に設定してく

• カスタムトリガーの作成
  • nuxtRouteというイベントを飛ばしてるので、トリガーを作成
    • トリガータイプ: 「カスタムイベント」
    • イベント名: nuxtRoute
    • このトリガーの発生箇所: すべてのカスタムイベント
• カスタム変数の作成
  • イベント送信時に2つの変数が送られてくるので、受け取るために変数を作成
  • pageUrl
    • 変数タイプ: データレイヤの変数
    • データレイヤの変数名: pageUrl
  • routeName
    • 変数タイプ: データレイヤの変数
    • データレイヤの変数名: routeName
• カスタムタグの作成
  • タグの設定
    • トラッキングタイプ: ページビュー
    • このタグでオーバライド設定を有効にする: チェックON
    • 設定するフィールドその1
      • フィールド名: page
      • 値: {{pageUrl}}
    • 設定するフィールドその2
      • フィールド名: title
      • 値: {{routeName}}
  • トリガーの設定
    • 配信トリガー: カスタムイベントのnuxtRoute(上記で作成したやつ)

※2重計測されてしまうので、トリガーがAll Pagesのタグがあれば無効にしておく

クリックを計測する

ドキュメントによると、以下の感じでイベントを送信できるっぽい。

this.$gtm.pushEvent({ event: 'myEvent', ...someAttributes })

なので、JavaScript上で遷移している部分などはこれでイベントを追加していく

なお、ページ遷移時にvue-routerのafterEachフックで送っているのはこんな感じのよう

{ event: 'nuxtRoute', pageType: 'PageView', pageUrl: to.fullPath, routeName: to.name }

ページ遷移の場合

以下のような感じで、JavaScript側でページ遷移することがある場合。

window.location.href = 'https://....'; // 通常の遷移
window.open('https://....', '_blank'); // 新しいタブを開き、ページを表示

@nuxtjs/google-tag-managerと同じ感じでthis.$gtm.pushEventする。

const title = 'page title';
const url = 'https://....';

window.location.href = url;

this.$gtm.pushEvent({
  event: 'nuxtRoute',
  pageType: 'PageView',
  pageUrl: url,
  routeName: title
});

クリックイベントの場合とかも、

1. カスタムイベント/カスタム変数/タグを作成
2. this.$gtm.pushEvenで送信

でいろいろ追加できる感じ♪

以上！！

参考にしたサイト様

• Nuxt SPAのPVを @nuxtjs/google-tag-managerを利用して計測する - アクトインディ開発者ブログ