GTMで読了率のタグ設定をする方法を解説

ウェブサイトのページの読了率を測定することで、ページの改善に役立てることができます。今回はGTMでGA4イベントタグ設定を行い、GA4で読了率を計測する方法を解説します。GA4、GTM2つの専門的なツールを用いますが、初心者の方でもわかりやすく解説をしていきます。

Index

この記事で分かること

GA4の読了率(読了数)とは

GA4の読了数(読了率)とは、ページが読了された回数(またはその割合)を計測することができる指標です。

具体的には、GTMのイベントタグ設定を用いて自身でページの読了地点を設定することで、GA4でその要素の表示がどのぐらい発生したのかを計測を開始することができます。

この指標を測定することにより、個々のページの読了を正確に計測することができます。

またこの指標を応用することもできます。例えばページ内の重要な要素を「読了地点」として設定することで、その要素がどのぐらい表示されているかなどの考察ができます。

この記事では、実際にGTMのイベントタグ設定を行いGA4で読了数(読了率)の計測をする方法を解説します。

それでは、実際にGTMのGA4イベントタグを設定してGA4で読了数(読了率)の計測をする方法を解説します。

今回は特定のページAの読了率について、GTMで以下の赤枠で囲われているhタグを読了地点として設定します。

GTMに関して、「タグ」など基本的な用語解説や実装方法はこちらを参考にしてください。：

また、GA4とGTMがあらかじめ連携されていることを前提としています。まだ連携がお済ではない方はこちらのページを参照してください。：

GTM側で設定を開始する前に、事前にGA4の測定IDを用意しておく必要があります。

Step1:GA4にアクセスし、左のサイドバーから「管理」を選択。

Step2:「データストリーム」を選択し、対象のウェブデータストリームを選択。

Step3:表示される「測定ID」をコピー。

※今回はGA4のデモアカウントを使用しています。

Step1:GTMにログインし、ワークスペースから「トリガー」を選択し、右上にある設定ボタンをクリックする

Step2:トリガーの設定から「要素の表示」を選択

Step3:トリガーの設定をする

設定項目

①トリガー名:ユーザーで設定
②選択方法:「CSSセレクタ」を選択する
③要素セレクタ:計測したい要素のCSSセレクタを記入する(CSSセレクタを調べる方法は以下を参照してください)。
④このトリガーを起動するタイミング:「1ページにつき1度」を選択(ページ内の複数の要素が、はじめて指定したCSSに一致した際にトリガーされる)
⑤視認の最小割合:選択した要素の何割が表示された際にトリガーするのかを設定する。
画面上での最小表示時間を設定:選択した要素が画面上でどれほどの時間表示された場合にトリガーするのかを設定する。(省略可)
DOMの変化をモニタリング:DOM(Documet Object Model、HTMLやJavaScriptからWEBページを動かすためのしくみ)が変化した際に表示される要素を計測する。(省略可)
⑥このトリガーの発生場所:トリガーが発火する条件を設定