Google Analyticsで指定箇所までのスクロールをプラグインなしで計測する方法

googleanalytics_scrolldepth

   

ブログとか記事が読まれているかってページビュー数だけでは見えないですよね。たとえば、ページは表示したんだけど、下まできちんと読んでいるかどうか?っていう数字。

調べていたら、GoogleAnalyticsのイベントに記事の下まで読んだかどうかというデータを蓄積していく方法がありました。

 

jquery.scrolldepth.min.jsというファイルをダウンロード

こちらのScroll Depthのサイトよりファイルをダウンロードしサーバの指定パスに配置する。
サーバに配置後、Google Analyticsが入っている箇所の後ろに以下を配置する。
Jqueryを読みこんでいない場合はJqueryも合わせてダウンロードして記述する。

<script src="DLしたファイルを置いたパス/jquery.scrolldepth.min.js"></script>
<script>
jQuery(function() {
  jQuery.scrollDepth();
});
</script>

 

Google Analyticsで動作確認

このコードで取得できているか動作確認しときます。

タグを仕込んだ自分のサイトを表示してから、Google Analyticsを開く。メニューの「リアルタイム->イベント->イベント(直前の30分)」を見てイベントにスクロール数が出ているか確認する。
スクロール率に応じてBaseline、25%、50%、75%といった数字がとれていれば成功。
なにも出ていなければ、JSが読み込まれていなかったり、タグが間違えていたりするので確認する。

 

記事下に「id名」を仕込む

すでにある場合は既存のものを使えばいい。
このサイトの場合はソーシャルボタンのところに仕込みました。

 

Scroll Depthのオプションを指定

特定のid名まで来たらカウントされるように設定しました。

jQuery.scrollDepth({
  minHeight: 0,
  elements: ['#article-foot-social', '#wp_rp_first'],
  percentage: false,
});

 

Google Analyticsで確認

成功するとelementsにid名が表示された状態で数値が出るはずです。

その他、オプションの使い方については、ScrollDepth公式サイトにあります。

// Example with options
jQuery.scrollDepth({
  minHeight: 2000,
  elements: ['#comments', 'footer'],
  percentage: false,
  userTiming: false,
  pixelDepth: false,
  nonInteraction: false,
  eventHandler: function(data) {
    console.log(data)
  }
});

これで、どの記事がちゃんと読まれているのかを確認することができます。





↓↓新最新情報をtwitterやfacebookでcheck!!!

  「いいね!」していただくととても嬉しいです^^








Top