文化・芸術・クリエイティブ実験室 / 上野・浅草 / WEB/IT/インバウンド

直帰ユーザーは本当にコンテンツを見ているの?イメージ
2019年09月24日 K2-Promotion

直帰ユーザーは本当にコンテンツを見ているの?

おはようございます。k2代表永田です。3連休みなさんいかがお過ごしでしたか?
僕は、上野公園で開催された江戸ウィーク2019で和楽器の演奏を楽しんで来たり、友人のイラスト展に行ってみるなど、少し早めの芸術の秋を満喫しました。

今日は K2 で実践している Google Analytics 活用法のひとつ、『直帰されているページは、本当にユーザーに読まれているか?』を確かめる方法について少しお話ししてみようと思います。

CMSでの集客ならWEBサイト制作会社ケイツー・インタラクティブへ

INDEX

Google Analytics を使って、直帰率の高い読み物ページを調査

読み物ページを調査をする理由

WEBサイトは『コンバージョンを得るためのランディングページ』『商品やサービスを紹介したい商品ページ』『ユーザーとの関係性を作りたい読み物ページ』『回遊のためのINDEXページ』などページによって役割や目的は様々です。

その中でも『読み物ページ』について、直帰ユーザーに本当にページを読んでもらえているのか?を調査する方法をご紹介します。

ここで、何故『読み物ページ』なのか?と疑問に思う方もいるかもしれません。

『読み物ページ』は、例えばノウハウを掲載したページや、特集ページ、ニュースページなど、ページ完結型が多く、比較的直帰率が高い傾向にあるからです。

今回はこの読み物ページのユーザー動向の調査方法にフォーカスしてお話しします。

Google Analytics を使った分析調査

前提条件として調査は Google Analytics を使って行います。Google Analytics は、Google が提供する無料のWEBサイト解析ツールです。大規模なサイトであれば、この Google Analytics の有料版を使ってWEBサイトを解析することが多いです。

Google Analytics ホーム画面

Google Analytics では主に下記の調査ができます。

  • アクティブユーザー:今現在、何人のユーザーがWEBサイトを見ているか
  • ユーザー数:管理画面で指定した期間中に何人ユーザーがWEBサイトに訪れたか
  • PV(ページビュー):ユーザーが何ページWEBサイトを閲覧したか
  • 滞在時間:ユーザーがどのくらいWEBサイトに滞在したか
  • 直帰率:ユーザーがWEBサイトを訪れて、他のページを閲覧せずに離脱した率
  • コンバージョン数:ユーザーのお問い合わせ数や予約数

その他にも、ユーザーが閲覧したデバイスはスマートフォンかパソコンか?初めての訪問か、再訪か?など沢山のユーザー動向を調査することができます。これらのデータを活用して、WEBサイトの現状把握、課題抽出、施策立案、実行と一連の PDCA の流れを作り出すことができます。

その他にも Google Analytics には、まだまだ豊富な機能が搭載されています。その活用方法なども、今後このK2ブログやWEB担当者の相談室で紹介していきたいと思います。

イベントトラッキングで、滞在モチベーションを計測

本当にユーザーにコンテンツが読まれているか?を確かめる調査で重要な指標は『直帰率』と『滞在時間』です。

読み物ページは直帰率が高い方が良い?

直帰率が高いページの場合、『ユーザーがWEBサイトを回遊していない』『沢山ページを読まれていない』などの理由から、ネガティブに考えられることが多いです。

しかしながら『読み物ページ』の場合、必ずしもページ回遊される必要はありません。ノウハウを掲載しているページや、ニュース記事、特集記事などは、ページ内完結型のコンテンツが多く自然に直帰してしまう傾向にあります。

特にノウハウ記事の場合、検索などで訪問してきたユーザーは疑問が解決したら、ページを離脱するケースがほとんどです。逆にページを回遊された場合は、課題を持って検索キーワードからやってきたユーザーが、そのページで課題解決できずに別のページへ遷移したと考えられます。このケースは『訪問したページの質が良くない』『知りたい内容とマッチしなかった』などの理由から回遊されてしまったと仮説が立てられます。

このように考えると、直帰ユーザーが多いことが必ずしもネガティブな要素とは言えません。

では、直帰するユーザーの何が問題になるのでしょうか?

イベントトラッキング計測で、直帰ユーザーの動向調査

Google Analytics の場合、ページ閲覧時間をページに訪れた時間と、次のページを閲覧した時間からの差分を閲覧時間としてカウントします。次のページに遷移しない場合の閲覧時間はカウント(計測)されません。

直帰の場合閲覧時間がカウントされないので、直帰ユーザーが多いと想定される『読み物ページ』の場合、本当に読んでもらったかどうかが判断できません。つまり、課題を解決してもらって、直帰されたのか?ページを開いた瞬間に、用途と違うと判断されて直帰されたのか?が判断できないのです。

そこで、Google Analytics の機能に少し工夫を加えて、コンテンツを読んでもらったかどうかをイベントトラッキングで計測しながらユーザーのモチベーションをジャッジします。

