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
を次の様に作りました。
ランディング時にページビューを計測していた次のタグは無効にしました1。
これらの設定を GTM で公開すると次の様にページビューが計測できるようになりました。
ページタイトルは Nuxt の VueRouter に渡ってくる値なので、ページごとの具体的な値は取れていません。
title は各ページコンポーネントで書き換えているので、これを取ろうとするとページロード前に実行されるプラグインではできません。
各ページコンポーネントのasyncData
などで処理すれば取れると思うのですが、今回はそこまで必要なかったのでやりませんでした。
まとめ
- @nuxtjs/google-tag-managerで Nuxt に GTM を簡単に組み込める
- ルーティング毎のページビューも取れるが、GTM にそのための設定が必要。
最後に
アクトインディではエンジニアを募集しています。
-
削除しても良かったのですが、誰かが設定し忘れていると思って追加するといけないので、あえて一時停止で置いています。↩