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

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

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

過去にGoogleタグマネージャーで読了率を計測する方法についても解説していますので、こちらもご確認ください。

読了率を計測するだけならば、GoogleアナリティクスとGoogleタグマネージャーを使用することで無料で計測が可能です。
しかし、ブログやメディアならば Googleアナリティクスでも良いのですが、記事LPの場合、アナリティクスを使用するといろいろと不都合があります。

例えば、滞在時間という指標に注目してみましょう。
アナリティクスだと、セッション中のページ数が１ページだとセッション滞在時間・ページ滞在時間が０秒になるという仕様があります。

また、記事ページであればユーザーがどういった行動をしているのかを可視化するヒートマップも分析にとっては重要です。
そういった記事ページの分析に重要な指標がGoogleアナリティクスには不足しているので、なるべく指標を一元管理するという意味で、ヒートマップ解析機能が搭載されているツールで計測した方が解析が楽です。

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

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

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

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

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

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

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

まずは、読了の基準を決めましょう。
読了の基準とは「なんの要素が画面内に見えたら読了と判断するか」です。
この SiTest ブログの場合だと、記事の最下部にあるバナーが基準としてはよさそうです。
このバナーが画面に表示されたタイミングで読了と定義します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SiTest で読了率を確認する

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

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

なお、当社では本記事のような計測設定の支援やウェブサイト改善のコンサルティング等でもご支援をいたします。
ランディングページ最適化やコンバージョン率改善にお悩みの方は、お気軽にご相談ください。

詳細を見る

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

Tweets by SiTest_heatmap