*

Googleアナリティクスでスクロール計測でページ読了率のまとめ

公開日: : 最終更新日:2017/06/01 ライブラリ , , ,


LINE facebook twitter URLコピー
B! pocket Evernote 楽天


読了率
Googleアナリティクスでスクロール計測をして、ページのコンテンツ読了率をトラッキングしようという試みの公開が、また最近増えてきた気がします。

こんにちは、Googleアナリティクス大好きカグア!です。

昨年くらいから、jQueryとは異なるスクロール計測の手法が公開されるようになってきました。ちょっと忘れそうでしたので、備忘録的にまとめました。

>>人気の「Googleアナリティクス: 本」最新一覧はこちら。
Amazonで詳しく見る

追記:2017年6月1日 GTMで自作した方法を追加。今はこれで計測しています。
追記:2016年9月21日 InRead事例を追加。
追記:2016年9月12日 WordPressプラグインとリンクを少し追加。

関連記事
>>GoogleアナリティクスでYouTubeや動画再生の計測方法まとめ
>>Googleアナリティクス基礎:パラメーターの設定や使い方<完全版>
>>Google Analytics で読了時間を計測できるプラグイン GA Read2End
>>イベントトラッキングの設定、ユニバーサル・タグマネージャ対応2015

GAで読了率を調べる手法

Google製プラグインAutotrack

WEB担の安田さんが公式ドキュメントを日本語訳、解説記事まで書かれるという偉業。すごいです。開発者が対象で、Google アナリティクスの正式なプロダクトではなくGoogle アナリティクス プレミアムのサポート対象外とのことですが、高度なトラッキングができそうな雰囲気です。

>>Googleアナリティクスの便利プラグイン詰め合わせAutotrackのドキュメント日本語版 | 編集長ブログ―安田英久 | Web担当者Forum
>>autotrack/README.ja.md at master ・ nebosuker/autotrack
>>Analytics Blog: Autotrack turns 1.0

主な計測拡張はWeb担記事をご覧ください。それでも、ソーシャルトラッカー、シングルページアプリケーション計測、フォーム送信計測など、魅力的なトラッキングメソッドが実装されています。

pageVisibilityTracker

プリンシプル佐藤さんの解説記事。autotrackをなんとGoogleタグマネージャに実装するというテクニック。

pageVisibilityTrackerを使い、タブ放置の時間を可視化したレポートを掲載。凄い。

>>今日から使える、Googleアナリティクスの新しいプラグイン | 株式会社プリンシプル

パララックス利用

2016年9月の記事。getBoundingClientRect() というメソッドをつかって対応。スマホもしっかり検知するようです。スクロールは、addEventListenerで検知。

記事によりますと、「クーポンの表示やテキストのどの段落まで読了したか」などに有用とのことです。

>>Googleアナリティクスで特定の要素を表示したときにイベントトラッキングする – Qiita

ディレイドページビュー

addEventListenerは、beforeunloadやpagehideを使い検知。「ページビューヒットの送信を、ページ離脱のタイミングに繰り延べ」してPVヒットの送信を離脱のタイミングにすると手法。

具体的なコードには触れられていませんでしたが、応用して読了率をレポートしているキャプチャもはられていました。

>>Google アナリティクス|ディレイドページビューによる滞在時間の計測 | 株式会社プリンシプル

GTMとjQuery

