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設定タグ | Googleアナリティクスの初期設定で行ったGA4設定タグ（タグの名前はそれぞれ異なります）を選択します。 GA4設定タグがない場合には以下を参照し設定してください。 Googleアナリティクスの導入方法 – Webサイトへのタグ設置 |
イベント名
| 設定内容 | 備考 |
|---|---|
| read | ここで入力した値がGA4にイベント名として表示されます。 今回は「read」としていますが、ご自身でわかりやすい名前をつけて問題ありません。 |
※イベント名に任意の名前をつけるときは、以下のルールを守る必要があります。
- 記号は「_（アンダーバー／アンダースコア）」のみ使用可能
- 先頭は文字のみ使用可能（数字や記号は使用不可）
※アナリティクスヘルプに「イベント名の先頭は英字にする必要があります」という記載がありますが、実際には日本語も使用可能です。
イベントパラメータ
| パラメータ名 | 値 | 備考 |
|---|---|---|
| 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管理画面から「管理 ＞ コンバージョン」と進み、「新しいコンバージョンイベント」ボタンから設定します。
入力するイベント名はGTMで設定したイベント名です。1文字でも違うと計測されませんので、コピー＆ペーストで正確に入力しましょう。
設定した読了数をレポートで確認する方法
設定した読了数のイベントは、以下の3種類の方法で確認できます。
- レポート
- 探索
- Looker Studio
レポートと探索は計算指標が出せませんので、「読了率」を算出するのは一手間かかります。
読了率を算出する場合には、Looker Studioで設定することをおすすめします。
それぞれのレポートの詳しい手順については書きませんので、操作に慣れていない方は以下の記事もあわせてご覧ください。
レポート
設定した読了数を、GA4のレポートでページ別に見てみましょう。
GA4管理画面から「レポート ＞ エンゲージメント ＞ ページとスクリーン」と進み、ページ別のレポートを表示します。
指標のイベント数のプルダウンで、今回設定した「まとめ表示」イベントに切り替えると、読了イベントのみに絞り込むことが可能です。
「表示回数（ページビュー）」と比較し、ページごとに読了率に違いがあるか確認してみましょう（GA4上で計算することはできません）。
探索
探索で読了数を見る場合は、「自由形式」のテンプレートを使うのが便利です。
ディメンションに「ページパスとスクリーンクラス」、指標に「表示回数」と「読了数」を選択します。「読了数」は、手順のSTEP5で設定したカスタム指標です。
Looker Studio
読了率を算出する場合には、Looker Studioが便利です。
フィールドを新規作成し「読了数」を「表示回数」で割り、読了率を算出します。
以下の画像のように、ページごとの読了率をヒートマップ形式で比較し、改善すべきページを絞り込むことが可能です。
scrollイベントを代用する方法※正確な計測は不可
どうしてもGTMを使える環境にない場合には、Webページの90％地点までの到達を表す「scroll」イベントを代用できます。
冒頭で説明したように、記事終了後に関連記事やプロフィールなどを設置しているブログでは、実際の読了ポイントは60％〜70％地点とだいぶ上の方にあります。scrollイベントは参考値として使うにとどめましょう。
scrollイベントはデフォルト設定でオンになっている場合がほとんどですが、もしもイベント一覧に表示されない場合には、以下の手順で拡張計測機能をオンにしておきましょう。
データストリームを開く
GA4管理画面の「管理 ＞ データストリーム」から対象のデータストリームを開きます。
拡張計測機能の設定メニューを開く
データストリームを開いたら、「拡張計測機能」の歯車アイコンをクリックします。
スクロールイベントをオンにする
開いたメニューの中の「スクロール数」のチェックボックスをオンにして保存します。
コンバージョンとして登録しておきたい場合の手順は、他のイベントと同様です。以下のようにイベント一覧のページから「コンバージョンとしてマークをつける」のチェックをオンにしておきましょう。
まとめ
GA4で「本当の読了率」を計測する方法について解説しました。
読了率を計測しページ単位で比較することで、どの記事が読まれているのか（いないのか）を把握することが可能です。「記事が読まれていない要因は何か」など、分析を次のフェーズに進めることができるので、読み物系のWebサイトやブログでは設定をおすすめします。
正しい読了数（に近い値）を計測するには、Googleタグマネージャーの「要素の表示」トリガーを使います。Webサイトの記事の一番下にある要素（今回は最後のh2要素）が表示されたことを検知するよう設定しましょう。
設定した値は、GA4の各種レポートで確認することが可能です。中でもLooker Studioは計算指標が作れるため、「読了率」を分かりやすく表現可能です。
なお繰り返しになりますが、記事が最後まで表示されたからといって、ユーザーが最後まで読んだとは限りません。記事の文字数によっても「読了」のされやすさは異なりますので、その他の指標とも併用して総合的に判断する必要があるでしょう。
今回使った要素の表示イベントは、他にもモーダルウィンドウやバナーの表示をイベントとして計測することができます。他にも設定し、分析の解像度を上げてみてはいかがでしょうか。以下の記事も参考にされてください。
Webサイトのパフォーマンスを上げるためには、他にもさまざまなイベント設定が必要です。GA4やGoogleタグマネージャーの使い方について体系的に学べるオンライン講座もご用意しています。以下のページからご利用ください。
GTM＆GA4を学べるオンライン講座
GoogleタグマネージャーでGA4のカスタムイベントを設定する方法や、アクセス解析の基本が学べる講座を用意しています。
GA4を「ざっくりと」理解したい方へ
Googleアナリティクスを活用するための基礎知識をまとめたebookをご用意しました。どなたでも無料でダウンロードしていただけますので、以下のボタンからご利用ください。
※新しいタブでフォームが開きます。
YouTubeチャンネル
本サイトの内容を動画でも発信中です。文章で見てもいまいちよくわからないという方はこちらもご覧ください。
関連記事
-
GA4のイベントって何だ？｜Webサイト改善に必須の超重要概念を理解しよう -
GA4でバナークリックを計測する方法｜オウンドメディアのCTA評価に -
GA4でサンクスページ到達をコンバージョン（キーイベント）設定する2つの方法 -
GA4で目次クリックを計測する方法｜エンゲージメント率に影響する隠れた重要指標 -
GA4のコンバージョン（キーイベント）の登録方法と設定すべきイベント3選【GTM＆GA4】 -
GA4のカスタムディメンション＆カスタム指標でユーザー行動を見える化しよう
-
Webサイトのボトルネックを見つけるマイクロコンバージョンとは【考え方＆設定方法】 -
GTMとGA4でモーダルウィンドウの表示を計測する方法【コンテンツの最適化】
