更新日：1月31日
こんにちは。CCIの木村です。
今回はコンテンツがユーザーに読まれているか判別するために役立つ、
GA4で特定のポイントまで閲覧されたらイベントを計測する方法を解説致します。
■読了を判別するメリット
読了数(率)を計測することは、「そのコンテンツに関心のあるユーザー」を判別できるようになるというメリットがあります。
デフォルトの計測のみであれば「そのページを閲覧した」という情報までしか得られず、分析においても何か来訪ユーザーに訴求を行うにしても関心にばらつきのあるユーザー群に対して行うことになります。
こういった読了のようなイベントを計測することでたとえ単一のページであってもユーザーの中でも階層を分けて分析したり、訴求を行うことができるようになりひと工夫でGA4活用の幅が広がります。
■まずは「読了」とするポイントを明確にする
GTMでの設定に入る前に、どこまで読んだら読了とするかを決めましょう。
読了ポイントは基本的に以下の2パターンでの設定するケースが多いです。
①ページの○○％まで閲覧した
②ページの特定のポイントまで閲覧した
①は単一のページやある程度構成が固まっているページ群で計測する際に有効です。
一方で、例えばメディアサイトで記事コンテンツが中心の場合はコンテンツのボリュームによって読了となるポイントが記事ごとにずれる可能性が高いため、あまり①の方法は適していません。
②は上記に上げたメディアサイトなどのパターンで、コンテンツのボリュームに左右されずに特定のポイントを指定したいときに便利です。記事ページなどで記事本文の後に著者欄や他のおすすめ記事など固定の要素がある場合はこちらの方法が適しています。
■GTMでの設定手順①：トリガーを作成する
実際にどのように設定を行っていくか解説します。
まずはトリガーを作成するのですが、ここが読了の計測においては最も肝になる部分です。
先に決めた読了ポイントが読み込まれたときに正しく計測ができるようにトリガーを確実に設定しましょう。
今回は本サイトのコラムページにおける、いわゆる記事タグの部分を読み込んだ際に読了とする場合を紹介します。
トリガーの条件は色々な指定の仕方がありますが、今回はCSSセレクタを使って、記事タグ部分が画面に表示されたら読了とする方法(前述の②の方法)を紹介します。
まずトリガーの種類は「要素の表示」を指定します。
このトリガーは条件に一致する要素が画面に表示された際に反応するトリガーです。
では、トリガーの条件を指定していきます。
まずは選択方法を「CSSセレクタ」に設定し、発火させたいポイントのCSSセレクタを入力します。
読了ポイントのCSSセレクタを確認するには、条件に使用したい箇所を右クリックして「検証」を選択します。
※Google Chromeの場合
するとChromeのデベロッパーツールが開かれ、選択した箇所の要素部分の記述が青く表示されるので、デベロッパーツールの該当の記述部分を右クリックして「コピー」の中の「selectorをコピー」を選択するとCSSセレクタをそのままコピーできます。
また、念のため他のページ群で発火しないよう、条件に「Page Pathに/post/を含むページ」という条件を付け加えます。
これでトリガーの設定は完了です。
■GTMでの設定手順②：GA4イベントタグを設定する
トリガーの作成が完了したら、GA4イベントタグを作成します。
こちらは簡単で、GA4イベントタグを作成し、イベント名は「finish_reading」など分かりやすい名称をつけましょう。
問題はイベントパラメータですが、どの記事が読了されたかを判別するために最低限「Page Path」あるいは「Page Title」などページが判別できる要素は取得するようにしましょう。
それ以外のパラメータについては分析に使用できそうな要素を取得するなど、後々分析に使用することを想定した設計にしましょう。
あとはタグとトリガーを紐づけてプレビューモードで発火確認を行い、問題がなければバージョンを公開して計測します。
いかがでしたでしょうか。
読了の計測はもちろんGA4計測の一つのテクニックとして活用できますが、
他にもトリガーを別のタグに応用して発火させるなど応用の効くテクニックですので覚えておくと1つ上のGA4活用ができるようになります。
CCIでは本コラムでご紹介したようなGA4の計測カスタマイズや導入の支援を行っています。ご興味のある方は下記のサービス概要や資料もぜひご覧ください。
.png){kind=link}
.png){kind=link}
.png){kind=link}
.png){kind=link}
.png){kind=link}
.png){kind=link}