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

X (Twitter) Facebook Hatena Pinterest Email Pocket

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

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

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

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

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

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タグマネージャ対応 : 木田和廣, できるシリーズ編集部

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

テクロコ社も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

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

まとめ

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

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

Amazonで詳しく見る

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

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

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

読んだよ。

Post Views: 534