WEBサイトの解析を行う時、
ユーザーがページのどの部分まで読んでいるかを知ることができれば、改善すべき箇所がより的確にわかるようになります。
通常は、ユーザーがどこまで読んでいるかを知るためにはヒートマップツールを使う必要がありますが、多くのヒートマップツールは有料かつ利用にPV数制限などがあり、本気でWEB改善をしたいと考える方にとっては非常にコスト的なハードルが高いツールです。
しかし、実はユーザーがどこまで読んでいるかを無料で知ることができる方法があります。
それは、Googleアナリティクスを使う方法です。
多少複雑な設定は必要ですが、恒久的に無料で使えるようにできるのでかなりおすすめです。
ここでは、jQueryプラグイン「Scroll Depth」をセットアップする手順を紹介していきます。
目次
jQueryプラグイン「Scroll Depth」をダウンロードする
まずは、jQueryプラグイン「Scroll Depth」を以下の公式サイトからダウンロードしましょう。
外部ページ「Scroll Depth」公式ダウンロードサイト
サーバーにアップロードする
ダウンロードしたzipファイルを解凍し、「jquery.scrolldepth.min.js」というファイルがあることを確認します。
FTPクライアントソフト等を使って、サーバーの任意の場所（ファイルが混ざらないように、「js」というフォルダを作って、その中に配置する形がおすすめです）にアップロードしましょう。
「FTPクライアントソフトって何？」という方は、以下のページを参考にしてください。
jQueryとプラグインの読み込み処理を記述する
サーバーにアップロードしたjQueryプラグインは、サイト中で読み込みを行う必要があります。
以下のコードを<head></head>間に記述しましょう。
この時、jQueryの本体プログラムも読み込みを忘れずに行いましょう。
HTML（jQuery本体プログラムの読み込み）
HTML（「Scroll Depth」読み込み）
Googleタグマネーシャで設定をする
サイト側にスクロール判定のプログラムの設置ができたら、次はGoogleアナリティクスでスクロール量を見るためのタグの設定を行う必要があります。
このタグの設定は専門性が高く難しいため、Googleタグマネージャを活用しましょう。これを使うことで簡単にタグを設定することができます。
アカウントを作成し、サイトにタグマネージャ用のタグを埋め込む
まずは、以下のリンクからGoogleタグマネージャにログインし、「アカウントの作成」ボタンをクリックしてアカウントを作成しましょう。
外部ページGoogleタグマネージャ公式サイト
ここで生成されたタグを自分のサイトに埋め込むことで、Googleタグマネージャから設定したタグを認識できるようになります。
<head></head>間に記述するコードと、<body>直後に記述するコードがありますので、それぞれの場所に貼り付けて保存しましょう。
スクロール取得用の「変数」を作る
先ほどサイトに紐づけたjQueryプラグイン「Scroll Depth」では、以下のようなスクロール量を取得するための各種変数を使用しています。
Googleアナリティクス側では、これらの変数の値を読むことでスクロール量を集計して表示することができるのです。
当然デフォルトで用意されていない変数ですので、Googleタグマネージャの「変数」設定画面から、ユーザー定義変数として設定を追加してあげる必要があります
- eventCategory
- eventAction
- eventLabel
- eventValue
- eventNonInteraction
- eventTiming
画面のメニューから「変数」を選択して、変数の設定画面を開きます。
ページ下の「ユーザー定義変数」を見てみましょう。
最初は何も設定されていない状態です。
「新規」をクリックして、新しい変数を追加していきます。
変数の作成画面が表示されます。
最初は変数の名前が「名前のない変数」となっているので、変数名を入力します。
次に「変数タイプを選択して設定を開始」をクリックして、変数の詳細を設定していきます。
変数タイプの一覧が表示されますので、その中から「データレイヤーの変数」を選択しましょう。
データレイヤーの変数名（「Scroll Depth」で使われている変数名）を入力します。
バージョンはデフォルトのバージョン2で良いです。
この一連の流れを「Scroll Depth」で使われているすべての変数分（６個分）繰り返します。
すべての変数が作り終わった時、タグマネージャのユーザー定義変数のリストはこのようになります。
スクロール取得用の「トリガー」を作る
次に、イベントを実行するタイミングの設定である「トリガー」を作ります。
jQueryプラグイン「Scroll Depth」では、２つのトリガーを用いてスクロール量を判定しています。
Googleアナリティクスでこれらのトリガーを利用するためには、このトリガーも変数同様にタグマネージャから新規で作ってあげる必要があります。
- ScrollDistance
- ScrollTiming
画面のメニューから「トリガー」を選択して、トリガーの設定画面を開きます。
トリガー一覧は、最初は何も設定が無い状態です。
「新規」をクリックして、新しいトリガーを追加していきます。
トリガーの作成画面が表示されます。最初はトリガーの名前が「名前のないトリガー」となっているので、トリガー名を入力します。
次に「トリガータイプを選択して設定を開始」をクリックして、トリガーの詳細を設定していきます。
トリガータイプの一覧が表示されますので、その中から「カスタムイベント」を選択しましょう。
イベント名を入力し、トリガーの発生場所を「一部のカスタムイベント」に設定します。
イベント発生のタイミングを設定する入力欄が表示されますので、そこに「Event」が「Scroll Depthで使われているトリガー名」と「等しい」設定を追加します。
この一連の流れを「Scroll Depth」で使われているすべてのトリガー分（２個分）繰り返します。
すべてのトリガーを作り終わった時、タグマネージャのトリガーのリストはこのようになります。
スクロール取得用の「タグ」を作る
最後に、スクロール表示用のタグを作ります。
先ほど、イベントトリガーとして２種類の取得用トリガーを用意したので、表示用タグも２種類必要となります。
画面のメニューから「タグ」を選択して、タグの設定画面を開きます。
タグ一覧は、最初は何も設定されていません。
「新規」をクリックして新しいタグを追加します。
タグの作成画面が表示されます。
最初はタグの名前が「名前のないタグ」となっているので、タグ名を入力します。
次に「タグタイプを選択して設定を開始」をクリックしてタグの詳細を設定し、「トリガーを選択してこのタグを配信」で先ほど作ったトリガーを紐づけていきます。
タグタイプの一覧が表示されますので、その中から「ユニバーサルアナリティクス」を選択しましょう。
タグの設定を行います。
トラッキングIDがわからない場合は、Googleアナリティクスのトラッキングコード情報から確認しましょう。
トラッキングタイプは「イベント」です。トラッキングパラメータは以下の通り設定していきます。
- カテゴリ・・・eventCategory。ページごとに確認を行う場合はPageURLとする。
- アクション・・・eventAction
- ラベル・・・eventLabel
- 値・・・eventValue
- 非インタラクションヒット・・・真
スクロールイベント（ScrollDistance）をトリガーとするタグの設定サンプルは以下の通りです。
スクロールタイミング（ScrollTiming）をトリガーとするタグの設定サンプルは以下の通りです。
２つのタグを設定すると、タグマネージャのタグリストはこのようになります。
変更内容を反映する
今までタグマネージャ上で行ってきた各種設定は、「公開」ボタンを押さないと反映されませんのでご注意ください。
動作確認を行う
最後に、動作確認を行います。
Googleアナリティクスからの詳しい見方については、以下のページを参考にしてください。
また、「Scroll Depth」はデフォルトでは25%刻みのスクロール量を取得できますが、もっと細かく10%刻みや5%刻みで集計を行いたい方は、以下のカスタマイズをすると取得できるようになるので、参考にしてみてください。
