ブログの読了率と離脱率を調べるGoogle Tag Manager設定を全部さらすよ

ブログを書けども書けども「はたして自分の記事はちゃんと読まれているんだろうか？」という疑問がよぎります。

訪問数はPVを調べたらわかりますが、その人がページ全体のどこまで読んでいるか（読了率）、どのタイミングでページを離れているのか（離脱）ということまではわかりません。

ところが Google Tag Managerという無料のサービスを使うことにより、

記事が最後まで読まれる割合はどのくらいか
その記事のどのタイミングで読者が離れているのか
リライトにより読者が離れていた各タイミングでどれだけ改善できたか

などというかなり細かいところまでデータが取れるようになります。

今回僕が紹介するのはWord Pressをベースにした導入方法です。

設定段階でかなりつまづいたので、その時の情報共有ができたらと思って紹介させていただきます。

STORK（ストーク）カスタマイズ編

子テーマを用意する方法
 メニューを2段表示する方法
 ロゴを大きく表示する方法
 カテゴリーラベルを消す方法
 見出しを自由に変更する方法
 ひと味違ったトップページにする方法
 記事を3列表示させる方法
 関連記事を新しいタブで表示する方法

テクニック編

CSSの変更が反映されない時の対処法
 蛍光ペン風のマーカーを引くカスタマイズ方法
 プロフィールを2つ設置する方法
 カエレバ・ヨメレバをオシャレに表示する方法
 画像に枠線を付けて目立たせる方法
 特殊文字を使ってコードを紹介する方法
 h2見出しの前にアドセンスを自動表示させる方法
 疑似要素でアイコンを表示させる方法
記事の離脱率と読了率を無料で計測する方法

この記事の目次一覧

GTM（Google Tag Manager）で読了率を調べる

次の画像は僕のブログで一番読まれている記事「かっこいいサインの作り方」が仮に1日100PVだと仮定した場合、記事のどの部分まで何割の人が読んでいるかを表した画像です。

記事の一番上から25％の箇所までは80人の人が読んでくれました。

記事の半分（50%）になると54人、つまりページに訪問した人のうち約半分の人がそこまで読んでくれ、もう半分の人が離脱したということ。

更に進んで75％、ちょうどこのあたりで記事の内容は終わり関連記事の紹介が始まりますが、そこまで目を通してくれたのは18人、そしてページの一番下100％まで目を通してくれた人はわずか2人だったということがわかります。

読了率・離脱率・離脱ポイントがわかる

このツールでは記事全体のどこまで読まれているか（スクロールされているか）を知ることができます。

離脱率の比較・検証ができる

せっかく記事を書く以上は最後まで読んで欲しい、これは記事を書くライターなら誰でも思うこと。

今回のツールを使うことで

現時点の離脱率、離脱ポイント
読了率
リライトすることによる離脱率、離脱ポイントの変化

の比較をすることができ、自分のリライト内容がどれだけ離脱防止に役立ったのかを知ることができます。

アドセンスやウィジェットの効果的な配置を検証できる

アドセンスがクリックされるためには、少なくともアドセンスを貼ったところまで記事が読まれる必要があります。

よく記事下にアドセンスを貼る人がいますが（自分もそう）、離脱ポイントを考えるともうちょっと上に配置したほうがいいんじゃないか？もしくは記事下まで読んでもらうために何か工夫はできないか？など検証する材料として使うことができます。

経緯

実はこの便利ツールの存在を知ったのは2017年2月頃にスマホアプリ “SmartNews”に掲載された、らくからちゃさんという人のはてな記事がきっかけでした。

読んだ瞬間にこりゃ便利そう！と思ったと同時に『ややこしそう』ということで諦めてたんですけど、重い腰をあげてやっとチャレンジしてみたところ案の定つまづきました。

でもなんとか完成しました・・・

今回は画像もたくさん載せたので、これと同じように設定すれば迷わずできるはず。

参考にしてもらえれば嬉しいです。かなり長丁場になるので気合いれていきましょう！

今回やること

まず全体像の把握からいきましょう。

今回使うツールは Google Tag Manager という無料のサービスです。

本来はWEBマーケティングとか本格的にデータ分析が必要な時に使われる便利ツールです。

このツールを使って自分のブログに

タグ
トリガー
変数

の3つの要素を埋め込むことで、特定の条件を満たした時（トリガー）に命令（タグ）が実行されてデータ（変数）を集めることが可能になり、ページのどの辺りまで読まれているのかを調べることができるようになります。

ええ、まるで理解してるかのように言ってますけど難しいことはサッパリです。

らくからちゃさんの記事の受け売りです、すんません。

でも、らくからちゃさんの記事ははてなブログを対象にした導入方法の紹介でした。

