あなたの記事はどこまで読まれてる？WordPressサイトの”読了率”を調べる方法

by

Webサイトのコンテンツの”質”を確かめる指標の一つが、ユーザーにページがどこまで読まれているかを確かめる指標「読了率」。

WordPressサイトの「読了率」を調べるために、

  • 無料高機能アクセス解析ツール「Googleアナリティクス」
  • タグの一括管理ツール「Google Tag Manager（グーグルタグマネージャー）」

を使った設定方法を解説します。

前提条件

読了率を調べるためには、以下2つが完了していることが前提です。

  1. Webサイト/ブログに「Googleアナリティクス」の設置
  2. 「Googleタグマネージャータグ」の設置

Webサイト/ブログにGoogleアナリティクスの設置

Google_Analytics-logo

「Googleアナリティクス」とは、Googleの提供している無料の『高機能アクセス解析ツール』。Webサイトのアクセス解析にはかかすことができない導入必須のツールです。

Googleアナリティクスの詳しい設定手順は「WordPressで製作したサイトにGoogleアナリティクスを導入する方法【図解】」 を確認してください。

WordPressサイトに「Googleアナリティクス」を導入する方法【図解】
Webサイトのアクセス・売上・収益アップには、ユーザーの行動の分析がかかせません。アクセス解析に最もオススメのツールは「Googleアナリティクス（グーグル・アナリテ…
Eプロ

「Googleタグマネージャータグ」の設置

「Googleタグマネージャー」とは、Googleが提供している『タグを1元管理出来るツール』。Googleタグマネージャーは、「クリック測定ができる」「タグの設置が簡単」「タグが管理」という特徴を持っています。

WordPressサイトへの詳しい設置方法は、「Google タグマネージャーのアカウント取得、コンテナ作成の手順」を確認してください。

【完全図解】WordPressサイトに「Google タグマネージャー」を設定する方法 | 新規アカウント登録方法
Webサイトのアクセス解析にはかかせないGoogleの無料高機能ツール「Google Analytics」。外部リンククリックやコンバージョン測定などには、「タグ」の埋め込みが必要に…
Eプロ

Googleタグマネージャーで「変数」「トリガー」「タグ」を設定

Googleタグマネージャーで行う設定は、以下の３つ

  1. 「変数」を２つ設定（scrollPoint、scrollPointElms）
  2. 「トリガー」を3つ設定（scrollPoint、scrollPointElms、DOM Ready）
  3. 「タグ」を3つ設定（GA_scrollPoint、GA_scrollPointElms）

「変数」を２つ設定（scrollPoint、scrollPointElms）

wordpress-read_rate-variable

ユーザー定義変数の設定方法：Googleタグマネージャーにログイン >左メニューの「変数」>ユーザー定義変数の「新規」

変数「scrollPoint」の設定

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

変数「scrollPointElms」の設定

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

「トリガー」を３つ設定（scrollPoint、scrollPointElms、DOM Read)

wordpress-read_rate-trigger

トリガーの設定方法：左メニューの「トリガー」>トリガー「新規」

トリガー「scrollPoint」の設定

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

トリガー「scrollPointElms」の設定

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

トリガー「DOM Read」の設定

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

「タグ」を3つ設定（GA_scrollPoint、GA_scrollPointElms、scrollPoint）

wordpress-read_rate-tag

タグの設定方法：左メニューの「タグ」>「新規」

タグ「GA_scrollPoint」の設定

  • 名前：GA_scrollPoint
  • タグタイプ：ユニバーサルアナリティクス
  • トラッキングタイプ：イベント
  • カテゴリ：{{Page URL}}
  • アクション：scrollPoint
  • ラベル：{{scrollPoint}}
  • 値：空欄
  • 非インタラクションヒット：真
  • このタグでオーバーライド設定を有効にする：✓チェック
  • トラッキングID：GoogleアナリティクスのトラッキングID（UA-xxxxxx-x）
  • トリガー：scrollPoint

