こんにちは、らくからちゃです。
ここ最近、Googleより『低品質なコンテンツは検索順位下げるからね！』という大本営発表が出されました。
以前より、Googleの検索順位については『コンテンツの量が長ければ長いほうが良い』、俗に長文SEOと呼ばれる仮説がまことしやかに語られてきました。その真偽はさておき、多くのウェブサイトが内容量の充実によるアクセス増を狙った結果、『ただ長いだけで最後まで読まれることのない駄文長文コンテンツ』が増えてきたのも事実です。
おそらくGoogleは『読むに値するコンテンツか否か？』の判断に、ページの滞在時間も採用しているのでしょう。しかしただ長いだけのコンテンツはむしろ価値のない物として評価されている可能性もあります。ネット上に文章を公開するならば、より多くの人に読まれる＝PVが増えることを望むことは自然なことです。しかしPVはあくまで『アクセスがあったかどうか？』を示すものであり、文章が読まれたかどうかを示すものではありません。
そこで記事が最後まで読み終えられた『読了率』を取得し、途中までしか読まれなかったのであればその『離脱点』を確認し、記事を改善する方法を当ブログに導入してみました。
本記事では
- Google Tag Managerの基本的な使い方
- 読了率の取得方法と分析の方法
- 離脱点の確認方法と対応例
についてご説明します。はてなブログを前提に記載致しますが、Google Analytics(以下GA)とGoogle Tag Manager(以下GTM)が利用できる環境であれば、WordPress等でも応用し活用いただけます。なお私は、ウェブテクノロジーについて素人に毛が生えたレベルですので、重要な事項についてはプロフェッショナルにご相談することをお薦め致します。
『読了率』『離脱点』を取得する狙い
まずこの記事でやりたいことについて改めて確認します。下記例では、弊ブログの記事『定時退社を2週間連続して改めて気がついたこと』を画像にしたものになります。書いた本人が言うのもなんですが、なげぇっすね(；´Д｀)。3,583文字だそうで、画像にすると10000px、4kのディスプレイで画面5枚スクロールが必要な分量です。
例えばこの記事に100人アクセスがあったとしましょう。その後、25%、50%、75%、100%のラインを通過した人の人数を取ると
- 25%・・・90人
- 50%・・・60人
- 75%・・・50人
- 100%・・・40人
だと仮定します。この例では、100人のアクセスがあるものの、最後まで興味を持って読んでくれた人は40人しかいないということがわかります。また25%と50%のラインで大きく人数が減少しています。このあたりで何か『この記事はもういいや』と思われる理由があることが予想されます。
読了率を元に読者の期待に応えられていない記事を抽出し、離脱点を元にどのあたりに問題があるかを手軽に分析することを本記事の目標とします。
Google Tag Managerの導入方法
本記事では分析にあたり、GAの『イベント トラッキング』と呼ばれる機能を利用します。同機能は、特定のJavaScriptにて値をセットして実行すれば、その時の情報を『イベント』というデータで管理・分析することが可能です。今回の例では、それぞれのポイントを通過するごとに、下記のようにイベントを発生させます。
今回のようなデータの取得・解析に用いるためにページに埋め込む小規模なプログラムのことを『タグ』と呼びます。直接ウェブページ上に埋め込んでしまうことも出来ますが、修正を行う都度ウェブページを一々修正することも煩雑です。そこで利用するのがGoogle Tag Manager（GTM）。
GTMは、煩雑なタグの管理を効率化することが出来るGoogle謹製のツールです。ぶっちゃけ今回の例だと、わざわざ使わなくともできるのですが、折角なので使ってみましょう。登録は下記サイトから特に何も考えず、言われたとおりにポチポチすれば出来ると思います。
操作を進めていくと、『このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。』と言われるコードが出てきます。これは、はてなブログの設定メニューより『設定→詳細設定』から"headに要素を追加"の一番上に追加してください。
同様に『また、開始タグ <body> の直後にこのコードを次のように貼り付けてください。』と言われるコードについては、デザイン設定の『ヘッダー』部分の一番上に追加して下さい。モバイル版も忘れずに。
さてこれで下ごしらえはおしまいです。その他、分からないことがあればGoogle先生に相談だ！ただ一つ注意頂きたいのが、GTMって結構前にがらっと画面上の項目の名前が変わったんですよね。初心者さんには、その辺がかなり難しいかもしれません。
Google Tag Managerの設定
さてお次はGTMの設定方法について確認しましょう。とその前に、GTMの画面の見方について簡単にご説明しましょう。うまく登録できれば、まずはこんな画面が開けるようになるはずです。
GTMでは、全ての要素を『バージョン』で管理します。画面上でちょこちょこいじっても、その結果が即反映されるわけでなく、『プレビュー』をすると同じブラウザの中だけで変更が反映され、『公開』を押すとウェブ上の表示結果に反映されますので、試しながら導入することが出来ます。
またGTMでは、以下３つの機能が用意されています。ざっくりまとめるとこんな感じ。
- タグ・・・トリガーが有効になった時に実行される命令
- トリガー・・・特定の条件を満たした時に反応するスイッチ
- 変数・・・特定の情報を取得して保管するための値
といった感じでしょうか。トリガーが有効になれば、タグが実行され、変数の中に入っている値を処理するってイメージです。
今回は全部で
- タグ・・３つ
- トリガー・・・３つ
- 変数・・・２つ
を作成します。登録内容は下記のとおりです。なお名前が非常に重要ですので間違えず設定ください。
（変数）scrollPoint
- 名前・・・scrollPoint
- 変数の種類・・・データレイヤーの変数
- データレイヤーの変数名・・・scrollPoint
- データレイヤーのバージョン・・・バージョン１
（変数）scrollPointElms
- 名前・・・scrollPointElms
- 変数の種類・・・データレイヤーの変数
- データレイヤーの変数名・・・scrollPointElms
- データレイヤーのバージョン・・・バージョン１
（トリガー）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
なお本ソースコードは、こちらのコードを元に、今回の目的のために修正し、利用させて頂きました。
なおご興味がある方の為に、ざっと処理についてまとめます。
- ページが読み込まれるとscrollPointに指定されたHTMLがロードされる
- 同HTMLには、ページを一定の閾値スクロールするとscrollPoint命令が実行される
- 同時に、表示領域にH3タグが存在するとscrollPointElms命令が実行される
- 同命令実行時に閾値・タグ内の値が変数にセットされれる
- scrollPoint/scrollPointElmsの実行がトリガーとなりGA_scrollPoint/GA_scrollPointElmsが実行される上記処理によってGoogleにイベントが送信される
ってな感じです。
ひととおり設定が終わったら、画面の左上から『公開』ボタンを押して結果を反映しましょう。
Google Analyticsの設定
設定語しばらく待って頂き、GAのリアルタイム画面に下記のように『イベント』の実行回数が表示されれば成功です。イベントの情報は、アクティブユーザーでは確認出来ませんでしたので、過去90分のほうをご確認下さい。
これで必要な情報は取得できているのですが、分析を進めるために、以下の『目標』も設定しましょう。目標の設定は、管理ページからビュー（一番右端）より追加出来ます。
本文の最後までスクロールした場合、GTMから"End"という値のイベントが発生するように登録致しました。その値が発生した場合、『最終到達』という目標を達成したものとみなします。
これで一通りの準備作業が完了です。
Google Analyticsの見方と対応例
ここまでの設定が正しければ、必要な情報の収集が始まります。設定後のものしか確認できませんので、しばらくデータを収集すると、以下のように分析が出来るようになります。
集客の『チャネル』から『ソーシャルブックマーク』経由のデータを抜き出してみました。ポイントは『目標１のコンバージョン率』ですね。これを見れば、ページが最後まで読まれた割合が確認できます（厳密に言えば、セッション単位で管理しているはずなので２ページ以上最後まで読まれたらダブルカウントされる気もしますが・・・）これでざっくりとしたページごとの状況が掴めます。
では次に各ページごとの詳細を見てみましょう。２番目に出ている
の結果が気になりましたので、『行動』→『イベント』→『サマリ』から、当該URLを選択し、『イベントアクション』のタブを選ぶとこんな感じに表示されました。
今回の設定で、大きく２種類のデータが取得できるようになっています。
- scrollPoint・・・10%毎の通過数を表示
- scrollPointElms・・・大見出し（H3タグ）の通過数を表示
って説明するより、それぞれのリンクを踏んで移動してもらったほうが分かりやすいと思います。scrollPointだとこんな感じ。
『イベントラベル』がページの上から◯◯%分まで読んだ人の数を示します。見出しを利用していなくとも使えるのが便利なポイントですが、ぶっちゃけこれだと良くわかりませんよね。で、scrollPointElmsだとこんな感じ。
どうでしょう？章のタイトルが入ったら随分分かりやすくなった気がしませんか？ただ章建てのタイトルが変えた場合、データも崩れちゃいますので、そのような例ではさっきのパーセンテージのほうがいいかもしれませんけどね。
さてせっかくですので、もう少し数字を追ってみましょう。
| 章番号 | イベント数 | 離脱率 |
|---|---|---|
| 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 | 11.84% | 10.40% |
| 2 | 14.40% | 14.81% |
| 3 | 33.18% | 25.43% |
| 4 | 16.44% | 18.88% |
| 5 | 4.42% | 5.00% |
上記はとあるページの章ごとの離脱率をまとめたものです。ご覧の通り、３章の離脱率が大きいのがこのページの課題です。実際に当該箇所を読み返すとかなり冗長な表現がありました。そこで、回りくどい表現を改善したところ、３章での離脱率が8%ほど改善されました。有意な結果か誤差のレベルかは怪しいラインですが、読了率自体も改善を行った木曜日未明以後、ある程度上昇しました。
まとめ
ブログをある程度書いていると、過去の記事はストックとしてどんどん積み上がっていきます。検索流入等でアクセスを得たあと『このサイトは良いな』と思って貰えれば、セッションあたりPV数も増加するでしょう。
あとゲスい話をすると、多くの人がページの下の方に広告を設置していると思います。これらの広告はその位置までスクロールされなければ意味がありません。検索流入を減らさない範囲でダイエットしておいたほうが、収益性の観点からも有益かもしれませんね。
なお本稿では、GAやGTMの設定について、一般的な箇所についてはかなり省いて記載しました。上手く動かないよう(´・ω・｀)という話があれば、下記までご連絡下さい。気が向いたら返事するかもしれません。
本稿がどなたかのお役に立てば幸いです。
ではでは、今日はこのへんで。
