ヒートマップ搭載のサイト解析改善ツール SiTest で読了率を計測する方法 | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

ヒートマップ搭載のサイト解析改善ツール SiTest で読了率を計測する方法

以前、Googleアナリティクスを使用して読了率を計測する方法をご紹介しました。
しかし、その記事でもお伝えした通り、読了率とヒートマップ解析はほぼセットで使用するので、Googleアナリティクスで指標を確認することは、いちいち手間がかかって都合が悪いです。

今回は、弊社の開発・運営を行うヒートマップ搭載のサイト解析改善ツール SiTest で読了率を計測するための設定方法をご紹介します。

↓ 前回の記事
(GTM関連の説明もしていますので、先に読んでおくと今回の記事も分かりやすいです)

SiTest のツール概要資料の無料ダウンロードはこちらから

目次

ヒートマップツールで読了率を計測するメリット

読了率を計測するだけならば、GoogleアナリティクスとGoogleタグマネージャーを使用することで無料で計測が可能です。
しかし、ブログやメディアならば Googleアナリティクスでも良いのですが、記事LPの場合、アナリティクスを使用するといろいろと不都合があります。
例えば、滞在時間という指標に注目してみましょう。
アナリティクスだと、セッション中のページ数が1ページだとセッション滞在時間・ページ滞在時間が0秒になるという仕様があります。
また、記事ページであればユーザーがどういった行動をしているのかを可視化するヒートマップも分析にとっては重要です。
そういった記事ページの分析に重要な指標がGoogleアナリティクスには不足しているので、なるべく指標を一元管理するという意味で、ヒートマップ解析機能が搭載されているツールで計測した方が解析が楽です。

Googleアナリティクスはあくまでサイト全体の解析のため、記事LPの解析などページ内の分析には不向き、ページ間の比較などは容易のため、大量のページを解析するメディアなどの解析には必須。SiTestを含むヒートマップ解析ツールはページ内のコンテンツ評価に特化しているため、記事LPなどの解析にはおすすめ。一方で、大量のページからどれを解析するかを決めることには不向きのため、メディアやブログを運用する際にはGoogleアナリティクスとの併用が良い。

SiTest の機能のおさらい

ヒートマップツールよりもLPOツールに近いサイト解析改善ツール

「ヒートマップツールで計測することがよいのは分かったが、SiTest ってそもそもなんだよ」という方もいらっしゃると思いますので、簡単にご紹介します。
もう既に知っている、という方は読み飛ばして次の章に進んでください。

SiTest とは、ヒートマップ解析機能・ABテスト機能・EFO機能がそろった、オールインワンのウェブサイト解析改善ツールです。

ヒートマップ解析とABテスト機能・EFO機能があることで、どのようなメリットがあるのかというと、解析と改善が同時にできるということです。
ここで、注意していただきたいのが、解析だけではなにも変わらないということです。
ヒートマップ解析も読了率の計測によるページの解析も改善施策を実行してこそ意味があります。

SiTest はヒートマップ解析によって発見した課題や仮説から、スピーディに改善施策としてABテストを実施できるということがツールとしての魅力です。

SiTest のツール概要資料の無料ダウンロードはこちらから

SiTest と Googleタグマネージャーを利用して読了率を計測する方法

さて、本題となります。
SiTest で読了率を計測する場合でも、Googleタグマネージャーを利用します。
それでは早速計測設定の方法を解説いたします。

STEP1 読了の基準を決めよう!

まずは、読了の基準を決めましょう。
本ブログの場合だと、記事の最下部にあるバナーが基準としてはよさそうです。
このバナーが画面に表示されたタイミングで読了と定義します。

sitestブログであれば、記事の最後に表示されるバナーを基準としています。

基準となる要素が決まったら、その要素のCSSのクラスを控えておきましょう。
CSSクラスの確認方法はブラウザによって異なります。
Chromeの場合だと、確認したい要素を右クリックし「検証」を選択してください。
そうすると、ディベロッパーモードとなるので、そこで要素に記載されている「class=”~”」を控えておきます。

devモードから要素のclass名を後で使用するので、控えておいてください。

STEP2 SiTest でカスタムゴールコードを発行しよう!

次に、SiTest でカスタムゴールコードを発行しましょう。
SiTest にログイン後、左メニューの「ゴール」→「カスタムゴールの新規作成」の順にクリックしてください。

sitestログイン後、左メニューのゴールからカスタムゴールの新規作成をクリックします。

そうすると、ゴールの作成画面が出てきますので、任意で項目を入力してください。
ゴール名は分かりやすい名前が良いので「読了」などにしておくと良いです。

カスタムゴールの作成画面が出てきますので、任意で項目を入力してください。