タグ「GA_scrollPointElms」の設定

  • 名前：GA_scrollPointElms
  • タグタイプ：ユニバーサルアナリティクス
  • トラッキングタイプ：イベント
  • カテゴリ：{{Page URL}}
  • アクション：scrollPointElms
  • ラベル：{{scrollPointElms}}
  • 値：空欄
  • 非インタラクションヒット：真
  • このタグでオーバーライド設定を有効にする：✓チェック
  • トラッキングID：ID：GoogleアナリティクスのトラッキングID（UA-xxxxxx-x）
  • トリガー：scrollPointElms

タグ「scrollPoint」の設定

  • 名前：scrollPoint
  • タグタイプ：カスタムHTML
  • HTML：scrollPoint · GitHub
  • トリガー：DOM Ready

【図解】Googleタグマネージャーで「読了率」を計測するための設定方法

上記の設定方法について、Googleタグマネージャーを使うのが初めてという方でもわかるよう図解で詳しく説明します。

1.変数の設定

Googleタグマネージャーにログインしコンテナ名を選択します。

Googleタグマネージャーにログインしコンテナ名を選択

Googleタグマネージャーにログインし「コンテナ名」を選択

左サイドメニューの「変数」を選択し、「設定」ボタンをクリックし、「クリック」にあるすべての項目にチェックを入れます。

"「変数」

1.「変数」（scrollPoint、scrollPointElms）を設定

wordpress-read_rate-variable

1.変数「scrollPoint」を設定する方法

  1. 左メニューの「変数」>「新規」の順でクリックします。 "「変数」
  2. 「名前のない変数」をクリックして名前を「scrollPoint」 に設定します。次に中央のアイコンをクリックします。
    名前を「scrollPoint」 に設定後、「中央のアイコン」をクリック

    名前を「scrollPoint」 に設定後、「中央のアイコン」をクリック

  3. 変数タイプの選択画面が開いたら、「データレイヤーの変数」を選択します。
    「データレイヤーの変数」を選択

    「データレイヤーの変数」を選択

  4. 変数の設定を行います。
    ・データレイヤーの変数名：scrollPoint
    ・データレイヤーのバージョン：バージョン1
    と設定し、「保存」ボタンをクリックします。
    変数の設定

    変数の設定

  5. 保存すると、ユーザー定義変数の項目に「scrollPoint」が作られたことが確認できます。
    wordpress-read_rate-trigger-variable-5

2つの目の変数、「scrollPointElms」を設定

wordpress-read_rate-trigger-variable-6

同じ要領で２つ目の変数を作成します。

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

2.「トリガー」を３つ設定（scrollPoint、scrollPointElms、DOM Ready）

wordpress-read_rate-trigger

トリガー「scrollPoint」を設定

  1. 左メニューの「トリガー」を選択し、「新規」ボタンをクリックします。 "左メニュー「トリガー」
  2.  トリガーの名前（scrollPoint）をつけ、中央をクリックします。
    wordpress-read_rate-trigger-1
  3. トリガーのタイプを選択が開いたら、「カスタムイベント」を選択します。 「カスタムイベント」を選択

  4. トリガーの設定を行います。
    ・イベント名：Scroll
    ・トリガーの発生場所：すべてのカスタム イベント
    を設定し「保存」ボタンをクリックします。

    トリガーの設定

    トリガーの設定

     

  5. 保存すると、トリガーの一覧に「scrollPoint」が作られたことが確認できます。

    wordpress-read_rate-trigger-scrollPoint-5

トリガー「scrollPointElms」を設定

同じ要領で２つ目のトリガー「scrollPointElms」を設定します。

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

トリガー「DOM Ready」を設定

同じ要領で3つ目のトリガー「DOM Ready」を設定します。

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

3.「タグ」を3つ設定（GA_scrollPoint、GA_scrollPointElms）