僕の今回の記事はWord Pressブログに導入する方法なので、便利そうだと思ってたけど諦めてた人がいたら参考にしてみてください。

具体的な導入方法

ではさっそくいってみましょう！

Google Tag Manager の登録

まずこちらのページから Google Tag Manager にアカウント登録します。

アカウント名はなんでもいいです。わかりやすくいきましょう。

コンテナ名は自分のブログURLを入力します。
コンテナの使用場所はよくわからなかったのでウェブにしました。

続いて利用規約が表示されるので~~読み飛ばして~~しっかり目を通して右上の「はい」を選択します。

Google タグマネージャーをインストール

さてつまづきポイントがやってきました。

続いて Google タグマネージャーをインストールするよう指示があります。

指示は2つ。

ページの<head>内にコードを埋め込むこと
<body>の直後にコードを埋め込むこと

実はここでかなり時間を取られました。

らくからちゃさんの記事ははてなブログ用なので画像つきでわかりやすく解説されてるんですが、ワードプレスを使う僕の場合はどこに埋め込んだらいいのかさっぱりでした。

でも答えがわかりました、答えは header.php でした。
これにコードを埋め込めばOKです。

header.phpの子テーマを用意する
必ず header.php の子テーマを作り、子テーマにコードを埋め込むようにしましょう！

やり方はかんたん。
CyberduckなどのFTPソフトを使ってブログデータに直接アクセスし、親テーマフォルダにあるheader.phpを子テーマフォルダにコピペするだけ。

親テーマは[public_html]-[wp-content]-[themes]-[使ってるテーマ]の中にあるよ。

<head>に埋め込む

では指示に従いコードを埋め込みます。

まず最初のコードは header.php の<head>のすぐ後ろにコピペします。

<body>に埋め込む

んでもう1つのコードは同じく header.php の中にある<body>のすぐ後ろにコピペしましょう。

これでコードの埋め込みが完了です。
保存して次のステップに進みましょう！

変数、トリガー、タグの作成

埋め込みが終わると Google Tag Manager の管理画面にログインできます。

ここからが本番です。

上の画像でオレンジ枠で囲んだ「タグ」「トリガー」「変数」の3つの要素を設定するんですが、

タグを3つ
トリガーを3つ
変数を2つ

これらの数を作成する必要があります。

順番に1つずつクリアしていきましょう。

まず変数から作成します。

変数を2つ作る

これから変数を2つ作成しますが、設定する内容は次の通りです。

1つ目の変数詳細

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

2つ目の変数詳細

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

なんのこっちゃ？と思うかもしれませんが、1つずつ設定方法を解説していきますね。

なお、今後の設定においては、名前の大文字や小文字が間違っていてもツールがうまく動かないので、基本的にコピペで名前入力するほうがいいです。

まず変数のボタンをクリックすると次のような画面になるので、ユーザー定義変数の新規ボタンをクリックします。

新規画面はこんな感じ。

ここから詳細を設定していくわけですが、「名前のない変数」の部分をクリックして名前を scrollPoint にします。（コピペしてください）

名前入力が終わったら「変数タイプを選択して設定を開始」をクリックします。
表示された画面で変数タイプを選択することになるので、ここでは「データレイヤーの変数」を選択します。

その次に表示される画面でデータレイヤーの変数名をscrollPoint、データレイヤーのバージョンでバージョン1を選択します。

ここまで出来たら保存します。するとユーザー定義変数が1つ作成されたことがわかります。

では次は2つ目の変数を作ります。

手順は今紹介したことをもう1度繰り返すだけ。
ただし設定する内容はこれです。

2つ目の変数詳細

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

1つ目と比べると名前とデータレイヤーの変数名が違っているので注意しましょう。

2つ目の登録が終わるとこんな風に変数が2つ並びます。これで変数作成は終了です。

次はトリガーの作成に移りましょう。

トリガーを3つ作る

続いてトリガーボタンを押して変数の時と同じ要領で新規作成していくわけですが、これから作る3つのトリガーの詳細は次の通り。

1つ目のトリガー詳細

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

2つ目のトリガー詳細

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

3つ目のトリガー詳細

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

これらの通りにトリガーを3つ作成します。

新規作成画面や

詳細の設定もさっきの変数と同じなので迷うことはないはず。

1つ目のトリガー詳細、2つ目のトリガー詳細、3つ目のトリガー詳細と照らし合わせながらトリガー3つを作成しましょう。

無事おわるとこうやって3つ並びます。

さて最後はタグの作成です。

タグを3つ作る

タグも先ほどの変数、トリガーと同じように詳細を設定します。

内容は若干違いますが、次の詳細をそのままコピペする流れは同じです。

