Nuxt SPAのPVを @nuxtjs/google-tag-manager を利用して計測する

morishitaです。

Nuxt の SPA を運用する際にページビューを計測しようと、@nuxtjs/google-tag-managerを導入しました。

ページがロードされるランディングは計測されるのですが、SPA 内でページ遷移したページビューが計測されなかったので調べたことを書きます。

利用バージョンは次のとおりです。

• nuxt@2.2.0
• @nuxtjs/google-tag-manager@2.1.0

@nuxtjs/google-tag-manager

@nuxtjs/google-tag-managerは Nuxt アプリケーションに Google Tag Manager を簡単に組み込めるプラグインです。

npm や yarn でインストールして、次の設定をnuxt.config.js に追加すると使えるようになります。

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

modules/README.mdに pageTrackingを trueにするとページビューも計測できると書いているので、設定してみました。

が、冒頭で書いたようにページがロードされるランディングは計測されるのですが、SPA 内でページ遷移したページビューが計測されませんでした。

で、pageTracking: true の時、何をやっているのかを調べました。 @nuxtjs/google-tag-manager/plugin.js の実装は次のようになっています。

// Include Google Tag Manager Script
window['<%= options.layer %>'] = window['<%= options.layer %>'] || [];
window['<%= options.layer %>'].push({
  event: 'gtm.js', 'gtm.start': new Date().getTime()
});

<% if (options.pageTracking) { %>
// Every time the route changes (fired on initialization too)
export default ({ app: { router } }) => {
    router.afterEach((to, from) => {
      window['<%= options.layer %>'].push(to.gtm || { event: 'nuxtRoute', pageType: 'PageView', pageUrl: to.fullPath, routeName: to.name })
    })
  }
<% } %>

見ての通りpageTracking が true の場合、router.afterEachで GTM のイベントが push されていますが、nuxtRouteというカスタムイベントを push しています。

なるほど、これを受ける設定が GTM 側に必要ってことですね。
ちゃんと README に書いておいてほしいなぁ。 「実装を見ろ」だけでもいいので。

GTM の設定

ということで、上記のイベントを受けてページビューとして計測するための設定をします。

カスタムトリガー

まずは前述の nuxtRouteを受けるトリガーとを設定します。

送信されるイベント名に合わせてnuxtRouteという名前で次の様に設定しました。

カスタム変数

次にイベントで送信されてくるデータレイヤー変数を取るためのカスタム変数を作ります。

pageUrl と routeName という変数が送られてくるので、それぞれ次の様に作りました。

カスタムタグ

最後に上記トリガーと変数を使ってページビューを記録するタグ pageView を次の様に作りました。

ランディング時にページビューを計測していた次のタグは無効にしました¹。

これらの設定を GTM で公開すると次の様にページビューが計測できるようになりました。

ページタイトルは Nuxt の VueRouter に渡ってくる値なので、ページごとの具体的な値は取れていません。

title は各ページコンポーネントで書き換えているので、これを取ろうとするとページロード前に実行されるプラグインではできません。 各ページコンポーネントのasyncDataなどで処理すれば取れると思うのですが、今回はそこまで必要なかったのでやりませんでした。

まとめ

• @nuxtjs/google-tag-managerで Nuxt に GTM を簡単に組み込める
• ルーティング毎のページビューも取れるが、GTM にそのための設定が必要。

最後に

アクトインディではエンジニアを募集しています。