「保存してカスタムゴールを作成する」をクリック後、カスタムゴールを計測するためのJavascript のコード「sitest.achieve_for({gid:~, sid:~});」が表示されますので、それをコピーしてください。

カスタムゴールを計測するためのJavascript のコードが表示されますので、コピーしてください。

これで SiTest 側での準備は完了です。

STEP3 Googleタグマネージャーで組み込み変数を設定しよう!

Googleタグマネージャーにおける設定は、SiTestで計測する場合でも Googleアナリティクスで計測する場合でもほとんど変わりません。

まずは、Googleアナリティクスでの設定同様、組み込み変数の設定から始めます。
Googleタグマネージャーにログイン後、左メニューから変数→設定とクリックして進んでください。

Googleタグマネージャーにログイン後、左メニューから変数→設定とクリックして進んでください

組み込み変数の設定一覧より、可視性の「Persent Visible」と「On-Screen Duration」にチェックを入れます。

組み込み変数の設定一覧より、可視性の「Persent Visible」と「On-Screen Duration」にチェックを入れます。

【補足】「Persent Visible」と「On-Screen Duration」の意味

「Persent Visible」は、トリガー発動時点で、選択した要素の何パーセントが視認可能かを、0~100 の数値で示した値です。
例えば、今回の例でいうと、バナーの全体の面積のうち、どれくらいが画面の中に表示されたら(視認可能になったら)読了とみなすかを決定する基準として使用する変数です。
「On-Screen Duration」はトリガー発動時点で、選択した要素が視認可能だった時間の長さを、ミリ秒単位の数値で示した値です。
つまり、読了の基準となっている要素がどれくらいの時間視認可能であれば読了とするのか、その時間の長さを決定する基準として使用する変数です。

STEP4 Googleタグマネージャーでトリガーを設定しよう!

続いてトリガーの設定です。
ワークスペースの左メニュー「トリガー」→「新規」の順にクリックしてください。

ワークスペースの左メニュー「トリガー」→「新規」の順にクリックしてください。

トリガーの設定は以下の通りに設定してください。
STEP1で控えておいた読了の基準となる要素のclass名はここで使用します。

トリガー名はわかりやすい任意の名前を設定してください。トリガーのタイプは要素の表示、選択方法はCSSセレクタ、要素のセレクタは. STEP1でメモした要素のclass名(先頭のドットを忘れないように)、このトリガーを起動するタイミングは1ページにつき1度、視認の最小割合は1、このトリガーの発生場所はすべての表示イベントとして設定してください。

忘れずに保存ボタンを押してください。
これでトリガーの設定が完了したので、続いてタグの設定に取り掛かります。

STEP5 Googleタグマネージャーでタグを設定しよう!

最後にタグの設定ですが、ここだけは Googleアナリティクスでの設定と異なりますので注意してください。

ワークスペースの左メニュー「タグ」→「新規」の順にクリックしてください。

ワークスペースの左メニューからタグを選択し、新規をクリックしてください。

タグの設定は以下の通りです。
今回は、タグのタイプをカスタムHTMLとします。
カスタムHTMLで Javascript を使用する場合はscriptタグで囲う必要があるので注意してください。

タグ名は任意の分かりやすい名前を記載してください。今回の場合であれば「SiTest_読了」などがよいです。タグのタイプはカスタムHTMLです。HTMLにはSTEP2でコピーしておいた、SiTestのカスタムゴールのコードを記載します。scriptタグで囲うことを忘れないようにしてください。タグの呼び出しオプションは1ページにつき1度です。トリガーはSTEP4で作成したトリガーにします。

これで、Googleタグマネージャーの設定は完了です。
タグを公開しましょう。

SiTest で読了率を確認する

STEP2で作成した SiTest のゴールを確認して、ゴール達成数、ゴール達成率が記録されていればOKです。
一覧にはゴールを達成したURLが記載されます。

SiTestにログインして、STEP2で作成したカスタムゴールが計測されているか確認しましょう。ゴール詳細画面には、読了数と読了率、そして読了が発生したURLが一覧で表示されます。

さいごに

今回は、SiTest と Googleタグマネージャーを使用して読了率を計測する方法をご紹介しました。
冒頭では、SiTest を含めヒートマップツールで読了率を計測しておく方が便利と記載しましたが、実際のところはよく使うツールすべてで計測しておくことを推奨します。
見れないよりは見れる方が絶対良いです。

もし、SiTest にご興味がある方は、以下のリンクから無料で資料ダウンロードができますので、お気軽にお申し込みください。

SiTest のツール概要資料の無料ダウンロードはこちらから

また、Twitterでも情報発信しているので、ぜひフォローをよろしくお願いいたします!