アナリティクス

GTMを使ってサイトのスクロール計測をする方法(Scroll Depth)

スクロール計測-アイキャッチ画像

皆様、自分のブログがどこまで読まれているか、気になりませんか?(この記事は現在編集中です)

 

特別な設定は必要ですが、Google アナリティクスにてスクロール深度を計測することができます。

⇒ページがどこまで読まれているかを確認ができます!

筆者画像です 作者ねこたさん
ゆき

気合を入れて記事作成したけど、ページの最後まで読まれていない・・・。

ユーザーがどこでコンテンツを読むのをやめたのかを知ることができます。また、記事下に広告を設置したけど、そこまで記事が読まれているかを確認できるので、広告の設置位置を見直すのにも役に立つかと思います。ちなみにですが、「ページスクロール率をみなくても平均ページ滞在時間でみればいいじゃん」と思う方もいるかと思います。

ですが、ページ滞在時間って、直帰してしまったユーザーの時間は含まれないって知っていましたか?

ページがどれくらい読まれたかを確認したい時は、スクロール率を計測した方がよいです!!!!

 

 

特別な設定が必要と冒頭に記載した通りなのですが、今回はその設定方法をご紹介したいと思います。その前に実際に設定を行うことでどのようなデータが見れるかをご紹介します。もちろん有料ソフトなどは一切必要ありません。

スクロール計測-GA画面です

特定ページに関してどこまでページが閲覧されたのかを見ることができます。

上記の例でいうと、このページの縦の長さを100%とすると、25%まで閲覧された数が1,413あり、50%まで閲覧された数が380あります。

つまり、25%~50%の間で504名の方がページを閉じたことを意味します。(1413名-909名=504名)

筆者画像です 作者ねこたさん
ゆき

あれ、あれ・・・全然ページ見られてないやん(号泣)

広告は記事の上に設置しよう。

という施策を打つことができます。もちろん記事の中身も変更して離脱数を減らすという打ち手もあります。(このデータを見てちょっと心が折れた・・・)

※GTMをすでに使っている方は手順③までスキップしていただいて大丈夫です!

スクロール計測に必要なもの

簡単にご紹介します。冒頭で説明したとおりですが、有料ソフトなどは一切必要ありませんのでご安心ください!

  • Google アナリティクス(以下GA)
  • Google タグマネージャ(以下GTM)
  • PC

たったこれだけで設定できます。では、設定手順をご紹介します。

筆者画像です 作者ねこたさん
ゆき

今回はスクロール計測をしたいけど、GAとGTMの設定していないよという方のために

GAとGTMの設定+スクロール計測ができるように導入方法からご紹介します!

手順①Googleアカウントを作成する(既に持っている方はスキップ)

まだアカウントを持っていない方はGoogleアカウント作成サイトにて作成をお願いします。特に難しい操作はないイメージですので説明は割愛させていただきます。

 

手順②Google タグマネージャ(GTM)のアカウントを作る

GTMと何度も連呼していますがそもそも何か。

GTMとは、簡単に説明すると「コード/タグの管理・配信ツール」です。

ここでいうタグとはhtmlのタグを指します。

 

GTMの設定サイトを開く

GTMの設定サイトを開きます。(GTMはWebのみで設定が可能なGoogleのツールです。ソフトウェアをDLする必要はありません)

GTMアカウント登録画面です

ログインをしましょう!!!!

筆者画像です 作者ねこたさん
ゆき

Googleアナリティクスを使っている人は、GAと同じアカウントを使用しましょう。

 

手順③スクロール設定用のタグをコンテナに設定する

今回はスクロール計測用のコードをコンテナ内に作成します。

設定とかしゃらくせえ、めんどくせえという方向けに、下記コンテナ設定をダウンロードしインポートするだけで、簡単実装できるようにしました。

筆者画像です 作者ねこたさん
ゆき

コピーすれば大変な設定の時間を大きく短縮できます。

ダウンロード用:スクロール計測のみを設定

Google アナリティクスを使用しているが、GTMを使っていなかった方は以下のファイルをダウンロードします。

コンテナA:GTMコンテナ(スクロール計測のみ)

※上記アンカーテキストをクリックするとダウンロードが開始します。

 

設定時の注意点

※上記はユニバーサルアナリティクスでの設定を想定しています。2014年4月以前にGAのアカウントを実装作成している方は、設定してもスクロール計測はできるかが保証できません。

ユニバーサルアナリティクスコードと旧来のGAコードの見分け方についても紹介しているサイトがありますので参考にしてみてください。

