精読やページ内到達計測に便利！特定の要素が表示された事をGoogle Tag Manager × Google アナリティクスで計測

スクロール率の計測は便利なのですが、「記事の最後まで読み終わった」などを計測したい場合は、記事の長さによって見るべきスクロール率が変わってきてしまいます。そこで「記事の最後にあるバナーなどが表示された時」にその状態を取得・計測する方法が便利です。

「ページ下部のソーシャルボタンが表示された」「ランディングページで特定の文章や画像が表示された」「商品詳細で口コミの部分まで見てくれた」など利用シーンは多彩です。では、さっそく設定方法を確認してみましょう（以下方法は、Google Tag Managerを利用してGoogle アナリティクスでデータを計測していることが前提です）。

Google Tag Managerで計測のための変数を有効にする

Google Tag Managerにログインし、計測をしたいコンテナを選択。その後に「変数」のメニューにアクセスしましょう。

「組み込み変数」のすぐ下にある、赤い「追加」ボタンを押すと、変数を追加することが出来ます。「可視性」の「Percent Visible」と「On-Screen Duration」の２つにチェックを入れます。この２つは以下の意味を持ちます。

Percent Visible：要素が全体の何%表示されたか（例えば大きなバナー画像であれば、画像全体の縦何%がユーザーのブラウザ内で表示されているかを取得できます）。

On-Screen Duration：何ミリ秒該当する要素が表示されたか（こちらは後述するトリガーの設定の値に依存します。累計何ミリ秒という考え方ではなく、●●ミリ秒以上表示されたらデータを送るという設定をした場合、計測される値は●●になります）。

 表示を計測するための「トリガー」を作成する

次に「トリガー」のメニューにアクセスして「新規」のボタンを押してください。トリガーの種類は「要素の表示」を選択して、以下の画像のように設定を行います。

「選択方法」では「ID」あるいは「CSSセレクタ」を選ぶことが出来ます。特定の要素をID付けしている場合はIDを利用し、特定の要素をCSSセレクタで指定している場合はCSSセレクタを利用し、それぞれ該当する「要素ＩＤ」を指定します。

以下、例を紹介いたします。筆者の英語ブログでは記事の下に、「More from my site」というエリアで関連記事のレコメンドをしています。以下がそのソースになります。

オレンジでハイライトした部分が、More from my site になり、関連記事のレコメンドの部分を括っているdivタグ内に「id=”wp_rp_first”」があります（青でハイライトした部分）。

今回はこの部分を計測するため選択方法は「ID」にし、要素IDを「wp_rp_first」と指定しています。

残りの設定項目ですが

このトリガーを配信するタイミング：「１ページにつき１度」「１要素につき１度」「各要素が画面に表示されるたび」の３つを選択可能。名前の通りですが、多くの場合は「１ページにつき１度」を利用することが多いかと思います。

視認の最小割合：要素全体の何%が表示されたら計測をするかを定義できます。半分なら50、全体なら100といった形になります。

画面上での最小表示時間を設定：こちら設定しない場合は一瞬でもブラウザ上に表示されれば計測します。ミリ秒で時間を設定すると、その該当時間だけブラウザ上に表示された後にデータが送られます。それ未満の場合はデータが送られません。

と、なります。設定を終えたら保存をしましょう。

最後にタグを作成する

最後に計測用のタグを作成しましょう。「タグ」のメニューから「新規」ボタンを押して条件を設定していきます。

• タグの種類は「ユニバーサルアナリティクス」
• トラッキングタイプは「イベント」
• カテゴリは「関連記事表示」※イベント カテゴリで表示される名称なので任意で大丈夫です
• アクションは「{{Page Path}}」※要素が表示されたページを計測することが出来ます
• ラベルは「{{On-Screen Duration}}」※表示時間を取得します。前述の通り設定した計測までの時間がミリ秒で取得されます
• 値は「{{Percent Visible}}」※データを送信するタイミングで要素全体の縦何%が表示されていたかを取得します
• 非インタラクションヒットは、ランディングページで要素を見て離脱した際に直帰という扱いにしたくない場合は「偽」、直帰という扱いにした場合は「真」を選択
• Google アナリティクス設定は「{{GA Tracking ID}}」を選択
• 最後にトリガーは先ほど作成したトリガー（今回の例だと「関連記事を表示」）を選択

以下の画面を参考に設定をしてみてください。

後はGoogle Tag Managerを本番反映すれば終了です。

念のためGoogle アナリティクスの「リアルタイムレポート＞イベント」あるいはGoogle Tag Manager のプレビューで確認をしておきましょう。プレビューだと以下のような形で確認できます。

■要素が表示され、設定した秒数が経過すると、「Tags Not Fired On This Page」から「Tags Fired On This Page」に「関連記事表示」の要素が移動

■「関連記事表示」をクリックすると取得している値を表示

このようにIDあるいはCSSセレクタで計測したい場所を特定することが出来れば、あとは簡単に設定することが可能ですので、ぜひ試してみてください！

 

 

 

【著者プロフィール】

小川　卓（おがわ　たく）

ウェブアナリストとして、マイクロソフト・ウェブマネー・リクルート・サイバーエージェント・アマゾンで勤務後、フリーに。複数社の社外取締役やデジタルハリウッド大学院の客員教授として活動.。コンサルティング・勉強会・執筆に従事。

主な著書に「ウェブ分析論」「ウェブ分析レポーティング講座」「漫画でわかるウェブ分析」「Webサイト分析・改善の教科書」「あなたのアクセスはいつも誰かに見られている」など。

※KOBITブログでは、毎月1~2本程度、小川卓さんに記事を寄稿いただいております。
どれも興味深い記事となっておりますので、ぜひ他の記事もご覧下さい。
→小川卓さんによる寄稿記事を読む