GA4&GTMで「本当の読了率」を計測する方法【scrollでは不十分】

基礎を身につければ、GA4とGTMは怖くなくなります。→6時間のオンライン講座を受ける

  • ブログが最後まで読まれたのか知りたい
  • GA4で読了率を計測したい。

そんなお悩みをお持ちの方向けの記事です。

ブログやブランドサイトを運営している場合、「ユーザーが記事を読んでくれたかどうか」は重要な指標です。

以下のように記事別に読了率を比較できれば、「どの記事から改善に着手するか」という優先順位づけにも役立ちます。

上のようなレポートを作るには、記事の「読了数」を取得する必要があります。GA4は、Webサイトの中で起きたことを「イベント」という単位で取得しているので、「ユーザーが読了した」というイベントを設定すれば良いということです。

GA4のイベントについて

「そもそもGA4のイベントの概念がよくわからない」という方向けには、以下の記事で詳しく説明していますので、あわせてご覧ください。

実はGA4には、Webページの90%地点までの到達を表す「scroll」というイベントがあり、これを「読了」とみなして使うことが可能です。

しかし、scrollイベントは「本当の読了数」とはいえません。実際のWebサイトやブログでは、読了地点が90%地点よりも上にあるという場合がほとんどだからです。

記事の下に著者情報や関連記事のウィジェット、コメントエリアなどを配置しているブログも多いのではないでしょうか。スマホ用のサイトではサイドバーが回り込むため、よりその傾向が強くなります。

筆者の運営するブログも、以下の画像のように本当の読了地点は記事の60%〜70%の位置にあります。

scrollイベントはほとんど発生しないというブログもあるでしょう。そうなると、実態とはかけ離れてしまい、指標としてはあまり参考になりません。

そこで、この記事ではGoogleタグマネージャー(GTM)を使い、「本当の読了率」を計測する方法をお伝えします。

仕組みを先にお伝えすると、GTMの「要素の表示」トリガーを応用し、記事の一番下のパーツが表示されたことを検知するというものです。

サイトによりHTMLの構造が違うため、この記事ではどのサイトでも通用するであろう「一番最後のh2見出しが表示されたら」という条件で計測します。

なお、ここで行う設定はGoogleタグマネージャーがインストールされている前提で説明します。導入がまだの方は、以下の記事を参考に初期設定を完了しておいてください。

「読了率」について

この記事で書いている「読了率」は、「記事が最後まで表示した」というユーザー行動を便宜的に「読了」と定義しているだけに過ぎません。GA4やマーケティング用語としてそういった用語があるわけではありませんのでご注意ください。また、「記事を最後まで表示した」からといって、本当にユーザーが記事を最後まで読んだかどうかはわかりません。

GA4を「ざっくりと」理解したい方へ

Googleアナリティクスを活用するための基礎知識をまとめたebookをご用意しました。どなたでも無料でダウンロードしていただけますので、以下のボタンからご利用ください。

※新しいタブでフォームが開きます。

読みたい場所にジャンプ

GA4とGTMで「本当の読了」を計測する方法

記事が最後まで読まれたかどうかを判定したい時には、GTMの「要素の表示」トリガーを応用します。

記事の下の方にある特定のHTML要素が表示されたかどうかを判定するということです。ここでは、記事の「まとめ(最後のh2見出し)」にあたる見出しが表示された場合に読了として判定するイベントを作成します。

WordPressで作成されたWebサイトを前提に書きますが、その他の方法で作成したサイトの場合も、h2要素にidが振られていれば応用可能です。

STEP

変数の作成

最初に「まとめ」のh2要素からidを取得する変数を作成します。変数とは、ページなどから取得した値を一時的に格納しておく箱のことです。

WordPressでは、h2やh3などの見出しの要素に自動でidが付与されます。ただ、見出しの数は記事によって異なりますので、記事の最後のh2見出しのidも記事によって変わります。そこで、ここではJavaScript変数を使って最後の見出しのidを取得する変数を作成します。

GTMサイドメニューの「変数」を選択し、「ユーザー定義変数」の「新規」ボタンを押します。

変数のタイプは「カスタムJavaScript」を選択します。

「カスタムJavaScript」の入力エリアに、以下を記入します。

