ゆとりずむ

東京で働く意識低い系ITコンサル(見習)。金融、時事、節約、会計等々のネタを呟きます。

その記事最後まで読まれている?ページの読了率をGoogleTagManagerを利用して取得する方法のまとめ


こんにちは、らくからちゃです。

ここ最近、Googleより『低品質なコンテンツは検索順位下げるからね!』という大本営発表が出されました。

以前より、Googleの検索順位については『コンテンツの量が長ければ長いほうが良い』、俗に長文SEOと呼ばれる仮説がまことしやかに語られてきました。その真偽はさておき、多くのウェブサイトが内容量の充実によるアクセス増を狙った結果、『ただ長いだけで最後まで読まれることのない駄文長文コンテンツ』が増えてきたのも事実です。

おそらくGoogleは『読むに値するコンテンツか否か?』の判断に、ページの滞在時間も採用しているのでしょう。しかしただ長いだけのコンテンツはむしろ価値のない物として評価されている可能性もあります。ネット上に文章を公開するならば、より多くの人に読まれる=PVが増えることを望むことは自然なことです。しかしPVはあくまで『アクセスがあったかどうか?』を示すものであり、文章が読まれたかどうかを示すものではありません

そこで記事が最後まで読み終えられた『読了率』を取得し、途中までしか読まれなかったのであればその『離脱点』を確認し、記事を改善する方法を当ブログに導入してみました。

本記事では

  1. Google Tag Managerの基本的な使い方
  2. 読了率の取得方法と分析の方法
  3. 離脱点の確認方法と対応例

についてご説明します。はてなブログを前提に記載致しますが、Google Analytics(以下GA)とGoogle Tag Manager(以下GTM)が利用できる環境であれば、WordPress等でも応用し活用いただけます。なお私は、ウェブテクノロジーについて素人に毛が生えたレベルですので、重要な事項についてはプロフェッショナルにご相談することをお薦め致します。