1つ目のトリガー詳細

名前：GA_scrollPoint
タグタイプ：ユニバーサルアナリティクス
トラッキングID：自分のトラッキングID（UA-xxxxxx-x）
トラッキングタイプ：イベント
カテゴリ：{{Page URL}}
アクション：scrollPoint
ラベル：{{scrollPoint}}
値：空欄にしておく
非インタラクションヒット：真
トリガー：scrollPoint

2つ目のトリガー詳細

名前：GA_scrollPointElms
タグタイプ：ユニバーサルアナリティクス
トラッキングID：自分のトラッキングID（UA-xxxxxx-x）
トラッキングタイプ：イベント
カテゴリ：{{Page URL}}
アクション：scrollPointElms
ラベル：{{scrollPointElms}}
値：空欄にしておく
非インタラクションヒット：真
トリガー：scrollPointElms

3つ目のトリガー詳細

名前：scrollPoint
タグタイプ：カスタムHTML
HTML：※下記をコピペしてください※
トリガー：DOM Ready

HTML

if(typeof jQuery != ‘undefined’){
jQuery(document).ready(function($){

/* —————————————————————– */
// スクロール量の計測
/* —————————————————————– */

$(function(){

/* —————————————————————– */
// 設定変更箇所
/* —————————————————————– */

// 計測のタイプ
// AreaPer: ページの高さに対するパーセンテージで指定
// AreaElms: タグ名・Class名・ID名で指定
var ga_slAreaType = “AreaElms”; // AreaPer or AreaElms

// AreaPerの場合のパーセント(10%なら0.1と指定。何個でも指定可能)
var ga_slAreaPer = new Array(“0.1″,”0.2″,”0.3”, “0.4”, “0.5”, “0.6”, “0.7”, “0.8”, “0.9”, “1.0”);

// AreaNumの場合の区切りとなる要素(jQueryのセレクタの記述ルールで指定。何個でも指定可能)
var ga_slAreaElms = [
‘h3′,’.entry-footer’
];

// 固定のピクセル数で計測
// AreaPer・AreaElmsのどちらでも計測される。
// ファーストビューから少しでもスクロールしたかどうかを計測する。
var ga_slPointFixed = 150; // デフォルトは150px

/* —————————————————————– */

// 計測完了フラグ
var ga_slCmpFixed;
var ga_slCmp = new Array;
var ga_slCmpElms = new Array;

// 高さ・閾値関連
var ga_pg_h; // ページの高さ
var ga_win_h; // ウィンドウの高さ
var ga_slAreaSep; // エリアの閾値(配列)
var ga_slLabel; // イベントのラベル
var ga_slAreaSepElms; // エリアの閾値(配列)
var ga_slLabelElms; // イベントのラベル

function getHeight(){
// ページとウィンドウの高さを取得
ga_pg_h = $(document).height();
if(document.all){
ga_win_h = document.documentElement.clientHeight;
}else{
ga_win_h = window.innerHeight;
}

// 閾値の設定
ga_slAreaSep = [];
ga_slLabel = [];
ga_slAreaSepElms = [];
ga_slLabelElms = [];

var ga_slLabelnum = 1
var ga_slLabelnumElms = 1
var tagText = “”

for(var i = 0; i < ga_slAreaPer.length; i++){
ga_slAreaSep[i] = (ga_pg_h – ga_win_h) * ga_slAreaPer[i];
ga_slLabel[i] = ga_slAreaPer[i] * 100}

for(var i = 0; i < ga_slAreaElms.length; i++){
$(ga_slAreaElms[i]).each(function(){
ga_slAreaSepElms.push($(this).offset().top – ga_win_h);
tagText = $(‘h3’).eq(ga_slLabelnumElms-1).text();
if(!tagText){
tagText = “End”;
}else{
tagText = ga_slLabelnumElms + “_” + tagText;
}
ga_slLabelElms.push(tagText);
ga_slLabelnumElms = ga_slLabelnumElms + 1;
});
}
// 昇順にソート
ga_slAreaSepElms.sort(
function(a,b){
if(a < b){ return -1 };
if(a > b){ return 1 };
return 0;
}
);

}
getHeight();
$(window).resize(function(){
getHeight();
});

$(window).scroll(function(){
var ga_sl_y = $(this).scrollTop();

if((ga_sl_y >= ga_slPointFixed)&&(!ga_slCmpFixed)){
dataLayer.push({
‘scrollPoint’: 0,
‘event’: ‘Scroll’
});
ga_slCmpFixed = true;
}

for (var i = 0; i < ga_slAreaSep.length; i++) {
if((ga_sl_y >= ga_slAreaSep[i])&&(!ga_slCmp[i])){
dataLayer.push({
‘scrollPoint’: ga_slLabel[i],
‘event’: ‘Scroll’
});
ga_slCmp[i] = true;
}
}

for (var i = 0; i < ga_slAreaSepElms.length; i++) {
if((ga_sl_y >= ga_slAreaSepElms[i])&&(!ga_slCmpElms[i])){
dataLayer.push({
‘scrollPointElms’: ga_slLabelElms[i],
‘event’: ‘ScrollElms’
});
ga_slCmpElms[i] = true;
}
}

});
});

/* —————————————————————– */
});
}