jQueryで、$(window).bind(“scroll”~を使ったテクニック。プリンシプル木田さんの解説本の手法を用いて、Googleタグマネージャに実装しています。

>>Googleタグマネージャで読了率を試す(できる逆引き・実践技240 P335) | 株式会社ウェブ改善・分析企画開発リサーチ

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応 : 木田 和廣, できるシリーズ編集部

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応 : 木田 和廣, できるシリーズ編集部 : 本 : Amazon.co.jp
Amazonで詳しく見る

スクロールデプス

2015年に話題になったjQueryプラグイン。有名ブログのcolissさんが2014年に紹介して以降はGoogleアナリティクスで読了率といったら、ほぼ解が出た感じでした。以降、GTMと絡めたりチューニングしたりと、多くの情報がネットに出ました。

>>[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth | コリス
>>jQuery Scroll DepthとGoogleタグマネージャでページのスクロール量を計測してみる。| マリンロード
>>jQuery Scroll Depthを使ってみたので詳細を書いとく – ファンブログハック
>>googleAnalyticsを利用した10%単位でスクロールイベントを取得する方法 株式会社アクトゼロ
>>GoogleAnalyticsで指定箇所までスクロールしたかを計測する方法

広告業界でも有名なでぶててさんでも紹介されてしたね。
>>[Scroll Depth] Googleタグマネージャで、LPのスクロール率を計測する方法 | 超雑食系ブログ

ga_scroll.js

こちらもjQueryでスクロールイベントを取得して、イベント計測しているタイプです。

>>Web Analytics or Die ≫ Blog Archive ≫ Google Analyticsで、どこまでスクロールしたのかが分かる

inviewとendポイント

GTMとjQueryを使い、inviewプラグインによる読了率の計測。読了をしめすタグに #read-to-end などとID付与しエンドポイントを設定。それを検知します。

>>Google Analytics 読了率計測方法※GoogleTagManager必須 | Blitz Marketing

わたしもかつてスクロールとエンドポイントの検知で読了率を計測するスクリプトは書いていました。
>>Google Analytics で読了時間を計測できるプラグイン GA Read2End

面倒にはなるのですが、ページサイズを測り算出するタイプとは異なり、レスポンシブなどPCとスマホとで同じコードでいけるのがいいんですよね。前述のものはレスポンシブかスマホかなど動作検証が不可欠です。

追記:InRead事例~読了時に広告表示

DIVタグにInReadというIDを付与して、ページ下部に来ると広告がスクロールダウンして表示されるのが東洋経済のニュース記事。
>>巷の「BABYMETAL論」は、ほぼ間違っている | 映画・音楽 | 東洋経済オンライン | 経済ニュースの新基準

何かしらのJSで、InReadを検知しているはずなので、この手法が気になる人は検証してみると良いかと思います。あと、何気に dataLayer で渡してる内容もたくさんあって、解析屋には垂涎モノですよ。

※どうもJSで検知ではなくswfっぽいような気もしますが未検証です。

WordPressプラグイン

こちらのGoogleアナリティクスプラグインでもscrolldepthがありました。
>>Google Analytics Suite — WordPress Plugins

GTMのライブラリ

アクセス解析関連ブログで有名なルナメトリクスでGTMのJSONが公開されていて、それで稼働するっぽいです。jQueryレスっぽい。
>>jQueryを使わないScroll Tracking – Qiita

追記:GTMで自作した

結局、自作しました。本文の最後にIDを後から付与して、そのIDが表示領域に来たらイベント発生。
>>Googleタグマネージャ事例:GTMでスクロール読了率の計測と分析

それなりに計測できて、レスポンシブにも対応できているので、安定しています。

スクロール計測に注目が集まった背景

GA標準はページ解析

ページ解析

Googleアナリティクスでは、標準で「ページ解析」というクリックの状況を調べる機能に対応しています。Chrome拡張もリリースしています。
>>Page Analytics (by Google) – Chrome ウェブストア

いっぽうで上図のように、リンク箇所のクリック率などを可視化するといった一定の機能は果たすものの、ページごとのスクロール率を比較したいなど、データを活かした分析を望んだアナリストやWeb担当者には、思ったほどは受け入れられていないようでした。

ヒートマップによる読了率

Ptengine

かつてからアクセス解析のツールとして利用されていたヒートマップが注目されることとなります。そしてPtengineが制限付きながら無料のスマホ対応ヒートマップをリリースしたことで、ページ内解析の利用が広まったように思います。
>>ヒートマップ付きアクセス解析ツール | Ptengine

テクロコ社もGoogleアナリティクスのイベントトラッキングを利用したヒートマップやスクロール計測のサービスをリリースし、後に無料化に踏み切ります。
>>ヒートマップ – GAと連携してユーザーの動きを見える化|brick

スクロール

国内でもページ内導線の解析に注目が集まることとなりました。

ユーザー単位の分析

そして2016年に入ると、Googleアナリティクスでユーザーエクスプローラーが実装されました。ここで、ユーザー単位の分析が注目を集めることとなります。
>>速報!Googleアナリティクスにユーザー導線を分析できる新機能

ユーザー行動とGoogleアナリティクスを紐付けるようなソリューションにも注目が集まるようになります。
>>日本経済社、Google Analyticsを活用したCRM傾向分析パッケージの販売を開始:MarkeZine(マーケジン)

さらに、実店舗アナリティクスやインストアマーケティングの技術も向上してきました。
>>リアルの世界をデータ化する! 実店舗解析サービスのABEJAが目指す未来 | マイナビニュース

プリンシプル木田さんも人感センサーを用いたIoT機器をGoogleアナリティクスの計測に使う、という事例を紹介しています。
>>Raspberry PiとメジャメントプロトコルによるIoTのトラッキング | 株式会社プリンシプル

GoogleもAdWordsなどで来店コンバージョンを発表するなど、Webに留まらない「ユーザーの行動すべて」を最適化していこうというマーケティング手法に注目が集まる機運が高まっています。
>>Google 新サービス「来店コンバージョン」測定機能をセブン&アイ・ホールディングスが導入し… – Google 広告主コミュニティ

そのような視点においては、Webにおいてコンテンツマーケティングが隆盛をほこっている現状において、コンテンツの中をどこまで読んだのか、どういったコンテンツが好まれるのか、という分析ニーズが高まっているように思います。
>>コンテンツマーケティングとは?成果に直結する10のポイント | UIDEAL

リアルの世界からコンテンツの詳細まで、ユーザーの行動をトラッキングしていこう、というニーズが今後も高まっていくのだろうと思います。そんな流れのなかで、再びスクロール計測の手法に注目が集まったのかと思います。

追記:2016年9月12日 さらに新たなソリューションもGoogleから発表。すごい。
>>Google、新しい「デバイスをまたいだアトリビューション」レポートとベンチマークを発表 | RTB SQUARE

JavaScriptの進化

最近わたしがよく使いますのは、querySelector()です。以前ですと、jQueryでDOM操作をすることが多かったのですが、JavaScriptが最近かなり強力になってきたので、DOM操作がとても楽になってきて重宝しています。GTMと合わせますと、以前よりほんと楽に記述できるようになった気がします。

ここ数年のJSってほんと凄くて、顔認識のライブラリももう結構前からオープンソースであって、これなんかもGAのMeasurement Protocolと組み合わせると、実店舗トラッキングとかにも応用できるかもと思っちゃいます。
>>Webカムを使って頭を認識し、オブジェクトを動かす·headtrackr MOONGIFT

キータでもGoogleアナリティクスタグのキャッチアップが欠かせませんね。
>>GoogleAnalyticsに関する240件の投稿 – Qiita

わたしもひさしぶりにいろいろと作りたくなってきました。また作りましたら共有したいと思います。今後も「リアルからページ内部まで」は確実に広がりそう。

関連情報リンク

スクロール量でGTMを発火させる。
>>【jQuery】スクロール量に応じて発火するサンプルコード

JavaScriptを配布。
>>Parsnip: Product Design, UX, Front End Development

その解説。
>>Googleアナリティクスでページの読了率を計測する|コラム|メンバーズ

スクロール量の取得。
>>Googleタグマネージャで画面のスクロール位置を把握する方法 | EVERRISE アドテクブログ

GoogleタグマネージャでjQueryを使いたい時はこちら。
>>GoogleタグマネージャとjQueryで好きな位置にタグを表示する – AdSense広告配信タグも | Google アナリティクス

YouTube埋め込みを計測する方法はこちらで公開されていました。すばらしい。
>>Google AnalyticsでYoutubeの動画がどれだけ再生されたかを分析する – Qiita

GTMで管理できるとそれはそれで、速くなりそう。
>>Google タグマネージャで Web ページに読み込む JavaScript を管理してみる | WWW WATCH

scrolldepthを使ってGoogleタグマネージャでスクロール計測。
>>Googleタグマネージャーを使ってスクロール計測 | jaxx2104.info

GTMを使うといろいろなJS挙動はコントロールできますね。
>>エフトラEFO活用法 | UI改善ブログ by f-tra

オートページャーがあると、また複雑になりますね。
>>Googleが推奨するSEOに適した無限スクロールの構成方法 | 海外SEO情報ブログ

スクロールコンテンツはホント普及しましたよね。
>>スマホ向け“縦スクロールマンガ”を描くための入門書、MdNとcomicoが共同発行 -INTERNET Watch Watch

FIREBASEとの接続も。簡単そうですね。
>>Google アナリティクスに、Firebase Analyticsで計測した数値を表示させてみる – Qiita

公式情報「Welcome to Google Analytics Platform Principles」の日本語訳。これは嬉しい!
>>Google アナリティクス プラットフォームの仕組み | アイディーエス 会社案内

AMPだとクライアントIDが変わるよ、という話。公式では通常のGAとAMP計測のGAは別プロパティにしたほうが良いとの提案。
>>GoogleアナリティクスのAMP対応を利用する際に注意すべきたった一つのこと – datalove’s diary

まとめ

脱jQueryの動きが増えてきたように思います。たしかにHTML5のAPIもほんといろいろなことができるようになってきましたよね。

できる100の新法則 Tableau タブロー ビジュアル Web分析 データを収益に変えるマーケターの武器 : 木田和廣, できるシリーズ編集部

できる100の新法則 Tableau タブロー ビジュアル Web分析 データを収益に変えるマーケターの武器 : 木田和廣, できるシリーズ編集部 : 本 : Amazon
Amazonで詳しく見る

いっぽうで、スマホでの読了率はどれくらいの精度なのか、効果測定や、コンバージョン率向上に役立てた、という次の活用事例が今後は出てくると、また盛り上がりそうですよね。計測で満足してしまわないように、コストと成果のバランスを考えて実装したいものです。

他にもありましたら、ぜひタイムラインなどでお教え頂けると嬉しです。

「読んだよ。」

関連するほかの記事を見てみよう!
このサイトのトップページへ行く

  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