GA4＆GTMで「本当の読了率」を計測する方法【scrollでは不十分】
- ブログが最後まで読まれたのか知りたい
- GA4で読了率を計測したい。
そんなお悩みをお持ちの方向けの記事です。
ブログやブランドサイトを運営している場合、「ユーザーが記事を読んでくれたかどうか」は重要な指標です。
以下のように記事別に読了率を比較できれば、「どの記事から改善に着手するか」という優先順位づけにも役立ちます。
上のようなレポートを作るには、記事の「読了数」を取得する必要があります。GA4は、Webサイトの中で起きたことを「イベント」という単位で取得しているので、「ユーザーが読了した」というイベントを設定すれば良いということです。
「そもそもGA4のイベントの概念がよくわからない」という方向けには、以下の記事で詳しく説明していますので、あわせてご覧ください。
実はGA4には、Webページの90％地点までの到達を表す「scroll」というイベントがあり、これを「読了」とみなして使うことが可能です。
しかし、scrollイベントは「本当の読了数」とはいえません。実際のWebサイトやブログでは、読了地点が90％地点よりも上にあるという場合がほとんどだからです。
記事の下に著者情報や関連記事のウィジェット、コメントエリアなどを配置しているブログも多いのではないでしょうか。スマホ用のサイトではサイドバーが回り込むため、よりその傾向が強くなります。
筆者の運営するブログも、以下の画像のように本当の読了地点は記事の60％〜70％の位置にあります。
scrollイベントはほとんど発生しないというブログもあるでしょう。そうなると、実態とはかけ離れてしまい、指標としてはあまり参考になりません。
そこで、この記事ではGoogleタグマネージャー（GTM）を使い、「本当の読了率」を計測する方法をお伝えします。
仕組みを先にお伝えすると、GTMの「要素の表示」トリガーを応用し、記事の一番下のパーツが表示されたことを検知するというものです。
サイトによりHTMLの構造が違うため、この記事ではどのサイトでも通用するであろう「一番最後のh2見出しが表示されたら」という条件で計測します。
なお、ここで行う設定はGoogleタグマネージャーがインストールされている前提で説明します。導入がまだの方は、以下の記事を参考に初期設定を完了しておいてください。
この記事で書いている「読了率」は、「記事が最後まで表示した」というユーザー行動を便宜的に「読了」と定義しているだけに過ぎません。GA4やマーケティング用語としてそういった用語があるわけではありませんのでご注意ください。また、「記事を最後まで表示した」からといって、本当にユーザーが記事を最後まで読んだかどうかはわかりません。
GA4のデータを使ってブログやオウンドメディアを分析する方法について、実践的なオンライン講座をご用意しました。以下のページでクーポンを配布していますのでご利用ください。
GA4でブログやオウンドメディアの収益をグングン伸ばす
実際の成果データを使った実践的なアクセス解析・Webサイト分析・改善術について解説しています。
GA4とGTMで「本当の読了」を計測する方法
記事が最後まで読まれたかどうかを判定したい時には、GTMの「要素の表示」トリガーを応用します。
記事の下の方にある特定のHTML要素が表示されたかどうかを判定するということです。ここでは、記事の「まとめ（最後のh2見出し）」にあたる見出しが表示された場合に読了として判定するイベントを作成します。
変数の作成
最初に「まとめ」の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は、機能を保証するものではありません。プログラムの内容について不安な場合には、ChatGPTなどで確認し、必要に応じて修正してお使いください。
タグの作成
タグの設定は以下の通りに行います。
設定タグ
GA4の測定IDがわからない場合には、以下のページをご覧ください。
イベント名
| 設定内容 | 備考 |
|---|---|
| read | ここで入力した値がGA4にイベント名として表示されます。 今回は「read」としていますが、ご自身でわかりやすい名前をつけて問題ありません。 |
※イベント名に任意の名前をつけるときは、以下のルールを守る必要があります。
- 記号は「_（アンダーバー／アンダースコア）」のみ使用可能
- 先頭は文字のみ使用可能（数字や記号は使用不可）
※アナリティクスヘルプに「イベント名の先頭は英字にする必要があります」という記載がありますが、実際には日本語も使用可能です。
参考：[GA4] イベントの命名規則 – アナリティクスヘルプ
また、後で分析しやすい効果的なイベント名の付け方については、以下の記事にまとめてあります。
イベントパラメータ
| パラメータ名 | 値 | 備考 |
|---|---|---|
| read_count | 1 | 読了数を独立した指標として表示するための設定です。 後述するパートでGA4の「カスタム指標」として登録します。 |
※パラメータ名は任意の文字列で構いませんが、以下のルールを守る必要があります。
- 半角英数で記述
- 記号は「_（アンダーバー）」のみ使用可能
- 先頭は英字のみ使用可能
トリガーの作成
タグを動かすきっかけとなるトリガーは、「要素の表示」を使います。
「選択方法」はIDとし、要素IDにはSTEP1で作成した「get matome id」をセットします。
このトリガーが実行されるときの「get matome id」には、ページの最後のh2見出しのidが格納されています。つまり、「ページ内の最後のh2見出しが表示されたら」という条件でトリガーが動くということになります。
プレビュー＆公開
タグを設定したら、問題なく動作するかどうか必ずプレビューしましょう。
設定に問題がなければ、コンテナを公開します。
コンテナを公開しなければ、イベントは計測されないので注意しましょう。GTMのプレビューと公開については以下の記事でも解説していますので参考にしてください。
カスタム指標の登録
GA4の管理画面からカスタム指標を登録します。
カスタム指標を設定することで、まとめ見出しの表示回数（読了数）を「イベント数」から独立させて見ることができるようになります。ページビュー数など他の指標と掛け合わせて計算指標を作る際に利便性が高くなるので、ぜひ設定しておきましょう。
| 指標名 | イベントパラメータ | 測定単位 |
|---|---|---|
| read_count ※任意の名前で構いません | read_count ※GTMで作成したタグに記載した「パラメータ」と同じ値です。 | 標準 |
カスタム指標は理解するのが難しい概念ですので、GA4に不慣れな方は以下の記事も参考にしてください。
読了イベントをキーイベント（コンバージョン）として登録しておきたい場合には、GA4管理画面から「データの表示 ＞ キーイベント」と進み、「新しいキーイベント」ボタンから設定します。
キーイベントの詳しい設定方法については、以下の記事で解説していますので、あわせてご覧ください。
ただし、読了をキーイベントとして設定すべきかどうかはサイトの目的により異なります。上記の記事で、サイト別に設定すべきキーイベントについても解説しているので、ご自身のサイトに当てはまるかどうか確認することをおすすめします。
設定した読了数をレポートで確認する方法
設定した読了数のイベントは、以下の3種類の方法で確認できます。
- レポート
- 探索
- Looker Studio
レポートと探索は計算指標が出せませんので、「読了率」を算出するのは一手間かかります。
読了率を算出する場合には、Looker Studioで設定することをおすすめします。
それぞれのレポートの詳しい手順については書きませんので、操作に慣れていない方は以下の記事もあわせてご覧ください。
レポート
設定した読了数を、GA4のレポートでページ別に見てみましょう。
GA4管理画面から「レポート ＞ エンゲージメント ＞ ページとスクリーン」と進み、ページ別のレポートを表示します。
指標のイベント数のプルダウンで、今回設定した「まとめ表示」イベントに切り替えると、読了イベントのみに絞り込むことが可能です。
「表示回数（ページビュー）」と比較し、ページごとに読了率に違いがあるか確認してみましょう（GA4上で計算することはできません）。
ご自身のレポートに上記画像の項目が表示されない場合には、「ライブラリ」から表示させることが可能です。詳しい方法は以下の記事をご覧ください。
探索
探索で読了数を見る場合は、「自由形式」のテンプレートを使うのが便利です。
ディメンションに「ページパスとスクリーンクラス」、指標に「表示回数」と「読了数」を選択します。「読了数」は、手順のSTEP5で設定したカスタム指標です。
Looker Studio
読了率を算出する場合には、Looker Studioが便利です。
フィールドを新規作成し「読了数」を「表示回数」で割り、読了率を算出します。
以下の画像のように、ページごとの読了率をヒートマップ形式で比較し、改善すべきページを絞り込むことが可能です。
Looker Studioの基本操作とGA4レポートの作成方法については、以下の記事で網羅的に解説しています。
scrollイベントを代用する方法※正確な計測は不可
どうしてもGTMを使える環境にない場合には、Webページの90％地点までの到達を表す「scroll」イベントを代用できます。
冒頭で説明したように、記事終了後に関連記事やプロフィールなどを設置しているブログでは、実際の読了ポイントは60％〜70％地点とだいぶ上の方にあります。scrollイベントは参考値として使うにとどめましょう。
scrollイベントはデフォルト設定でオンになっている場合がほとんどですが、もしもイベント一覧に表示されない場合には、以下の手順で拡張計測機能をオンにしておきましょう。
データストリームを開く
GA4管理画面の「管理 ＞ データストリーム」から対象のデータストリームを開きます。
拡張計測機能の設定メニューを開く
データストリームを開いたら、「拡張計測機能」の歯車アイコンをクリックします。
スクロールイベントをオンにする
開いたメニューの中の「スクロール数」のチェックボックスをオンにして保存します。
scrollをキーイベント（コンバージョン）として登録しておきたい場合の手順は、他のイベントと同様です。以下の記事を参考に設定してみてください。
読了率を上げる方法
言うまでもないことではありますが、Webサイトのコンテンツの目的は「ユーザーの課題を解決すること」です。これはどんなサイトでも同じことです。
読了率は、「ユーザーの課題を解決できているかどうか」を測る上でのヒントの1つに過ぎません。Webサイトでユーザーの課題を解決し、その結果として自社のビジネス成果を上げるためには、良質なコンテンツが必要です。
ユーザーの課題解決を助ける「良質なコンテンツ」を作るには、体験談や独自データなどの「一次情報」が必須です。特に、AIライティングが一般化してきた現代においては、属人性の高いコンテンツを作ることが重要です。
それはAIを使ってコンテンツを作る場合にも同じです。良いインプットがあるからからこそ、良いアウトプットが生まれます。
では、どうやって一次情報を集めれば良いのか。何も新聞記者のようにインタビューをする必要はありません。簡単なところでは、Googleアナリティクスで取得したデータも一次情報になり得ます。この記事の冒頭でも、私自身がGA4で取得したデータを掲載しています。これが、まさに一次情報です。
一次情報の取得方法について、私が実践している内容を以下の記事にまとめましたので、こちらもあわせて読んでみてください。
よくある質問（FAQ）
読了イベントについて、クライアントや読者からよくいただく質問をまとめました。
なぜ「scroll」イベントでは不十分なのですか？
GA4の標準機能である「scroll」イベントは、ページの90%地点に到達したことを計測します。しかし、多くのブログやWebサイトでは、記事の本文が90%地点よりも手前に終わることが一般的です。記事下に著者情報や関連記事などが配置されていることが多いため、ユーザーは記事を最後まで読んでも90%地点までスクロールしない場合が多くなります。そのため、「scroll」イベントでは「本当の読了数」を期待通りに計測することができません。
記事の読了数を計測するメリットは何ですか？
記事別の読了数を計測し、読了率として比較することで、どの記事がユーザーに最後まで読まれているかを把握できます。パフォーマンスの低い記事を特定し、改善すべき記事の優先順位を効率的に決めることが可能になります。
GTMを使わずに読了率を計測する方法はありますか？
GTMを使わない場合は、GA4の「拡張計測機能」で「scroll」イベントを有効にすることで、スクロール数の計測が可能です。ただし、前述の通り、この方法は読了数の実態からはかけ離れた数値になることが多くなります。
読了イベントはコンバージョンとして設定すべきですか？
読了イベントをキーイベント（コンバージョン）として設定するかどうかは、サイトの目的に応じて判断すべきです。記事を最後まで読んでもらうこと自体がサイトのゴールとなる場合は有効ですが、そうでない場合は他の主要な目標（例：商品購入、問い合わせなど）をコンバージョンとすることを推奨します。
計測した読了数は、GA4のどこで確認できますか？
GA4のレポートで読了数を確認する方法は、主に以下の3つです。
- 標準レポートの場合
-
「エンゲージメント」の「ページとスクリーン」から、ページ別にイベント数を絞り込んで確認できます。
- 探索の場合
-
「自由形式」のテンプレートを使い、ディメンションと指標をカスタマイズして読了数とページビュー数を比較できます。
- Looker Studioの場合
-
指標とディメンションを見たい形に組み合わせて確認できます。読了数をページビュー数で割って「読了率」を直接算出し、視覚的なレポートで分析することも可能なので、この方法が最もおすすめです。
まとめ
GA4で「本当の読了率」を計測する方法について解説しました。
読了率を計測しページ単位で比較することで、どの記事が読まれているのか（いないのか）を把握することが可能です。「記事が読まれていない要因は何か」など、分析を次のフェーズに進めることができるので、読み物系のWebサイトやブログでは設定をおすすめします。
正しい読了数（に近い値）を計測するには、Googleタグマネージャーの「要素の表示」トリガーを使います。Webサイトの記事の一番下にある要素（今回は最後のh2要素）が表示されたことを検知するよう設定しましょう。
設定した値は、GA4の各種レポートで確認することが可能です。中でもLooker Studioは計算指標が作れるため、「読了率」を分かりやすく表現可能です。
なお繰り返しになりますが、記事が最後まで表示されたからといって、ユーザーが最後まで読んだとは限りません。記事の文字数によっても「読了」のされやすさは異なりますので、その他の指標とも併用して総合的に判断する必要があるでしょう。
今回使った要素の表示イベントは、他にもモーダルウィンドウやバナーの表示をイベントとして計測することができます。他にも設定し、分析の解像度を上げてみてはいかがでしょうか。以下の記事も参考にされてください。
本記事では単純な記事下部までの到達を「読了」と見なす方法を解説しましたが、より詳しく「ユーザーが記事をしっかり読んだかどうか」という精読イベントも工夫次第で設定可能です。以下の講座で詳しく解説していますので、計測の高度化を目指したい方はぜひご検討ください。
GTMの「カスタムJavaScript変数」でGA4データ計測の高度化を実現する
GA4で「より詳細なデータ計測がしたい」という方に向けて、GTMのカスタムJavaScript変数の活用方法を紹介します。
YouTubeチャンネル
本サイトの内容を動画でも発信中です。文章で見てもいまいちよくわからないという方はこちらもご覧ください。
