文化・芸術・クリエイティブ実験室 / 上野・浅草 / WEB/IT/インバウンド
おはようございます。k2代表永田です。3連休みなさんいかがお過ごしでしたか?
僕は、上野公園で開催された江戸ウィーク2019で和楽器の演奏を楽しんで来たり、友人のイラスト展に行ってみるなど、少し早めの芸術の秋を満喫しました。
今日は K2 で実践している Google Analytics 活用法のひとつ、『直帰されているページは、本当にユーザーに読まれているか?』を確かめる方法について少しお話ししてみようと思います。
WEBサイトは『コンバージョンを得るためのランディングページ』『商品やサービスを紹介したい商品ページ』『ユーザーとの関係性を作りたい読み物ページ』『回遊のためのINDEXページ』などページによって役割や目的は様々です。
その中でも『読み物ページ』について、直帰ユーザーに本当にページを読んでもらえているのか?を調査する方法をご紹介します。
ここで、何故『読み物ページ』なのか?と疑問に思う方もいるかもしれません。
『読み物ページ』は、例えばノウハウを掲載したページや、特集ページ、ニュースページなど、ページ完結型が多く、比較的直帰率が高い傾向にあるからです。
今回はこの読み物ページのユーザー動向の調査方法にフォーカスしてお話しします。
前提条件として調査は Google Analytics を使って行います。Google Analytics は、Google が提供する無料のWEBサイト解析ツールです。大規模なサイトであれば、この Google Analytics の有料版を使ってWEBサイトを解析することが多いです。
Google Analytics では主に下記の調査ができます。
その他にも、ユーザーが閲覧したデバイスはスマートフォンかパソコンか?初めての訪問か、再訪か?など沢山のユーザー動向を調査することができます。これらのデータを活用して、WEBサイトの現状把握、課題抽出、施策立案、実行と一連の PDCA の流れを作り出すことができます。
その他にも Google Analytics には、まだまだ豊富な機能が搭載されています。その活用方法なども、今後このK2ブログやWEB担当者の相談室で紹介していきたいと思います。
本当にユーザーにコンテンツが読まれているか?を確かめる調査で重要な指標は『直帰率』と『滞在時間』です。
直帰率が高いページの場合、『ユーザーがWEBサイトを回遊していない』『沢山ページを読まれていない』などの理由から、ネガティブに考えられることが多いです。
しかしながら『読み物ページ』の場合、必ずしもページ回遊される必要はありません。ノウハウを掲載しているページや、ニュース記事、特集記事などは、ページ内完結型のコンテンツが多く自然に直帰してしまう傾向にあります。
特にノウハウ記事の場合、検索などで訪問してきたユーザーは疑問が解決したら、ページを離脱するケースがほとんどです。逆にページを回遊された場合は、課題を持って検索キーワードからやってきたユーザーが、そのページで課題解決できずに別のページへ遷移したと考えられます。このケースは『訪問したページの質が良くない』『知りたい内容とマッチしなかった』などの理由から回遊されてしまったと仮説が立てられます。
このように考えると、直帰ユーザーが多いことが必ずしもネガティブな要素とは言えません。
では、直帰するユーザーの何が問題になるのでしょうか?
Google Analytics の場合、ページ閲覧時間をページに訪れた時間と、次のページを閲覧した時間からの差分を閲覧時間としてカウントします。次のページに遷移しない場合の閲覧時間はカウント(計測)されません。
直帰の場合閲覧時間がカウントされないので、直帰ユーザーが多いと想定される『読み物ページ』の場合、本当に読んでもらったかどうかが判断できません。つまり、課題を解決してもらって、直帰されたのか?ページを開いた瞬間に、用途と違うと判断されて直帰されたのか?が判断できないのです。
そこで、Google Analytics の機能に少し工夫を加えて、コンテンツを読んでもらったかどうかをイベントトラッキングで計測しながらユーザーのモチベーションをジャッジします。
イベントトラッキングについてはWEB担当者の広場、『Google Analytics で外部リンクを解析、クリックを計測』も合わせてご覧ください。
イベントトラッキングは、ユーザーのページ内での何らかのアクションにラベルを付けて計測できる機能です。この仕組みを使ってユーザーの滞在モチベーションを計測します。
次の項目から少し技術の話になりますが、フロントエンジニアであればかんたんに対応可能なアイデアです。
最初に javascript 記載の注意事項として、上記のWEB担当者の広場では、 analytics.js での活用方法を紹介していますが、本項で紹介する gata.js と扱い方はほとんど変わりません。違いについては、『analytics.js から gtag.js に移行する』を参考にしてください。
イベントトラッキングは、本来クリックされた数やダウンロードされた数を計測します。
例)
<a onclick="gtag('event', 'click', {'event_category': 'カテゴリ','event_label': 'ラベル','value': '値'});">
このように、クリックイベントなどに、関数の呼び出し元 gata() を埋め込みます。
今回の場合はスクロールされたときに関数を呼び出し値を Google Analytics に引き渡すことで、ページがどれだけ、どのように読まれているか?を判断します。
今回参考にしていただくのは、K2 でWEBサイト運営ノウハウを紹介しているWEB担当者の広場のコンテンツ(詳細ページ)です。
WEB担当者の広場の場合は、ページの30% / 70% / 95% 読まれた(スクロールされた)タイミングで計測します。
これらの数値の根拠は、コンテンツの平均値が、上部ページ概要までが 30%、コンテンツ終了が 70%、ページ終了で 100% だったので採用しました。
早速実装の方法を見ていきましょう!まずはスクロールできる範囲を定義します。
スクロール範囲はページの高さからブラウザの高さを引いた差分です。
ページの高さ – ブラウザの高さ = 可動範囲
どの程度コンテンツが読まれたかを判断するのに、可動範囲の 30% 70% 95% をスクロールしたタイミングで gtag関数 を実行しています。
以下は gtag関数に入れる値の事例です。
gtag('event', 'scroll', {
//ファイル名など
'event_category': '読み物ページ',
//30%は'Short'、70%は'Middle'、95%は'Long'など、任意で設定します。
'event_label': 'Short',
//30%は'1'、70%は'5'、95%は'10'など、任意で設定します。
'value': '1',
//直帰率に反映させない。(任意の値)
'non_interaction': true
});
‘event’
‘event’ には、 event が必ず入ります。これにより、イベントトラッキングの数値と Google Analytics が判断できます。
‘scroll’
‘scroll’ は、具体的なアクション、’click’や’scroll’ などの記述を入れることが多いです。
‘event_category’
‘event_category’は「:」で対になるダブルクォーテーション内にカテゴリ名を入れます。このカテゴリ名は日本語でも英語でも大丈夫です。今回の場合は「読み物ページ」です。
‘event_label’
‘event_label’は「:」で対になるダブルクォーテーション内にラベル名を入れます。今回は「Short」「Middle」「Long」とスクロールした距離を3段階にラベル分けしました。
‘value’
‘value’ は、ここまでと少し用途が違います。ダウンロード数や価格などをカウントすることができます。値には数値が入り、その数値がクリックされる度に加算されていきます。
‘non_interaction’
‘non_interaction’ は、直帰率に反映させるかどうか?です。イベントトラッキングは通常イベントが発生した時点でページ遷移とカウントしてしまいます。’non_interaction’は、カウントを無効にするための処理です。
今回の場合は「Short」「Middle」「Long」それぞれの値を「1」「5」「10」として、ユーザーがページを最後まで読んだら「16」加算されるように設定しています。そうすることで、値をチェックした際に、ユーザーに読まれている回数とは別に、ユーザーの興味の深さや熱量を把握(仮説立て)することが可能になります。
以下は javascript 記載の一例です。
$( function(){
var windowSize = $(window).height();
var movieHeight = Math.floor( $("body").outerHeight() - windowSize);
var shortPoint = Math.floor( movieHeight * 0.3 );
var middlePoint = Math.floor( movieHeight * 0.7 );
var longPoint = Math.floor( movieHeight * 0.95 );
$(window).on('resize', function(){
windowSize = $(window).height();
movieHeight = Math.floor( $("body").outerHeight() - windowSize);
});
var flagShort = 1;
var flagMiddle = 1;
var flagLong = 1;
$(window).scroll( function () {
var topScroll = $(document).scrollTop();
if ( shortPoint < topScroll && flagShort == 1 ){
gtag関数を実行;
flagShort = 0;
}
if ( middlePoint < topScroll && flagMiddle == 1 ){
gtag関数を実行;
flagMiddle = 0;
}
if ( longPoint < topScroll && flagLong == 1 ){
gtag関数を実行;
flagLong = 0;
}
} );
} );
上記の事例を細かく分解すると以下のようになります。
1)ブラウザの高さを取得
var windowSize = $(window).height();
2)可動距離を取得
var movieHeight = Math.floor( $("body").outerHeight() - windowSize);
コンテンツの高さをブラウザの高さで引きます。事例の場合は、Math.floor() を使い小数点以下を省きました。
3)関数実行ポイントを設定
var shortPoint = Math.floor( movieHeight * 0.3 );
可動距離を%で割ります。それぞれ、大・中・小の値を設定します。
4)リサイズの際の再設定
$(window).on('resize', function(){・・・
万が一ユーザーがブラウザをリサイズした場合、再設定するために記述がありますがこちらは必須ではありません。
5)フラグの設定
var flagShort = 1;
ユーザーがページを上下させた時に、何度もアクションが発生しないようにフラグを使って1回だけのアクションにします。
6)移動距離を測定
$(window).scroll( function () {
var topScroll = $(document).scrollTop();
} );
どれくらいスクロールしたか計測しています。
7)ポイントを越えた時点で一度だけ関数を実行させます。
if ( shortPoint < topScroll && flagShort == 1 ){
gtag関数を実行;
flagShort = 0;
}
これらの記述を該当のHTMLファイルに記載すれば、Google Analyticsの方へ情報が引き渡されます。注意点としては、GAタグの下に書く必要があります。また、jQueryを使った記述になっていますのでご注意ください。
ここまで少し技術よりのお話をしました。では、実際 Google Analytics 側ではどんな作業が派生するのでしょうか?実は Google Analytics 側では実際何かを組み込む作業は発生しません。該当のWEBページから受け取った情報を Google Analytics 側で表示するだけです。
手順は次の通りです。
『ログイン』→『ホーム(該当のビュー)』→『行動①』→『イベント②』→『概要③』の順に遷移します。
ここで、先ほどのイベントトラッキングの全体の概要を見ることができます。ただ、全体像が見えても今回の調査の場合あまり意味がありません。各ページ毎にどのような動きがあるか知る必要があります。そこで、ページ毎にどのような動きがあるかを調査します。
『ページ①』→『表示する行数②』を表示すると、ページ右下に下の画像の表示されます。
これが、イベントトラッキングの調査結果のサンプル画面です。一番右の平均値がユーザーモチベーションの平均値で、イベントの値がユーザーモチベーションの総量です。この数値は何かを次に説明します。
WEBページで設定したgata関数の'VALUE'をカウントした合計値です。WEBページ側で、30%スクロールしたら「1」、70%スクロールしたら「5」、95%スクロールしたら「10」を、それぞれ加算するように設定しました。ユーザーがページの最後まで見たらこの3つの数字の合計「16」が加算されます。
イベント値を合計イベント数(30%以上スクロール発生)で割ったものです。ユーザーあたりのページ閲覧量がわかります。
イベント数は30%ページをスクロールしたところからカウントされます。ですので、ページを開いて閲覧されずに直帰された場合はカウントされません。全体のページ閲覧数と比較するとスクロールもされずにとの程度のユーザーが直帰したかがわかります。
ここまでの調査で直帰率が高いページの以下のユーザー動向がわかります
続いてページ毎に、どこまでコンテンツが閲覧されているか?を確認する方法をご紹介します。
『セカンダリディメンション①』→『行動②』→『イベントラベル③』で、各ページの細かい情報が見れます。
上の画像の場合は、『読み物ページA』は最後まで読まれていますが、他は途中で離脱されていることがわかります。そして、例えば『読み物ページA』の場合は、コンテンツ終了(70%)まで75%、ページ終了(95%)までは、25%のユーザがページを読んでいることがわかります。
このことから、コンテンツは良く見られているけど、ページ下部のWEBサイト内回遊のためのエリアはあまり読まれていないことと判断できます。
個別ページの調査では以下のユーザー動向がわかります。
『直帰ユーザーは本当にコンテンツを見ているの?』いかがでしたか?
K2 ではこのページで紹介したイベントトラッキングを使って、ユーザーのページ内動向を調査しています。
直帰率が高いページでは、どうすれば直帰を減らしつつ回遊を促せるか?または、直帰されることを前提に再訪を促す方に注力した方がいいのか?を判断して施策につなげています。
特に読み物ページの場合はコンテンツ制作に時間と手間がかかってしまいます。折角かけた労力ですから、きちんと成果につなげていきたいですよね。また改めてこの調査の結果からどのような分析や施策ができるのか?をご紹介したいと思います。
僕たち K2 は、WEBサイトの改善や運営支援なども行っています。もしご興味ある方は是非お気軽にご連絡・お問い合わせ下さい。また、私永田が Twitter で情報発信をしています。良かったらこちらもフォローお願いいたします。
おはようございます!カルチャーキュレーターの永田です。 今月もまた開催しました!歴史・芸術・文化がテーマのプレゼン交流...
ケイツー・インタラクティブの出来ること