</script>

タグは今までの変数とトリガーに比べるとちょっと複雑ですね。

でも新規作成から進めるやり方は同じなので、今紹介した詳細をコピペしてタグを3つ作成しましょう。

3つ作り終えるとこうやってタグが並びます。

これで変数、トリガー、タグの作成は終了です。

ゴールまであとちょっと！

公開

ここまで来たらあとは右上にある公開ボタンをクリックするだけ。

その先の画面でバージョンの設定という項目が表示されますが、今回つくったツールの名称と説明を書くだけです。

自分でわかればいいので何でもOKです。

これで Google Tag Manager の設定は終了です。

お疲れ様でした！

Google Analytics で動作確認する

では今つくったツールがちゃんと動いているか確認してみましょう。

まず Google Analytics にログインし、レポートの[リアルタイム]をクリックします。
その中に[イベント]という項目が増えていたら成功です！

もし見つからないという場合は Google Tag Manager に戻って設定ミスがないか確認してみてください。

[イベント]をクリックするとリアルタイムの訪問者数が表示されますが、その下に小さく「イベント（直前の30分間）」という項目があるのでそれをクリック。

切り替わった画面の下半分が過去30分間のリアルタイム訪問ページですが、右側のイベントの数がどんどん変動しているのがわかると思います。

さっき設定した Google Tag Manager のツールが訪問者のページスクロールを自動的に計測し、ページのどの部分まで読まれているかデータを反映させています。

なんだか自分でもよくわからないうちにここまで設定ができてしまったので、数字が動いているのを見るとちょっとした感動がありました。

ツールの使い方

では実際にどうやってこのツールを使うのか見ていきましょう。

まずは Google Analytics にアクセスし、行動→イベント→概要を開きます。
するとさっき設定したトリガーやタグが、記事ごとにどれだけ動いているのかがイベント数という数値で表示されていることがわかります。

反映に時間がかかるかも？
トリガーやタグを設定した当日だと Analytics に反映されてない可能性があります。遅くても設定翌日には表示されるはず。

ためしに一番イベント数が多い一番上のリンク先にいってみます。

するとそのページ単体での数値が表示されます。

でもこれだけだとなーんにもわからないので、オレンジの枠で囲んだイベントアクションをクリックしましょう。すると「scrollPoint」と「scrollPointElms」の2つの項目が表示されます。

scrollPoint

scrollPointをクリックすると0, 10, 20, 30などとイベントラベルが並んでいます。

この数字の意味は、例えば10はページ一番上から10％まで読んだ人の割合を意味します。

20なら20％まで読んだ人の割合、30なら30%までという具合です。

でもこれだけだと正直あまり内容がわかりません。だって自分の記事の20％の部分はここだ！なんて分かる人いないですよね。

そんな時は次の scrollPointElms をクリックしてみましょう。

scrollPointElms

scrollPointElmsではh3タグを通過した割合が表示されます。

なのでこんな風に見出しタイトルで表示されるんですね。

これなら見出しごとにイベント数がわかるので、訪問者がどこまで興味を持って読んでくれているか一目瞭然ですね。

注意！
scrollPointElmsはあくまでもh3タグを通過した時にカウントされるので、記事の中でh3を使ってないとイベントが発生しません。

離脱率の計算の仕方

さて一番知りたいのは離脱率の計算方法です。

Analyticsではそこまで自動計算できないので手動で計算する必要があります。

いや、ひょっとしたら自動計算させるように設定できるのかもしれないですけどそんな知識ありません(ﾉ∀`)ｱﾁｬｰ

今回は見出しタイトルが表示される scrollPointElms のイベント数を使って計算したいと思います。わかりやすいように表にまとめながらいきますね。

scrollPointElmsの注意
scrollPointElms はh3タグを通過した時に発生するイベント数を表示しますが、これって考え方を変えるとページ一番上（scrollPointでいう0の箇所）からh3タグが出て来るまでの距離が長ければ長いほど、その途中の離脱ポイントが正確に計測できなくなることを意味してます。

これに対してはh3タグを早めに入れたり、もしくは scrollPoint と scrollPointElms を併用して使うとある程度対策することができます。