function get_matome_id() {
  var matome = document.querySelector('h2:last-of-type');
  
  if (!matome) {
    return null;
  }

  var id = matome.getAttribute('id');
  if (!id) {
    return null;
  }
  
  return id;
}

上記は、ページ内の最後のh2見出しを探し、idが付与されていればその内容を取得するという動きをするJavaScriptです。「要素の表示」トリガーを作る際に、ここで取得したidを使います。

紹介しているカスタムJavaScriptについて

記事内で紹介しているJavaScriptは、機能を保証するものではありません。プログラムの内容について不安な場合には、ChatGPTなどで確認し、必要に応じて修正してお使いください。

STEP

タグの作成

タグの設定は以下の通りに行います。

設定タグ

タグ備考
GA4設定タグGoogleアナリティクスの初期設定で行ったGA4設定タグ(タグの名前はそれぞれ異なります)を選択します。
GA4設定タグがない場合には以下を参照し設定してください。
Googleアナリティクスの導入方法 – Webサイトへのタグ設置

イベント名

設定内容備考
readここで入力した値がGA4にイベント名として表示されます。
今回は「read」としていますが、ご自身でわかりやすい名前をつけて問題ありません。
イベント名について

※イベント名に任意の名前をつけるときは、以下のルールを守る必要があります。

  • 記号は「_(アンダーバー/アンダースコア)」のみ使用可能
  • 先頭は文字のみ使用可能(数字や記号は使用不可)
    ※アナリティクスヘルプに「イベント名の先頭は英字にする必要があります」という記載がありますが、実際には日本語も使用可能です。

参考:[GA4] イベントの命名規則 – アナリティクスヘルプ

イベントパラメータ

スクロールできます
パラメータ名備考
read_count1読了数を独立した指標として表示するための設定です。
後述するパートでGA4の「カスタム指標」として登録します。
パラメータ名について

※パラメータ名は任意の文字列で構いませんが、以下のルールを守る必要があります。

  • 半角英数で記述
  • 記号は「_(アンダーバー)」のみ使用可能
  • 先頭は英字のみ使用可能
STEP

トリガーの作成

タグを動かすきっかけとなるトリガーは、「要素の表示」を使います。

「選択方法」はIDとし、要素IDにはSTEP1で作成した「get matome id」をセットします。

このトリガーが実行されるときの「get matome id」には、ページの最後のh2見出しのidが格納されています。つまり、「ページ内の最後のh2見出しが表示されたら」という条件でトリガーが動くということになります。

STEP

プレビュー&公開

タグを設定したら、問題なく動作するかどうか必ずプレビューしましょう。

設定に問題がなければ、コンテナを公開します。

コンテナを公開しなければ、イベントは計測されないので注意しましょう。GTMのプレビューと公開については以下の記事でも解説していますので参考にしてください。

STEP

カスタム指標の登録

GA4の管理画面からカスタム指標を登録します。

カスタム指標を設定することで、まとめ見出しの表示回数(読了数)を「イベント数」から独立させて見ることができるようになります。ページビュー数など他の指標と掛け合わせて計算指標を作る際に利便性が高くなるので、ぜひ設定しておきましょう。

スクロールできます
指標名イベントパラメータ測定単位
read_count
※任意の名前で構いません
read_count
※GTMで作成したタグに記載した「パラメータ」と同じ値です。
標準

カスタム指標は理解するのが難しい概念ですので、GA4に不慣れな方は以下の記事も参考にしてください。

読了イベントをコンバージョンとして登録する場合

読了イベントをコンバージョンとして登録しておきたい場合には、GA4管理画面から「管理 > コンバージョン」と進み、「新しいコンバージョンイベント」ボタンから設定します。

入力するイベント名はGTMで設定したイベント名です。1文字でも違うと計測されませんので、コピー&ペーストで正確に入力しましょう。

設定した読了数をレポートで確認する方法

設定した読了数のイベントは、以下の3種類の方法で確認できます。

  • レポート
  • 探索
  • Looker Studio

レポートと探索は計算指標が出せませんので、「読了率」を算出するのは一手間かかります。

読了率を算出する場合には、Looker Studioで設定することをおすすめします。

それぞれのレポートの詳しい手順については書きませんので、操作に慣れていない方は以下の記事もあわせてご覧ください。