イベントトラッキングについてはWEB担当者の広場、『Google Analytics で外部リンクを解析、クリックを計測』も合わせてご覧ください。

イベントトラッキングは、ユーザーのページ内での何らかのアクションにラベルを付けて計測できる機能です。この仕組みを使ってユーザーの滞在モチベーションを計測します。

次の項目から少し技術の話になりますが、フロントエンジニアであればかんたんに対応可能なアイデアです。

gata()関数の仕様と実装

イベントトラッキングの呼び出し元gata()関数

最初に 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% だったので採用しました。

gata()関数をWEBページに埋め込んで実装

早速実装の方法を見ていきましょう!まずはスクロールできる範囲を定義します。

スクロール可動範囲の図
スクロール範囲はページの高さからブラウザの高さを引いた差分です。

ページの高さ – ブラウザの高さ = 可動範囲

どの程度コンテンツが読まれたかを判断するのに、可動範囲の 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 側ではどんな作業が派生するのでしょうか?実は Google Analytics 側では実際何かを組み込む作業は発生しません。該当のWEBページから受け取った情報を Google Analytics 側で表示するだけです。

手順は次の通りです。

『ログイン』→『ホーム(該当のビュー)』→『行動①』→『イベント②』→『概要③』の順に遷移します。

イベントトラッキングページへの遷移の図
ここで、先ほどのイベントトラッキングの全体の概要を見ることができます。ただ、全体像が見えても今回の調査の場合あまり意味がありません。各ページ毎にどのような動きがあるか知る必要があります。そこで、ページ毎にどのような動きがあるかを調査します。

イベントトラッキングページへの遷移の図
『ページ①』→『表示する行数②』を表示すると、ページ右下に下の画像の表示されます。

イベントトラッキングページ画面例1
これが、イベントトラッキングの調査結果のサンプル画面です。一番右の平均値がユーザーモチベーションの平均値で、イベントの値がユーザーモチベーションの総量です。この数値は何かを次に説明します。

イベントの値はユーザーモチベーションの総量

WEBページで設定したgata関数の'VALUE'をカウントした合計値です。WEBページ側で、30%スクロールしたら「1」、70%スクロールしたら「5」、95%スクロールしたら「10」を、それぞれ加算するように設定しました。ユーザーがページの最後まで見たらこの3つの数字の合計「16」が加算されます。

平均値はユーザーモチベーションの平均値

イベント値を合計イベント数(30%以上スクロール発生)で割ったものです。ユーザーあたりのページ閲覧量がわかります。

イベント数でわかること

イベント数は30%ページをスクロールしたところからカウントされます。ですので、ページを開いて閲覧されずに直帰された場合はカウントされません。全体のページ閲覧数と比較するとスクロールもされずにとの程度のユーザーが直帰したかがわかります。

ここまでの調査で直帰率が高いページの以下のユーザー動向がわかります

  • スクロールせずにユーザーが直帰したユーザー数
  • 1ユーザーあたりのページに対するモチベーション
  • ページに対するモチベーションの総量
  • WEBサイト全体におけるページのモチベーション比率(カッコ内の%を参照)

続いてページ毎に、どこまでコンテンツが閲覧されているか?を確認する方法をご紹介します。

『セカンダリディメンション①』→『行動②』→『イベントラベル③』で、各ページの細かい情報が見れます。
イベントトラッキングページ画面例2

イベントトラッキングページ画面例3
上の画像の場合は、『読み物ページA』は最後まで読まれていますが、他は途中で離脱されていることがわかります。そして、例えば『読み物ページA』の場合は、コンテンツ終了(70%)まで75%、ページ終了(95%)までは、25%のユーザがページを読んでいることがわかります。

このことから、コンテンツは良く見られているけど、ページ下部のWEBサイト内回遊のためのエリアはあまり読まれていないことと判断できます。

個別ページの調査では以下のユーザー動向がわかります。

  • ユーザーが何処まで読んで離脱しているか

『直帰ユーザーは本当にコンテンツを見ているの?』のまとめ

『直帰ユーザーは本当にコンテンツを見ているの?』いかがでしたか?

K2 ではこのページで紹介したイベントトラッキングを使って、ユーザーのページ内動向を調査しています。

直帰率が高いページでは、どうすれば直帰を減らしつつ回遊を促せるか?または、直帰されることを前提に再訪を促す方に注力した方がいいのか?を判断して施策につなげています。

特に読み物ページの場合はコンテンツ制作に時間と手間がかかってしまいます。折角かけた労力ですから、きちんと成果につなげていきたいですよね。また改めてこの調査の結果からどのような分析や施策ができるのか?をご紹介したいと思います。

僕たち K2 は、WEBサイトの改善や運営支援なども行っています。もしご興味ある方は是非お気軽にご連絡・お問い合わせ下さい。また、私永田が Twitter で情報発信をしています。良かったらこちらもフォローお願いいたします。

その他のおすすめ記事

ケイツー・インタラクティブをSNSでフォローする

PAGE TOP

ケイツー・インタラクティブの出来ること

PAGE TOP