Vue.jsでScroll Depthが計測されない時の対処法

サイト分析において、ヘッダー内での読了率(つまりどこまで読まれたか)を分析することは重要ですよね。
そんな時に便利なライブラリはたくさんあるのですが、今回はその中の1つ、Scroll Depthについて、vue.js内で使用して上手く計測されない場合の対処法について説明します。
※analytics-scroll-depthのモジュールを使うパターンでお話しますが、このモジュールを使わない場合でも対処法は一緒になります。

まずはnpmでモジュールのインストールからです。

npm install analytics-scroll-depth --save

次に早速ソースコードの記載ですが、今回はmain.jsに記載します。また、GoogleAnalyticsのトラッキングコードもソースコード内に記載されているものとします。

まず上手く動かなかった時の例です。マニュアルには、以下のようにすると動くとあるのですが、

import scrollDepth from 'analytics-scroll-depth'

scrollDepth()

コード埋め込み後にGoogleAnalyticsでチェックしてもなぜか計測されませんでした。
反映されるまでタイムラグがあるのかな、と思ったのですが、何時間待っても何日待っても反映されずです。
scrollDepth内にconsole.logを入れてデバッグもしたのですが、イベント自体は発生している模様です。
色々試したのですが、結局以下のようにタイムラグを置いて関数を読ませると上手くいきました。

import scrollDepth from 'analytics-scroll-depth'

setTimeout(() => {
  scrollDepth()
}, 1000)

どうしてタイムラグがないと上手くいかないのかはちょっとわからないのですが…
scrollDepthとトラッキングIDの紐付けに時間かかるんめすかね。
さすがに1秒以下でページを閉じる人の読了率まで分析しても仕方がないので、このくらいのタイムラグは発生させても大丈夫かと思います。

基礎から学ぶ Vue.js