レポート

設定した読了数を、GA4のレポートでページ別に見てみましょう。

GA4管理画面から「レポート > エンゲージメント > ページとスクリーン」と進み、ページ別のレポートを表示します。

指標のイベント数のプルダウンで、今回設定した「まとめ表示」イベントに切り替えると、読了イベントのみに絞り込むことが可能です。

「表示回数(ページビュー)」と比較し、ページごとに読了率に違いがあるか確認してみましょう(GA4上で計算することはできません)。

探索

探索で読了数を見る場合は、「自由形式」のテンプレートを使うのが便利です。

ディメンションに「ページパスとスクリーンクラス」、指標に「表示回数」「読了数」を選択します。「読了数」は、手順のSTEP5で設定したカスタム指標です。

Looker Studio

読了率を算出する場合には、Looker Studioが便利です。

フィールドを新規作成し「読了数」「表示回数」で割り、読了率を算出します。

以下の画像のように、ページごとの読了率をヒートマップ形式で比較し、改善すべきページを絞り込むことが可能です。

scrollイベントを代用する方法※正確な計測は不可

どうしてもGTMを使える環境にない場合には、Webページの90%地点までの到達を表す「scroll」イベントを代用できます。

冒頭で説明したように、記事終了後に関連記事やプロフィールなどを設置しているブログでは、実際の読了ポイントは60%〜70%地点とだいぶ上の方にあります。scrollイベントは参考値として使うにとどめましょう。

scrollイベントはデフォルト設定でオンになっている場合がほとんどですが、もしもイベント一覧に表示されない場合には、以下の手順で拡張計測機能をオンにしておきましょう。

STEP

データストリームを開く

GA4管理画面の「管理 > データストリーム」から対象のデータストリームを開きます。

STEP

拡張計測機能の設定メニューを開く

データストリームを開いたら、「拡張計測機能」の歯車アイコンをクリックします。

STEP

スクロールイベントをオンにする

開いたメニューの中の「スクロール数」のチェックボックスをオンにして保存します。

コンバージョンとして登録しておきたい場合の手順は、他のイベントと同様です。以下のようにイベント一覧のページから「コンバージョンとしてマークをつける」のチェックをオンにしておきましょう。

まとめ

GA4で「本当の読了率」を計測する方法について解説しました。

読了率を計測しページ単位で比較することで、どの記事が読まれているのか(いないのか)を把握することが可能です。「記事が読まれていない要因は何か」など、分析を次のフェーズに進めることができるので、読み物系のWebサイトやブログでは設定をおすすめします。

正しい読了数(に近い値)を計測するには、Googleタグマネージャーの「要素の表示」トリガーを使います。Webサイトの記事の一番下にある要素(今回は最後のh2要素)が表示されたことを検知するよう設定しましょう。

設定した値は、GA4の各種レポートで確認することが可能です。中でもLooker Studioは計算指標が作れるため、「読了率」を分かりやすく表現可能です。

なお繰り返しになりますが、記事が最後まで表示されたからといって、ユーザーが最後まで読んだとは限りません。記事の文字数によっても「読了」のされやすさは異なりますので、その他の指標とも併用して総合的に判断する必要があるでしょう。

今回使った要素の表示イベントは、他にもモーダルウィンドウやバナーの表示をイベントとして計測することができます。他にも設定し、分析の解像度を上げてみてはいかがでしょうか。以下の記事も参考にされてください。

GA4を「ざっくりと」理解したい方へ

Googleアナリティクスを活用するための基礎知識をまとめたebookをご用意しました。どなたでも無料でダウンロードしていただけますので、以下のボタンからご利用ください。

※新しいタブでフォームが開きます。

屋嘉比 馨
ボーダーヘイズ・ジャパン代表
ウェブ解析士協会所属・ウェブ解析士。
ラジオ局、広告代理店などに勤務ののち、大手SIerのWebマーケティング担当に。
2022年に独立し、ボーダーヘイズ・ジャパンを設立。
これまで100サイト以上の改善・計測環境構築に貢献。

YouTubeチャンネル

本サイトの内容を動画でも発信中です。文章で見てもいまいちよくわからないという方はこちらもご覧ください。

ブログの内容と若干異なる場合もございます。

読みたい場所にジャンプ