wordpress-read_rate-tag

3.1「タグ」設定（GA_scrollPoint）

計測用の「タグ」を作成します。

  1. 左サイドメニューの「タグ」をクリックし、「新規」ボタンをクリックします。
    associate-click-tag-manager-tag-1
  2. タグの名前「Amzonアソシエイト」をつけ、中央をクリックします。
    wordpress-read_rate-tag-GA_scrollPoint-1
  3. タグタイプのタイプを選択の中から「ユニバーサルアナリティクス」を選択します。
    associate-click-tag-manager-tag-3
  4. タグを設定します。

    トラッキングタイプイベント
    カテゴリ{{Page URL}}
    アクションscrollPoint
    ラベル{{scrollPoint}}
    このタグでオーバーライド設定を有効にするチェックを入れる
    トラッキングIDGoogleアナリティクスのトラッキングID
    （UA-xxxxxx-x）

    wordpress-read_rate-tag-GA_scrollPoint-4
    Google AnalyticsトラッキングIDは、Google Analyticsの管理画面 > 左下の「管理（歯車）」>対象サイトの「プロパティ設定」から確認できます。

  5. 「トリガー」の中央部分をクリックします。
    wordpress-read_rate-tag-GA_scrollPoint-5
  6. トリガーの選択から「scrollPoint」を選びます。
    wordpress-read_rate-tag-GA_scrollPoint-6
  7. 右上の「保存」ボタンをクリックします。
  8. 右上の「公開」ボタンをクリックします。
    「公開」ボタンをクリック

    「公開」ボタンをクリック

3.2「タグ」を設定（GA_scrollPointElms）

同じ要領でタグ「GA_scrollPointElms」を設定します。

  • 名前：GA_scrollPointElms
  • タグタイプ：ユニバーサルアナリティクス
  • トラッキングタイプ：イベント
  • カテゴリ：{{Page URL}}
  • アクション：scrollPointElms
  • ラベル：{{scrollPointElms}}
  • 値：空欄
  • 非インタラクションヒット：真
  • このタグでオーバーライド設定を有効にする：チェックを入れる
  • トラッキングID：自分のトラッキングID（UA-xxxxxx-x）
  • トリガー：scrollPointElms

3.3「タグ」を設定（scrollPoint）

同じ要領でタグ「scrollPoint」を設定します。

  • 名前：scrollPoint
  • タグタイプ：カスタムHTML
  • HTML：※下記をコピーして貼り付ける
  • トリガー：DOM Ready

HTMLソースコードは、プログラムのバージョン管理・共有サービス「GitHub」に公開されているものです。

scrollPoint · GitHub

<script>

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>

 

「変数」「トリガー」「タグ」を設定が完了したら「公開」

「変数」「トリガー」「タグ」を設定が完了したら、右上のボタンから「公開」します。

設定したタグのクリックをGoogle Analyticsの「リアルタイム」で動作確認する方法

設定したタグの動作を確認するには、Google Analyticsの「リアルタイム」を使います。

Googleアナリティクスの管理画面にログイン > 左メニュー「リアルタイム」>「イベント」>「イベント（直前の30分間）」を開くwordpress-read_rate-realtime

計測できてない場合に確認すること
計測できてない場合、「変数」「トリガー」「タグ」の設定に間違いないか確認しましょう。

 

使い方

Googleアナリティクスの「行動」>「イベント」>「概要」>「イベントアクション」を開きます。

Googleアナリティクスの反映にされていない場合は？
「変数」「トリガー」「タグ」設定後、Googleアナリティクスの反映には時間がかかる場合があります。 設定後24時間経過してから確認してみましょう。

wordpress-read_rate-use-1

scrollPoint

scrollPointでは、ページの何%まで読まれたか？割合がわかります。

scrollPointElms

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

関連記事

 

Googleアナリティクス 入門記事一覧