旧来のGAコードを実装していた場合は、現状のGAタグをソースから削除し、下記で紹介するコンテナ設定をすることをおすすめします。

⇒旧来のコードは近々使えなくなる恐れがあるため。(Googleがアナウンスしています)

 

ダウンロード用:スクロール計測+PV計測を設定

初めてGoogleアナリティクスを使用される方用にもコンテナファイルを作成しました。

下記のコンテナ設定を先ほど作成したGTMコンテナにインポートし少々の設定変更することで、スクロール計測だけでなく、あなたのサイト(各ページ)のPVも計測ができます。

コンテナB:GTMコンテナ(スクロール計測+PV設定)

※上記アンカーテキストをクリックするとダウンロードが開始します。

 

手順④ダウンロードしたコンテナをGTMにインポートする

先ほど、ダウンロードしていただいた圧縮ファイルを解凍して、GTMにファイルをインポートします。

GTMコンテナインポート画面です

まずはGTMを開き、画面上部にある「管理」タブを開きます。開いたら、「コンテナをインポート」を押しましょう。

するとインポート設定画面が開きます。下記画像を参考に設定をお願いします。

GTMコンテナインポート設定画面です

まずは「コンテナファイルを選択」ボタンを押し、ダウンロードしたコンテナファイルを選択します。

ワークスペースを選択は、今回初めてGTMを設定した人は、既存を選択します。

 

インポートオプションを選択では、今回初めてGTMを設定した人は、「矛盾するタグ、トリガー、変数を上書きします」を選択します。

既存でGTMを設定している人は、「矛盾するタグ、トリガー、変数の名前を変更します」を選択した方が、既存設定を崩す心配がないためよいかと思います。

上記の設定でインポートを行います。

筆者画像です 作者ねこたさん
ゆき

これでスクロール計測とPV計測の準備は整いました。あと1ステップです。

手順⑤インポートしたコンテナの変数設定を変更する

※コンテナB(スクロール計測+PV計測)をダウンロードした方が対象です。

※コンテナA(スクロール計測)をダウンロードした方は手順⑦に進んでください。

コンテナインポートしたし終わりでしょ?と思った方もいるかもしれませんが、まだです。あとちょっとです!!!!

この章ではGAのトラッキングIDが必要ですので、まだGAアカウントを作成していない方はページ下部にある「補足①GAアカウント作成」をご覧ください。

GTM-GA設定変数設定を行う

インポートしたコンテナの「変数」のユーザー定義変数の中に「UA-00000000-0」という変数があります。

まずは上記の変数の中身を変更しましょう。

GTM-GA設定変数の変更画面です

このGoogleアナリティクス変数の名前とトラッキングIDを下記の画像を参考に変更してください。

GTM-GAトラッキングID確認画面です

トラッキングIDはGAを開く⇒歯車マーク⇒プロパティ設定の中にあります。

プロパティが複数存在する場合は、スクロール計測のデータを蓄積したいビューが紐づいているプロパティのトラッキングIDを確認します。

確認できたら「UA-xxxxxxxx-x」までコピペします(「」コピーしないでくださいね)

あとは、GTMの変数設定画面に戻り、コピーしたトラッキングIDを貼りつけるだけ。以上で設定完了です。

 

手順⑥GTMの公開ボタンを押す

あとは簡単GTMの画面の右上にある「公開」ボタンを押すだけ!!!!!!!!

GTM-公開画像です
筆者画像です 作者ねこたさん
ゆき

「バージョン名とバージョンの説明」は任意なので、お好きに記載いただけばと思います。

記載したら再度「公開」をおすとスクロール計測がはじめまりGAにデータが蓄積されます。

設定お疲れさまでした!!!!!

 

補足:スクロールの基準値を細かく設定したい場合

後日掲載する予定です

 

まとめ

いかがだったでしょうか。

作業が多く大変だったかもしれません。これにてGA/GTMの初期設定および「スクロール計測」のイベント設定は完了しました。

筆者画像です 作者ねこたさん
ゆき

大変おつかれさまでした!!

スクロールのデータを計測したい場合は、GAを開いていただいて

  1. 行動レポート
  2. 上位のイベント
  3. Scroll Depthを選択
  4. イベントアクションで「スクロール量が知りたいページ」のURLを選択

以上でスクロールのデータをみることができます。

ページがあまりスクロールされていなかったら、ページの内容を修正してみるとよいでしょう。

以上、閲覧いただき、ありがとうございました。