Googleアナリティクス(GA)の便利なプラグインについてご紹介します。
GAは、標準でページのスクロール到達率が把握できません。このプラグインを使うと、ページのスクロール到達率がわかるようになります。
GAでの設定サイトは、本家サイトや、いくつか解説されているサイトがありますので、今回は、Googleタグマネージャで管理する方法を紹介します。
Googleタグマネージャって何?って方は、過去の記事をご覧ください。
2m3g1.com/tag/google-タグマネージャ
告知:スクロール計測の新しい手順作成しました!
[kanren postid="3632"]
目次(ページ内リンク)
何が計測できるのか?
ページスクロールに関して、以下の2点を確認できます。
・ページ到達状況
・ページの到達時間
ページ到達状況を把握できる
ベースラインに対して、ページのどのあたりまで(ベースライン⇒25%⇒50%⇒75%⇒100%)、どのくらいのユーザーが進んでいるかを確認することができます。
下の例では、ベース(26件)に対して、100%の位置(最後)まで到達したのは7件となります。
ページの到達時間を把握できる
それぞれの到達部分まで(25%、50%、75%、100%)
平均で何秒かかっているか確認できます。
下の例だと、100%まで平均17秒で到達しています。
他にも、指定した高さ(ピクセル)までの到達率を計測したり、
各要素までの到達率が計測できるみたいですが、今回は基本的な事項を設定します。
設定方法の大まかな流れ
1.Scroll Depth(javascriptファイル)の入手
2.サイト(HTML)へのタグの埋め込み
3.Googleタグマネージャ:マクロ作成
4.Googleタグマネージャ:ルール作成
5.Googleタグマネージャ:タグ作成
6.動作&計測確認
1.Scroll Depth(javascriptファイル)の入手
以下のサイトから、「jquery.scrolldepth.min.js」を入手します。
ダウンロードボタンから対象ファイルを任意のディレクトリに保存します。
Scroll Depth - A Google Analytics plugin for measuring page scrolling
scrolldepth.parsnip.io/
2.サイト(HTML)へのタグの埋め込み
まずは、HTMLのhead部分に以下のスクリプトタグを埋め込みます。
jQueryはすでに導入されていれば、不要です。
<!-- jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
"js/jquery.scrolldepth.min.js"の部分は、「jquery.scrolldepth.min.js」が格納されているファイルパスを指定してください。
<!-- スクロールデプス --> <script src="js/jquery.scrolldepth.min.js"></script> <script> jQuery(function() { jQuery.scrollDepth(); }); </script> <script> // このScriptは、カスタマイズサンプルです。 jQuery.scrollDepth({ minHeight: 2000, elements: ['#comments', 'footer'], percentage: false, userTiming: false, pixelDepth: false, nonInteraction: false }); </script> <!-- スクロールデプス end -->
Googleタグマネージャの基本タグはすでに設置されていることが条件です。
3.Googleタグマネージャ:マクロ作成
今回使用する、データレイヤー変数を取得するマクロ作成します。
マクロタイプ:データレイヤー変数
データレイヤー変数名:(以下の項目 ※{{ }}は不要)
{{eventCategory}}
{{eventAction}}
{{eventLabel}}
{{eventValue}}
{{eventNonInteraction}}
{{eventTiming}}
データレイヤーバージョン:2
例として、{{eventCategory}}を作成する場合は以下の画像となります。
4.Googleタグマネージャ:ルール作成
2種類のルールを作成します。
・イベント発動:ScrollDistance
・イベント発動:ScrollTiming
イベントのルール「イベント発動:ScrollDistance」の設定は、以下の画像の通りです。
サイトに設置したjs(Scroll Depth)が発生させるイベントをキーとしたルールを作成します。
イベントのルール「イベント発動:ScrollTiming」の設定は、以下の画像の通りです。
サイトに設置したjs(Scroll Depth)が発生させるイベントをキーとしたルールを作成します。
5.Googleタグマネージャ:タグ作成
2つのルールで発動する2種類のタグを作成します。(名称は任意で整理しやすいもの)
・E1_ScrollEvent
・T1_ScrollTiming
イベントのタグ「E1_ScrollEvent」の設定は、以下の画像の通りです。
作成したルールとマクロをひも付けます。
カスタム速度のタグ「T1_ScrollTiming」の設定は、以下の画像の通りです。
作成したルールとマクロをひも付けます。
6.動作&計測確認
Googleタグマネージャのデバッグモードにします。
操作は、「ドラフトコンテナ>サマリー>プレビュー>デバッグ」から実行します。
該当のページを開いて、画面下部にGTMのステータス画面が表示されます。
ページをスクロールすると、タグが飛びます。
発動タグをクリックし、該当のGTMタグ名をクリックします。
「Show More」をクリックし、詳細を表示し、「Display Macros as:」を「Value」に変更することでイベントラベルを確認できます。
Googleアナリティクスのリアルタイムイベントで計測確認します。
「Googleアナリティクス > リアルタイム > イベント」を開きます。
該当のイベントカテゴリ(Scroll Depth)をクリックし、イベントラベル(25%)を確認してください。
Googleタグマネージャのデバッグモードで問題ないようでしたら、必ず、バージョン作成→公開を行ってください。