Nuxtでvue-analytics(URLとタイトルのズレとか）

Nuxt.jsで静的書き出し（universal&generate）を行いましが、GoogleAnalyticsのところで少し工夫が必要でした。
その備忘録になります。

前提

Nuxt.jsでのサイト構築はSPAモードでいくつか経験していましたが、今回はページ数も少なく更新も手動なので、universalでのgenerateを選択しました。
universalとgenerateについてはこちらに詳しくあります。

• nuxt.js(v2)でgenerate納品する前にやっておきたい設定

環境

• nuxt: "^2.0.0"
• vue-analytics: "^5.16.1"
• npm

やろうとしたこと

サイトが完成に近づいたので、GAを組み込もうと思いました。以前使用したこともあり、公式でも紹介されているanalytics-moduleを導入しました。
ただ、なぜかエラーが発生したので、こちらのモジュールを使うのを諦めました。（このエラーは当方の環境依存かもしれません）

そこで上記モジュールも使っている、vue-analyticsを使うことにしました。導入はさほど難しくなく、npmしてpluginファイルを追加します。nuxtなのでpluginsフォルダに下記pluginファイルを追加します。

vue-ga.js

import Vue from 'vue';
import VueAnalytics from 'vue-analytics';
//
export default async function ({ app: { router } }) {
  Vue.use(VueAnalytics, {
    id: 'UA-1234567-0',
    router
  });
}

nuxt.confg.js

plugins: [
  { src: '~/plugins/vue-ga', ssr: false }
]

これでページ遷移したときにGAを発行してくれます。簡単ですね。
ただ、ここで問題が発生しました。ChromeプラグインのGAデバッガで確認していると、ページタイトルに正常な値が入っていません。遷移前のページタイトルが送られています。URLが正しいのでまーいいかなと思いましたが、少し粘ってみました。

ページタイトルを正確なものに

URLとタイトルのズレ

先ずページのURLとページタイトルがズレているのを修正します。いろいろ調べたのですが、routerに頼るのではなくmountedで呼ぶのが良いみたいです。こちらで議論されていて参考にしました。
pageのvueファイルに下記を追加しました。

page.vue

<script>
export default {
  head () {
    return {
      title: 'Post',
    }
  },
  mounted () {
    this.$ga.page({
      page: this.$route.path,
      title: this.$metaInfo.title,
      location: window.location.href
    });
  }
}
</script>

• page
  • $routeからパスを取得
• title
  • $metaInfoからtitleを取得
• location
  • window.locationから取得

特に変わったところはなく、期待した結果になりました。

titleTemplate

ただ、今回ページタイトルはtitleTemplateを使っています。titleTemplateはnuxt.config.jsで指定して、サイト全体の共通したタイトルスタイルを設定するものです。

nuxt.config.js

module.exports = {
  mode: 'universal',
  head: {
    titleTemplate: '%s | Qiita',
  }
}

この場合に先程のページで期待するのは「Post | Qiita」というタイトルです。ですが、先程の設定では「Post」となります。$metaInfoはページのmetaへアクセスするものだからです。
そこでプロパティを色々探していたらtitleTemplateを取得出来たので、下記のように書き直しました。

page.vue

<script>
export default {
  mounted () {
    // ここでtitleTemplateの中身を置換
    var pageTitle = this.$router.app.$options.head.titleTemplate.replace('%s', this.$metaInfo.title);
    this.$ga.page({
      page: this.$route.path,
      title: pageTitle,
      location: window.location.href
    });
  }
}
</script>

えらく長いですが、routerのapp.$optionsにheadが有り、titleTemplateにアクセス出来ました。あとは、pageの$metaInfo.titleと置換すれば、nuxtが表示してくれているページタイトルと同じものがGAに送ることが出来ます。

まとめ

スマートでは無いかもしれませんが、vue-analyticsを使って期待した結果になりました。
各ページに書くのは見た目にも保守的にもアレなので、本来はpluginかmiddlewareにすべきだと思います。今回はページ数が少なかったので、記事の通りmountedに書いています。