『読了率』『離脱点』を取得する狙い

 まずこの記事でやりたいことについて改めて確認します。下記例では、弊ブログの記事『定時退社を2週間連続して改めて気がついたこと』を画像にしたものになります。書いた本人が言うのもなんですが、なげぇっすね(;´Д`)。3,583文字だそうで、画像にすると10000px、4kのディスプレイで画面5枚スクロールが必要な分量です。

f:id:lacucaracha:20170204212918p:plain

例えばこの記事に100人アクセスがあったとしましょう。その後、25%、50%、75%、100%のラインを通過した人の人数を取ると

  • 25%・・・90人
  • 50%・・・60人
  • 75%・・・50人
  • 100%・・・40人

だと仮定します。この例では、100人のアクセスがあるものの、最後まで興味を持って読んでくれた人は40人しかいないということがわかります。また25%と50%のラインで大きく人数が減少しています。このあたりで何か『この記事はもういいや』と思われる理由があることが予想されます。

読了率を元に読者の期待に応えられていない記事を抽出し、離脱点を元にどのあたりに問題があるかを手軽に分析することを本記事の目標とします。

Google Tag Managerの導入方法

本記事では分析にあたり、GAの『イベント トラッキング』と呼ばれる機能を利用します。同機能は、特定のJavaScriptにて値をセットして実行すれば、その時の情報を『イベント』というデータで管理・分析することが可能です。今回の例では、それぞれのポイントを通過するごとに、下記のようにイベントを発生させます。

f:id:lacucaracha:20170204214617p:plain

今回のようなデータの取得・解析に用いるためにページに埋め込む小規模なプログラムのことを『タグ』と呼びます。直接ウェブページ上に埋め込んでしまうことも出来ますが、修正を行う都度ウェブページを一々修正することも煩雑です。そこで利用するのがGoogle Tag Manager(GTM)。

f:id:lacucaracha:20170204215514p:plain

GTMは、煩雑なタグの管理を効率化することが出来るGoogle謹製のツールです。ぶっちゃけ今回の例だと、わざわざ使わなくともできるのですが、折角なので使ってみましょう。登録は下記サイトから特に何も考えず、言われたとおりにポチポチすれば出来ると思います。

操作を進めていくと、『このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。』と言われるコードが出てきます。これは、はてなブログの設定メニューより『設定→詳細設定』から"headに要素を追加"の一番上に追加してください。

f:id:lacucaracha:20170204220313p:plain

同様に『また、開始タグ <body> の直後にこのコードを次のように貼り付けてください。』と言われるコードについては、デザイン設定の『ヘッダー』部分の一番上に追加して下さい。モバイル版も忘れずに。

f:id:lacucaracha:20170204220826p:plain

さてこれで下ごしらえはおしまいです。その他、分からないことがあればGoogle先生に相談だ!ただ一つ注意頂きたいのが、GTMって結構前にがらっと画面上の項目の名前が変わったんですよね。初心者さんには、その辺がかなり難しいかもしれません。

Google Tag Managerの設定

さてお次はGTMの設定方法について確認しましょう。とその前に、GTMの画面の見方について簡単にご説明しましょう。うまく登録できれば、まずはこんな画面が開けるようになるはずです。

f:id:lacucaracha:20170204222944p:plain

GTMでは、全ての要素を『バージョン』で管理します。画面上でちょこちょこいじっても、その結果が即反映されるわけでなく、『プレビュー』をすると同じブラウザの中だけで変更が反映され、『公開』を押すとウェブ上の表示結果に反映されますので、試しながら導入することが出来ます。

またGTMでは、以下3つの機能が用意されています。ざっくりまとめるとこんな感じ。

  • タグ・・・トリガーが有効になった時に実行される命令
  • トリガー・・・特定の条件を満たした時に反応するスイッチ
  • 変数・・・特定の情報を取得して保管するための値

といった感じでしょうか。トリガーが有効になれば、タグが実行され、変数の中に入っている値を処理するってイメージです。

今回は全部で

  • タグ・・3つ
  • トリガー・・・3つ
  • 変数・・・2つ

を作成します。登録内容は下記のとおりです。なお名前が非常に重要ですので間違えず設定ください。

(変数)scrollPoint

  • 名前・・・scrollPoint
  • 変数の種類・・・データレイヤーの変数
  • データレイヤーの変数名・・・scrollPoint
  • データレイヤーのバージョン・・・バージョン1

(変数)scrollPointElms

  • 名前・・・scrollPointElms
  • 変数の種類・・・データレイヤーの変数
  • データレイヤーの変数名・・・scrollPointElms
  • データレイヤーのバージョン・・・バージョン1 

(トリガー)scrollPoint

  • 名前・・・scrollPoint
  • イベント・・・Scroll
  • トリガーの種類・・・カスタムイベント
  • このトリガーの発生場所・・・すべてのカスタムイベント

(トリガー)scrollPointElms

  • 名前・・・scrollPointElms
  • イベント・・・ScrollElms
  • トリガーの種類・・・カスタムイベント
  • このトリガーの発生場所・・・すべてのカスタムイベント

(トリガー)DOM Ready

  • 名前・・・DOM Ready
  • トリガーの種類・・・ページビュー - DOM Ready
  • このトリガーの発生場所・・・すべてのDOM Readyイベント

(タグ)GA_scrollPoint

  • 名前・・・GA_scrollPoint
  • タグの種類・・・ユニバーサルアナリティクス
  • トラッキングID・・・自分のトラッキングID(UA-xxxxxxx-x)
  • トラッキングタイプ・・・イベント
  • カテゴリ・・・{{Page URL}}
  • アクション・・・scrollPoint
  • ラベル・・・{{scrollPoint}}
  • 非インタラクションヒット・・・真
  • 配信トリガー・・・scrollPoint

(タグ)GA_scrollPointElms

  • 名前・・・GA_scrollPointElms
  • タグの種類・・・ユニバーサルアナリティクス
  • トラッキングID・・・自分のトラッキングID(UA-xxxxxxx-x)
  • トラッキングタイプ・・・イベント
  • カテゴリ・・・{{Page URL}}
  • アクション・・・scrollPointElms
  • ラベル・・・{{scrollPointElms}}
  • 非インタラクションヒット・・・真
  • 配信トリガー・・・scrollPointElms

(タグ)scrollPoint

  • 名前・・・scrollPoint
  • タグの種類・・・カスタムHTML
  • HTML・・・※下記参照
  • 配信トリガー・・・DOM Ready

gistae1b2a46191e4b3d28df4421a7fc935a

なお本ソースコードは、こちらのコードを元に、今回の目的のために修正し、利用させて頂きました。

Googleタグマネージャーでスクロール量を計測する方法

なおご興味がある方の為に、ざっと処理についてまとめます。

  1. ページが読み込まれるとscrollPointに指定されたHTMLがロードされる
  2. 同HTMLには、ページを一定の閾値スクロールするとscrollPoint命令が実行される
  3. 同時に、表示領域にH3タグが存在するとscrollPointElms命令が実行される
  4. 同命令実行時に閾値・タグ内の値が変数にセットされれる
  5. scrollPoint/scrollPointElmsの実行がトリガーとなりGA_scrollPoint/GA_scrollPointElmsが実行される上記処理によってGoogleにイベントが送信される

ってな感じです。

ひととおり設定が終わったら、画面の左上から『公開』ボタンを押して結果を反映しましょう。

Google Analyticsの設定

設定語しばらく待って頂き、GAのリアルタイム画面に下記のように『イベント』の実行回数が表示されれば成功です。イベントの情報は、アクティブユーザーでは確認出来ませんでしたので、過去90分のほうをご確認下さい。f:id:lacucaracha:20170204225948p:plain

これで必要な情報は取得できているのですが、分析を進めるために、以下の『目標』も設定しましょう。目標の設定は、管理ページからビュー(一番右端)より追加出来ます。

本文の最後までスクロールした場合、GTMから"End"という値のイベントが発生するように登録致しました。その値が発生した場合、『最終到達』という目標を達成したものとみなします。

f:id:lacucaracha:20170204230508p:plain

f:id:lacucaracha:20170204230517p:plain

これで一通りの準備作業が完了です。

Google Analyticsの見方と対応例

ここまでの設定が正しければ、必要な情報の収集が始まります。設定後のものしか確認できませんので、しばらくデータを収集すると、以下のように分析が出来るようになります。

f:id:lacucaracha:20170204231850p:plain

集客の『チャネル』から『ソーシャルブックマーク』経由のデータを抜き出してみました。ポイントは『目標1のコンバージョン率』ですね。これを見れば、ページが最後まで読まれた割合が確認できます(厳密に言えば、セッション単位で管理しているはずなので2ページ以上最後まで読まれたらダブルカウントされる気もしますが・・・)これでざっくりとしたページごとの状況が掴めます。

では次に各ページごとの詳細を見てみましょう。2番目に出ている

の結果が気になりましたので、『行動』→『イベント』→『サマリ』から、当該URLを選択し、『イベントアクション』のタブを選ぶとこんな感じに表示されました。f:id:lacucaracha:20170204232603p:plain

今回の設定で、大きく2種類のデータが取得できるようになっています。

  • scrollPoint・・・10%毎の通過数を表示
  • scrollPointElms・・・大見出し(H3タグ)の通過数を表示

って説明するより、それぞれのリンクを踏んで移動してもらったほうが分かりやすいと思います。scrollPointだとこんな感じ。

f:id:lacucaracha:20170204232844p:plain

『イベントラベル』がページの上から◯◯%分まで読んだ人の数を示します。見出しを利用していなくとも使えるのが便利なポイントですが、ぶっちゃけこれだと良くわかりませんよね。で、scrollPointElmsだとこんな感じ。

f:id:lacucaracha:20170204233458p:plain

どうでしょう?章のタイトルが入ったら随分分かりやすくなった気がしませんか?ただ章建てのタイトルが変えた場合、データも崩れちゃいますので、そのような例ではさっきのパーセンテージのほうがいいかもしれませんけどね。

さてせっかくですので、もう少し数字を追ってみましょう。

章番号イベント数離脱率
1 7671 14%
2 6591 7%
3 6144 7%
4 5694 19%
5 4627 19%
6 3753 14%
7 3229 12%
8 2850  

4章あたりから離脱率がぐんと上がっています。記事の内容は、1−3章が『源泉徴収票の見方』で4章-7章が『税金の仕組み』。この記事のタイトルは『源泉徴収票の見方』がメインになっていますので、そちらを期待して来た方が『もういいや』と離脱したのかもしれませんね。

別の記事ですが、データを元に実際に行った改善例についてご紹介致します。

章番号改善前改善後
1 11.84% 10.40%
2 14.40% 14.81%
3 33.18% 25.43%
4 16.44% 18.88%
5 4.42% 5.00%

上記はとあるページの章ごとの離脱率をまとめたものです。ご覧の通り、3章の離脱率が大きいのがこのページの課題です。実際に当該箇所を読み返すとかなり冗長な表現がありました。そこで、回りくどい表現を改善したところ、3章での離脱率が8%ほど改善されました。有意な結果か誤差のレベルかは怪しいラインですが、読了率自体も改善を行った木曜日未明以後、ある程度上昇しました。

f:id:lacucaracha:20170204235724p:plain

まとめ

ブログをある程度書いていると、過去の記事はストックとしてどんどん積み上がっていきます。検索流入等でアクセスを得たあと『このサイトは良いな』と思って貰えれば、セッションあたりPV数も増加するでしょう。

あとゲスい話をすると、多くの人がページの下の方に広告を設置していると思います。これらの広告はその位置までスクロールされなければ意味がありません。検索流入を減らさない範囲でダイエットしておいたほうが、収益性の観点からも有益かもしれませんね。

 なお本稿では、GAやGTMの設定について、一般的な箇所についてはかなり省いて記載しました。上手く動かないよう(´・ω・`)という話があれば、下記までご連絡下さい。気が向いたら返事するかもしれません。

本稿がどなたかのお役に立てば幸いです。

ではでは、今日はこのへんで。