あるものがどれくらいクリックされたかを計測したかったんですが、多少詰まったのでポイントを置いておきます。 技術スタックは - Nuxt: 2.12.2 - TypeScript: 3.8.3 - @nuxtjs/google-analytics: 2.2.3 といった具合です。
詰まったのは、あちこちで紹介されている this.$ga.event() が落ちるという部分でした。
vue-class-componentはたぶんあまり関係なく、型指定の問題でした。
tl;dr
まっさらな状態からイベント計測できるところまでを紹介しますが、取り急ぎ上記問題を解決したい方はこちら。
プロジェクトルートにこんな感じのファイルを置けば上記問題は解決します。
ファイル名は *.d.tsです。適当に公式で紹介されているように my-property.d.ts とか置いておけばOKです。
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
$ga: any
}
}
NuxtにGoogle Analyticsを導入する
まずはGoogle AnalyticsをNuxtに導入しましょう。
使用するライブラリはこちら。
Setupページの手順通りにやればOKです。
モジュール導入
yarn add --dev @nuxtjs/google-analytics
nuxt.config.jsに追記
export default {
略
buildModules: {
['@nuxtjs/google-analytics', { id: 'UA-XXXXXXXX-XX' }]
'UA-XXXXXXXX-XX'となっている部分は、ご自身のトラッキングIDに置き換えてください。
トラッキングIDの確認方法はこちら
https://support.google.com/analytics/answer/1008080?hl=ja
これで完了です。
イベントを計測する
例えば、あるリンクがクリックされたことを計測したい場合はこのようなイメージになります。
<
a
@click="handleClick"
href="http://www.example.com"
>
リンク
</a>
handleClick() {
this.$ga.event({
eventCategory: 'link',
eventAction: 'click',
eventLabel: 'example link',
eventValue: 'http://www.example.com'
})
}
クリックされたときに、 this.$ga.event を実行すればOKです。
eventの詳細はこちら。
https://google-analytics.nuxtjs.org/usage/event-tracking
引数はオブジェクトで、 eventCategory と eventAction が必須になっています。
もしくは event(eventCategory, eventAction, eventLabel, eventValue) のように並べて書いても良いです。
これでクリックイベントが計測できます。…が、TypeScriptを使っていると(？)、 this.$ga が読めずに落ちることがあります。
プラグインの型拡張
Vue公式で紹介されている「プラグインで使用するための型拡張」対応をすれば通ります。
プロジェクトルートに my-property.d.ts を置きます。名前はなんでもいいです。
内容はこちら。
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
$ga: any
}
}
これで通るようになるはず。
以上、NuxtにGoogleAnalyticsを導入しつつts対応をしてみました！
