「読了率」とは、そのページの最後まで読んでもらうことができた確率のことです。
この記事では、Googleタグマネージャを利用して、読了とする条件に合致した場合にアナリティクスのイベントにページパスとページタイトル、そして、GTMが読み込まれてから読了するまでの経過時間を記録し、アナリティクスのカスタムレポートで読了率を表示させるまでの方法を記載しています。
大まかなトラッキングの流れは、
- 読了とする任意の場所に到達した時点でトリガー発火
- ページパス・ページタイトル・読了までの経過時間をアナリティクスのイベントに記録
- イベントに記録されたデータをアナリティクスのカスタムレポートで表示する
となります。
読了とする任意の場所とは?
「読了とする任意の場所」は
- ブログの記事本文エリアの下部に設置しているSNSボタンエリアが表示されたら
- ページ全体のフッターエリアが表示されたら
といったように、サイトの構成にあわせて何を「読了」とするのかを例えばclass属性値だったり、id属性値などを使って柔軟に指定することができます。
※読了要素の場合は、1ページに1箇所となるのでID属性が好ましいです。
大まかな作業の流れは
- タグマネージャに変数を設定(3つ)
- タグマネージャに読了とするトリガーを設定(1つ)
- タグマネージャにタグを設定(1つ)
- プレビューでチェック
- アナリティクスの計算指標で読了率と読了経過時間を設定する
- アナリティクスのカスタムレポートでページビュー、合計イベント数、読了率、読了経過時間を表示する
アナリティクスのイベントに記録する際、「率」としての記録はされずイベントの「回数」として記録されます。
そのページの全体ページビューと、読了率として計測されたイベント回数を計算して初めて「読了率」が算出されます。
これをアナリティクスの計算指標を利用して「読了率」を表示させるところまでの手順です。
「読了率」と「スクロール率」どっちを使う?違いは?
Googleタグマネージャを利用した計測で今回の「読了率」の他に「スクロール率」の取得もよく利用され、混同されがちです。
この読了率とスクロール率の違いですが、
- 読了率
- ページ内の任意の場所を読了時点として、そこに到達した際にGTMを通してGoogleアナリティクスのイベントトラッキングを行います。
読了率データの利用目的にもよりますが、基本的にそのページの読了とする箇所まで読んでもらえた回数を分析に利用するため、1ページビューにつき1回のみ読了となった場合に記録する形に設定するのが一般的です。
ユーザーがページを閲覧し、読了時点に到達した際にトラッキングが実行され、ユーザーがページの上部にスクロールで移動し、また読了箇所まで戻ったとしても、カウントは1回のみになります。(ページを再読み込みした場合はページビューと同じく、読了時点まで到達した場合は読了としてカウントされます。)
読了箇所をピンポイントで指定し、トラッキングを行います。 - スクロール率
- 1ページの長さを100%として、0%,10%,30%,50%,100%といったように、任意に指定した割合に到達した際にGTMを通してGoogleアナリティクスのイベントトラッキングを行います。
任意の割合を複数指定可能ですので、1ページにつき複数のイベントが記録させるのが一般的です。
ページごとにページの長さは違うので、記録された数値のみではコンテンツのピンポイントな箇所まではわかりません。
「読了率」と「スクロール率」の使い方はそれぞれですが、わたしは、各コンテンツそれぞれの改善を目的とした分析時には、「読了率」をまずチェックし、読了率が極端に低いページについて「スクロール率」をチェックしています。
スクロール率についてはコンテンツのピンポイントな箇所が数値ではわかりにくいので、別途ヒートマップツールで具体的な箇所を見て改善点を探っています。
読了率はピンポイントな要素を読了時点とするので、レスポンシブなサイトでも読了の地点が変わりませんので管理が楽です。
スクロール率の場合は、同じレスポンシブページでは端末の幅によってページの長さが極端に変わるため、普段はあまり使っていません。
このページでは「ページスクロール率」ではなく「読了率」をGoogleタグマネージャからGoogleアナリティクスでイベントトラッキングする設定方法を図解していきます。
前置きが長くなりましたがここから設定に入ります。
設定前の確認
下記の前提を元に進めています。
- Googleタグマネージャのアカウント設定などが一通り完了している
- Googleタグマネージャからアナリティクスのページビューの計測設定がされている
まだ上記ができていない場合は、下記記事をご参考いただき手順を進めてください。
読了率と読了経過時間計測のために必要な4つの変数をGoogleタグマネージャーに設定する
今回のゴールである、読了率と読了までの経過時間をアナリティクスでイベントトラッキングするには4つの変数が必要です。
- GoogleアナリティクスのトラッキングID用の変数(必須ではない)
- Googleタグマネージャのワンタグに設定されているデータレイヤー変数「gtm.start」を取得する変数
- gtm.startがセットされた変数を使って経過時間を算出するカスタムJavaScript変数
- ページのタイトルを取得するカスタムJavaScript変数
ユーザー定義変数の基本的な作り方
GTMのユーザー定義変数は、タグ設定やトリガー設定の各画面からも作成できますが、左のメニュー内の「変数」から作成するのが一番簡単です。
慣れるまではタグここからの作成をお勧めします。
変数を作るときは、左の変数メニューをクリックして、右側に一覧を表示させます。下段にある「ユーザー定義変数」エリアのどこでもいいのでクリックするとGTMであらかじめ設定されている変数リストから条件にあったものが選択できます。
選択をするとその変数タイプにあわせた設定内容が表示され、タグの設定を進めることができます。
それでは早速それぞれ設定していきます。
GoogleアナリティクスのトラッキングID用の変数
このタグは必ずしも必要ではありませんが、GoogleタグマネージャからGoogleアナリティクスを使った様々なトラッキングをする際にトラッキングIDを変数設定しておくと、変数の使い回しができ、いちいち「トラッキングIDなんだっけ??」と探さなくてよくなります。
便利なの是非変数設定をしておきましょう。
GoogleアナリティクスのトラッキングIDは、
管理→プロパティ→プロパティの設定の基本設定エリアの一番上に記載されている、UA-から始まる文字列です。
プロパティIDをクリップボードにコピーしておきます。
変数の新規画面から変数タイプ一覧を表示させ、その中から「Google アナリティクス設定」をクリックします。
コピーしておいたGoogleアナリティクスのトラッキングIDを変数設定画面の「トラッキングID」部分に貼り付けます。
Cookieドメインの指定部分がありますが、1サイト1ドメインでの運用の場合はCookieドメイン部分は「auto」のままで良いかと思います。
サブドメインでコンテンツを分けている場合などでアナリティクス計測時のCookieを共通化したい場合などに設定が必要です。(ここでは割愛します)
変数に名前をつけて右上の「保存」ボタンを押して保存します。
名前はなんでも可。使い回すことの多い変数なのでパッと見て何の変数だったかがわかるようにしておくと良いと思います。
例では「webru-TrackingID」という変数名にしています。
GAのトラッキングIDが代入された変数の設定は完了です。
GTMのデータレイヤー変数「gtm.start」を取得する変数
次に、2つ目の変数を設定します。
Googleタグマネージャーのワンタグと呼ばれる<script></script>で囲われた設置用タグにあらかじめ設定されているデータレイヤー変数「gtm.start」の値を代入する変数を設定します。
gtm.startは、タグマネージャがページに読み込まれた時点のタイムスタンプが記録されている変数です。
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
ワンタグ内のpush({‘gtm.start’:new Date().getTime(),event:’gtm.js’});部分が該当します。
早速変数を作りましょう。
変数の新規画面から変数タイプ一覧を表示させ、その中から「データレイヤー変数」をクリックします。
設定画面では下記のように設定をします。
変数の種類 | データレイヤー変数 |
---|---|
データレイヤーの変数名 | gtm.start |
データレイヤーのバージョン | バージョン2 |
デフォルト値を設定 | チェック不要 |
設定をしたら、変数名をつけて保存します。
例では「PageViewStartTime」という変数名にしています。
GTMタグ読み込み時の日時を代入した変数の設定は完了です。
gtm.startがセットされたユーザー定義変数を使って経過時間を算出するカスタムJavaScript変数を設定
次に、3つ目の変数を設定します。
先ほど設定をした、gtm.startを設定したユーザー定義変数(例では、PageViewStartTime)の値を利用して、読了地点に到達したタイムスタンプとの時間差(秒差)を変数に定義します。
GTMには「カスタムJavaScript」というタイプの変数が用意されており、JavaScriptで計算させた値を変数にセットすることができます。
JavaScriptも簡易なものなのでコピペで簡単にできますのでご安心ください。
では、早速変数を作りましょう。
変数の新規画面から変数タイプ一覧を表示させ、その中から「カスタムJavaScript」をクリックします。
設定画面では下記のように設定をします。
変数の種類 | カスタムJavaScript |
---|---|
カスタムJavaScript | 下記のコードをコピーしてGTMの設定画面にペーストしてください。 |
- 2行目:var start = {{PageViewStartTime}};
- 「PageViewStartTime」の部分を2つめに設定をした、gtm.startの値を入れた変数名に変更してください。(例では「PageViewStartTime」と命名しています)
ここでGTMのワンタグが読み込まれた時間のタイムスタンプがstartに代入されます。
ここでは、後から設定するトリガーによってこの変数が呼び出された際のタイムスタンプがendに代入されます。
endからstartを引いたミリ秒数をtimeに代入します。
ミリ秒を秒にして、値を返します。
設定をしたら、変数名をつけて保存します。
例では「gtmstartForElapsedSeconds」という変数名にしています。
GTMタグ読み込み時からトリガー発生時の時間差(秒差)を代入した変数の設定が完了しました。
ページタイトルを取得するカスタムJavaScript変数を設定
次に、4つ目の変数を設定します。
変数の設定はこれで最後です。
アナリティクスのディメンションに利用できるようにページタイトルをイベントラベルに追加する予定ですので、表示されているページのタイトル要素からページタイトルを取得する変数を設定します。
早速設定をしていきます。
JavaScript変数タイプの変数を作成します。
このタイプの変数はJavaScriptのグローバル変数の値をセットすることができます。
今回は「document.title」をセットします。
変数の新規画面から変数タイプ一覧を表示させ、その中から「JavaScript変数」をクリックします。
設定画面では下記のように設定をします。
変数の種類 | JavaScript変数 |
---|---|
グローバル変数名 | document.title |
設定をしたら、変数名をつけて保存します。
例では「PageTitle」という変数名にしています。
計測ページのページタイトルを取得する変数の設定が完了しました。
以上で変数の設定は完了です。
あとは、トリガーを設定して、タグを作成する流れになります。
タグマネージャに読了要素に到達した際に発火するトリガーを設定
次にトリガーの設定をします。
トリガーとは、そのタグが配信されるきっかけとなるタイミングのことで、今回の例では、「読了」とする「要素」が「視認できたとき」と言い換えることができます。
トリガーを「引き金」と言い換えるとさらにイメージしやすいと思います。
早速トリガーを設定していきます。
読了とする要素はどこにしますか?
記事を最後まで読んでもらった。とする位置をHTMlの要素やCSSセレクタで指定する必要があり、まずはその位置を検討しなくてはいけません。
このブログの場合は、すべての記事の終わりにSNSボタンが設置してあり、このSNSボタンをラップしているDIV要素に指定してあるClass属性の値「shareBtn_after_entry」を利用しています。
読了とする箇所はページに1箇所なので、1ページ内でユニークとなるID属性の方が好ましいのですが、1ページに必ず1箇所しかないCSSセレクタ等であれば何でも良いです。
ページ内に1つしかない要素で、かつメインコンテンツより下にあるものを指定するようにします。
読了位置を決めたら読了率計測用トリガーを設定しよう
左のメニューからトリガーをクリックし、トリガー一覧の「新規」ボタンをクリックします。
右側に表示されたエリアのどこでも良いのでクリックします。
クリックするとトリガーのタイプの設定画面が開きます。
トリガータイプの一覧の中の「ユーザーエンゲージメント」内の「要素の表示」をクリックします。
「要素の表示」トリガーに合わせた設定項目が表示されますので、それぞれ設定を行います。
設定項目が複数あるので、それぞれ後ほど説明をしていますが、下記のような設定で概ね良いかと思います。
トリガーの種類 | 要素の表示 |
---|---|
選択方法 | CSSセレクタ |
要素セレクタ | 読了とする要素のCSSセレクタを指定してください 例の場合は「.shareBtn_after_entry」です。 |
このトリガーを起動するタイミング | 1 ページにつき 1 度〔詳しく〕 |
視認の最小割合 | 10〔詳しく〕 |
画面上での最小表示時間を設定 | なし〔詳しく〕 |
DOMの変化をモニタリング | なし〔詳しく〕 |
このトリガーの発生場所 | すべての表示イベント〔詳しく〕 |
トリガーの設定は以上です。
名前をつけてトリガーを保存してください。
例では「読了トリガー」としています。
下記にそれぞれのトリガーについての設定項目について詳細を記載しています。
不要な場合は、次の手順「タグの設定」に進んでください。
トリガーを起動するタイミングはどうする?
トリガーを起動するタイミングは選択できるオプションが3つあります。
それぞれの動作は下記の通りです。
- 1ページにつき1度(今回はこれを使用)
- 複数の該当要素があっても、1度しか実行されません。今回の目的はページビューに対する読了率を取得したいため、1ページビューにつき1回(読了位置まで来なければ0回)のみ計測したいため、このオプションを選択します。もし仮に、読了として設定したセレクタがページ内に複数あったとしても1度しか計測されません。
- 1要素につき1度
- 設定した各要素に対して、1度実行されると、それ以降は実行されません。
今回の例では、1ページビューに対して記録するイベント回数は1回にしたいため、該当要素が複数あった場合に複数回カウントされる可能性のあるこのオプションは利用しません。
ページ内の各見出しタグが表示される都度イベントトラッキングを行うような場合に最適なオプションです。 - 各要素が表示されるたび
- そのページ内で何度上下にスクロールしても、該当要素が表示される度にトリガーが発火します。その要素が表示される都度、アナリティクスのイベント数がどんどん加算されていく形になります。
今回の計測では利用しません。
視認の最小割合はどうする?
「視認の最小割合」とは、トリガーとなる要素がその要素の全体の何%視認できる状態になったらトリガーを発火させるかを指定するオプションです。
公式の説明では以下のように記載されています。
選択した要素の何割が画面上で視認可能だったらトリガーを起動するかを指定します
例えば高さ600pxの要素をトリガーに指定して、割合を50にしている場合、300pxが画面上に表示されていれば、視認されたとしてGTMを通してアナリティクスにイベントとして記録されます。
今回の例では記事の終点から少し距離のあるSNSボタンを読了位置としているため、「10」としています。
要素の高さや、本文と読了とする要素の距離によっても数値が変わるかと思いますので、適宜調整してください。
画面上での最小表示時間を設定はどうする?
公式の説明では以下のように記載されています。
選択した要素が画面上でどれくらい長く視認可能だったときに、トリガーを起動するかを指定します。この時間は1つのページで累積してカウントされます。たとえば、5,000ミリ秒間視認可能だった要素が一度視界から消え、再び5,000ミリ秒間視認可能となった場合、画面上での合計表示時間は10,000ミリ秒とカウントされます。
今回の要件では単純に読了とする要素が表示された際にトリガーを起動させるため最小表示時間の設定はしません。
文章を読んでもらえたか、の指標を取る際に、文章要素に対して最小表示時間を設定するときに便利なオプションです。
DOM の変化をモニタリングとは?
JavaScriptなどで、ボタンをクリックしたら要素を追加する、といった実装がある場合、その追加されたDOM要素に対して計測を行うオプションです。
今回の要件では、既に表示されている見出し要素に対してのトリガーになりますので利用しません。
トリガーの発生場所の指定
トリガーの発生場所を限定する際に利用するオプションです。
例えば、URLだったり、データレイヤー変数に応じてトリガーの起動を制御するといった使い方ができます。
ここでは1例のみにしますが、例えば、http://example.com/category/以下のみトリガーを起動する、といった場合は、
Page URL:先頭が一致:http://example.com/category/
といった感じになります。
トリガーの発生場所の指定で限定せずとも、読了とするセレクタレベルでも発生場所を限定できるかと思います。
このブログの場合でいうと、指定した要素セレクタ「.shareBtn_after_entry」は、ブログの個別記事のみに存在しています。
「.shareBtn_after_entry」が存在しなければトリガー自体が発火しませんので、個別記事のページでのみトリガーが発生する形となり、セレクタレベルで限定しています。
例では、「すべての表示イベント」に設定し発生場所を限定していませんので、限定する必要がある場合は、適宜調整してください。
Googleタグマネージャに読了率計測用タグを設定
これまでに作成した変数と、トリガーを利用して、タグの設定をします。
まずは、左のメニューからタグメニューをクリックします。
上部にタグ設定、下部にトリガー設定画面が出ますのでまずはタグの設定をしていきます。
タグ設定エリアのどこでも良いのでクリックしてください。
クリックすると、タグタイプの選択リストが出ます。
タグタイプリストの中の一番上にある「ユニバーサルアナリティクス」をクリックします。なお、旧バージョンのアナリティクスを利用している場合は従来のGoogleアナリティクスをクリックしてください。
よくわからない場合は、最近設定したアナリティクスであればほとんどの場合ユニバーサルアナリティクスですのでユニバーサルアナリティクスをクリックしてください。
タグの詳細設定をしていきます。
設定内容はこのようになります。
タグタイプ | ユニバーサルアナリティクス |
---|---|
トラッキングタイプ | イベント |
カテゴリ | Googleアナリティクスのイベントカテゴリ 例では「読了率」としています。 |
アクション | {{Page Path}} Googleアナリティクスのイベントアクション。ページのパスを記録します。 |
ラベル | {{PageTitle}} Googleアナリティクスのイベントラベル。作成したページタイトルを取得する変数を設定。 例と異なる変数名をつけた場合は{{つけた変数名}}を指定してください。 |
値 | {{gtmstartForElapsedSeconds}} Googleアナリティクスのイベントの値。作成した読了地点までに経過した秒数を記録する変数を設定。 例と異なる変数名をつけた場合は{{つけた変数名}}を指定してください。 |
非インタラクションヒット | 真 |
Googleアナリティクス設定 | {{プロパティIDを登録した変数}} 例では{{webru-TrackingID}} |
このタグでオーバーライド設定を有効にする | 設定なし |
設定が完了したら、タグに名前をつけて保存をしてください。
例では「読了率」としています。
非インタラクションヒットとは?
非インタラクションヒットは、ざっくり言うとこのイベントが発生した際に、ページの遷移が発生したと見なすか否か、という設定です。
実際にはページ遷移がなくとも、遷移があったと同等の意味を持つ動作をユーザーがした場合に、この値を「偽(False)」にしておけば、アナリティクスの直帰としてカウントされなくなります。
「ページ遷移ではない=非インタラクションヒット」
「ページ遷移とみなす=インタラクションヒット」
読了地点まで読んでもらえた場合は、直帰としないのであれば非インタラクションヒットを偽(False)に設定してください。
アナリティクスのオリジナルの直帰率に影響を与えたくないため、例では「真(true)」に設定しています。
この値を真にしても、この要素の表示の集計とは別に、ページビューの計測タグを設定していればユーザーが他のページを閲覧した場合などはきちんと記録されます。
以上で、タグの設定が完了しました。
Googleタグマネージャ側での設定は以上で完了です。
プレビューでタグが正しく設定されているかチェックをしてみましょう。
プレビュー機能を使って設定確認をしてみよう
GTMのプレビューモードを起動します。
コンテナのヘッダーにある「プレビュー」ボタンをクリックします。
画面にオレンジの帯が出たていたらプレビューモードです。
GTMを設定したサイトを表示して、GTMの設定変更を読み込ませるために、一度キーボードのF5やブラウザの更新ボタンを押してページを更新してください。
Safariの場合はキャッシュが残りやすいのでキャッシュを一度削除した方が良いかもしれません。
サイトを表示させると、下部にデバッグペインが表示されています。
今回設定したタグで取得したイベントの内容を見てみます。
トリガーとなる、読了地点までページをスクロールしておきます。
左のsummaryをクリックすると右側に設定されているタグの一覧が表示されます。
今回設定した「読了率」タグをクリックします。
クリックするとタグで取得したイベントの内容が表示されています。
内容が取得できていて、正しければ、タグの設定は成功です!
アナリティクスでも確認
アナリティクスでもデータが取れているか確認しておきます。
「リアルタイム>イベント」でレポートを表示し、「イベント(直前の 30 分間)」をクリックします。
「読了率」となっているカテゴリをクリックすると、取得されたタグとタイトルの一覧が表示されます。
読了地点としたセレクタまでスクロールしないとイベントは発生せず、読了率カテゴリに数値が上がってこないことに注意が必要です。
読了率イベントとして記録される条件のおさらいです。
- トリガーで指定した、読了地点とした要素セレクタが視認の最小割合分、画面に入っていること。
- 1ページビュー1回のため、1度イベントが発生したら2回目は上がってこない。ページの更新を行えば新規ページビューとして再度イベントが記録される。
これで正しくアナリティクスでデータが取れていることが確認できました。
タグを公開して実稼働させよう
Googleタグマネージャに戻り、タグを公開しておきます。
タグの公開をしなければ、データを取得できませんので設定が完了したら必ず公開作業をしましょう!
ワークスペースの右上にある「公開」ボタンをクリックします。
バージョン管理画面が表示されます。
何も入れなくても公開できますが、バージョン管理をする場合はバージョン名と説明を入れておくと良いかと思います。
もう一度「公開」ボタンを押すと、トリガーに応じてタグの配信が開始されます。
デバッグペインがずっと出ていると邪魔になりますので、作業が終わったら不要であればプレビューモードを終了しておきます。
アナリティクスで読了率を表示させるカスタムレポートを作ろう!
アナリティクスに記録されたイベントカテゴリ「読了率」のデータを、エクセルなどで集計しても良いのですが、とても面倒です。
アナリティクスの計算指標と、カスタムレポートを利用すればアナリティクス上で読了率を確認することができます。
カスタムレポートのページビューが正しく表示されない(0表示)ご報告を受け、カスタムレポートのディメンション設定内容を変更しています。
本日以前に設定されている方で、ページビューがゼロ表示になっている場合は、カスタムレポートのディメンション設定を変更してみてください。
最終的なイメージはこんな感じです。
では、早速いきます。
アナリティクスの「計算指標」で読了率と読了経過時間を設定する
Googleアナリティクスの「計算指標」は、指標データ(数値データ)の計算結果をレポートに表示できる便利な機能です。
今回の例でいうと、ページビューから読了地点に到達した回数の割合、つまり「読了率」の計算を計算指標で設定し、アナリティクスのレポートに表示できるようになります。
もう、スプレッドシートや、CSVにダウンロードしてきてエクセルで管理をする手間が無くなります。
計算指標は、現在ベータ版ではありますが使っていきたいと思います。
ちなみにですが、2018年5月現在では計算指標は最大5つしか利用できません。
計算指標の設定は、アナリティクスの左下にある「設定」ボタンから設定パネルを表示し、ビューの設定内にある「計算指標ベータ版」をクリックします。
計算指標の設定一覧画面が表示されますので、「新規計算指標」ボタンを押して、計算指標を作っていきます。
読了率の計算指標
設定は下記のようになります。
「名前」「表示名」は好きなもので問題ありません。
名前については、指標選択時に表示されるので、かぶりがなく、わかりやすいものにしましょう。
ここでは「読了率」としています。
名前 | 読了率(任意) |
---|---|
表示名 | ReadRate(任意) |
フォーマットタイプ | 割合(%) |
数式 | {{合計イベント数}} / {{ページビュー数}} |
{{合計イベント数}} / {{ページビュー数}}
は、{{合計イベント数}} ÷ {{ページビュー数}}の意味で、割合を計算しています。
この計算結果が、指標「読了率」として利用できるようになります。
後述するカスタムレポートの作成時に、イベントカテゴリでフィルタを行い読了率のみを表示させるようにします。
設定が完了したら保存をします。
読了までの経過時間表示用計算指標
次に、読了までの経過時間を表示させる計算指標を作ります。
Googleタグマネージャから、読了までの経過時間を「秒数」でイベントタグの「値」に登録するようにしました。
値には整数しか登録できないため、秒数で登録するようにしています。
秒数のままだと、パッと見て経過時間が把握できないので、これを時間単位(時:分:秒)にして表示させるための計算指標です。
設定は下記のようになります。
「名前」「表示名」は好きなもので問題ありません。
名前については、指標選択時に表示されるので、かぶりがなく、わかりやすいものにしましょう。
ここでは「読了経過時間」としています。
名前 | 読了経過時間(任意) |
---|---|
表示名 | ElapsedSeconds(任意) |
フォーマットタイプ | 時間 |
数式 | {{イベントの値}} |
特に演算はせず、フォーマットを変更するのみの計算指標です。
設定が完了したら保存してください。
これで2つの計算指標の作成が完了しました。
この計算指標を使って、カスタムレポートを作成しましょう。
カスタムレポートの作成が終われば作業完了です。
あともう少しなので頑張ってください(*´∀`*)
アナリティクスのカスタムレポートでページビュー、合計イベント数、読了率、読了経過時間を表示する
カスタムレポートでは、エクスプローラータイプのものと、フラットテーブルタイプの2つを設定します。
エクスプローラータイプのレポートはグラフなどで比較がしやすいレポートで、ディンメンションと呼ばれるページURLやページタイトルなど1が軸となり、さらに下位のディメンションで絞り込むようなレポートの使い方をします。
フラットテーブルタイプはディメンションを最大5つまで表示でき、一覧で見る際に、ページURLとページタイトルを一緒に見ることができるためエクセルのような形式で直感的でわかりやすいレポートです。
早速カスタムレポートを作っていきます。
左メニューの「レポート>カスタムレポート」からレポート作成画面に進みます。
「新しいカスタムレポート」ボタンをクリックしてレポートを作成します。
まずはエクスプローラータイプのレポートを作成します。
エクスプローラータイプのレポートの設定
最終的な設定です。
タイトル | 読了率レポート(任意) |
---|---|
名前 | エクスプローラー(任意) |
種類 | エクスプローラー |
指標グループ | ページビュー数、合計イベント数、読了率(計算指標)、読了経過時間(計算指標) |
ディメンション | イベント カテゴリ、イベント ラベル(例では「ページタイトル」が入ります) または イベント アクション(例では「ページURL」が入ります) |
フィルタ | 一致|イベントカテゴリ|完全一致|イベントカテゴリ名(例では「読了率」) |
ビュー | 任意(例では1個のビュー) |
次に、エクスプローラータイプのレポートをコピーして、フラットテーブルタイプのレポートを作成します。
少しわかりにくいですが、レポートの名称の右側にある「このタブを複製」ボタンをクリックします。
すると、全く同じ内容の設定がコピーされます。
フラットテーブルタイプのレポートの設定
エクスプローラータイプのタブからコピーした設定から変更する箇所は、
- 名前
- 種類
- ディメンション
の3つのみです。
最終的な設定内容です。
タイトル | 変更なし |
---|---|
名前 | フラットテーブル(任意) |
種類 | フラットテーブル |
指標グループ | 変更なし |
ディメンション | イベント ラベルまたはイベント アクションを追加 |
フィルタ | 変更なし |
ビュー | 変更なし |
フラットテーブルにすると、同じ設定でもディメンションの並びが横並びになっているのがわかります。
直感的で見やすいので、パッと数字を把握するだけならフラットテーブルの方が個人的には好きです。
レポートはそれぞれ好みがあると思いますので、最低限のレポートのみにしています。
ディメンションや指標を工夫して、さらにカスタムしてみてください。
以上で設定は完了です。
設定が完了したら保存します。
保存すると、保存したレポートがすぐに表示されるかと思います。
これで読了率をアナリティクス上で確認できるようになりました!
長らくお付き合いいただきありがとうございました。
以上でGoogleタグマネージャからGoogleアナリティクスで「読了率」を計測する方法のご紹介でした。
ぺんぎん says
参考にさせていただきました!
分かりやすい解説本当にありがとうございます。
一点質問なんですが、
さいごのGAのカスタムレポートの設定で『読了率』のフィルタを設定すると
ページビューが0になってしまうのですが、原因はなんでしょうか?
ご教授いただけると嬉しいです。
宜しくお願い致します。
Chikako says
ぺんぎんさん、ご覧いただきましてありがとうございます!
カスタムレポート、私のを見てみると、確かに今、ページビューが0になっていました。
原因はわからないのですが(すみません)、ディメンションをページではなく、イベントに設定するとページビューが表示されるようになります。
カスタムレポートのディメンションを下記に変更してみてください。
●エクスプローラータイプのディメンションの設定
イベントカテゴリ/イベントラベルorイベントアクション
●フラットテーブルタイプのディメンションの設定
イベントカテゴリ/イベントラベル/イベントアクション
/*————————*/
当ページの解説の通りの設定であれば、
・イベントカテゴリ→「読了率」と表示される
・イベントラベル→ページのタイトルが表示される
・イベントアクション→ページのURLが表示される
/*————————*/
フィルタも含めて、その他の項目は記事のとおりの設定でOKでした。
改めて設定部分の記述を修正するようにいたします!!
お教えくださりありがとうございます。
masa says
アナリティクスのカスタムレポートで「イベントカテゴリ名」を「読了率」で「フィルタ」をすると「ページビュー数」が0件になってしまいます。何か設定が必要なのでしょうか?
Chikako says
masaさん、お読みくださりありがとうございます。
確認いたしましたところ、わたくしのアナリティクスも同様にゼロになっておりました(;´Д`)。
原因はわからないのですが、ディメンションをイベント系にしていただくことで、フィルタはそのままで、ページビューが表示されるようになりました。
カスタムレポートのディメンションを下記に変更してみてください。
●エクスプローラータイプのディメンションの設定
イベントカテゴリ/イベントラベルorイベントアクション
●フラットテーブルタイプのディメンションの設定
イベントカテゴリ/イベントラベル/イベントアクション
/*————————*/
当ページの解説の通りの設定であればですが、
・イベントカテゴリ→「読了率」と表示される
・イベントラベル→ページのタイトルが表示される
・イベントアクション→ページのURLが表示される
/*————————*/
お手数ですがお試しいただけましたらと思います。
記事の方、後ほど修正をしておきます。
お教えくださりありがとうございました!
masa says
ありがとうございます!
ディメンションの設定を「イベントカテゴリ/イベントラベル/イベントアクション」に変えることで、ページビューが表示されるようになりました。
Chikako says
masaさん、早速のご確認、ありがとうございます!!
ページビューが表示されたとのこと、安心いたしました。
ご親切にご報告くださりありがとうございました(*´ー`*)