「広告としてバナーを設置したはいいが、どのくらいクリックされているのか」「そもそも広告バナーを見てもらえているのか」という疑問をもったことはありませんか？

この記事では、Googleアナリティクスとタグマネージャーを活用して「広告」としてバナーを設置した際に、「実際にどれくらいの人が広告バナーを見て、その掲載位置までマウスを移動し、クリックしているのか？」を計測し、その計測した数値を確認する方法をご紹介いたします。

広告バナーの閲覧～そのバナーのリンク先サイトへ訪れるときの”ユーザー行動”を大まかに分けると、以下の通りです。

1. 広告バナーを閲覧する（認知：インプレッション）
2. 広告バナーまでマウスを移動する（誘導：マウスオーバー）
3. 広告バナーのリンク先へ移動する（獲得：クリック）

このようにユーザーの行動は3段階（認知、誘導、獲得）に分けることができます。

広告バナーを基点とした場合、認知：インプレッション、誘導：マウスオーバー、獲得：クリックと分けることができます。

どこで離脱しているのか、どこのための施策を実施するのか、といった改善案を導きだすための指標の一つとして、GAとGTMのイベントトラッキングによる目標設定の機能を活用した計測データを用いることができます。

※ この記事では、認知をインプレッション、誘導をマウスオーバー、獲得をクリックとしていますが、認知を流入元、誘導を経路、獲得を資料請求完了などのコンバージョン（CV）に設定することで、より広範囲の計測を行うことも可能です。

Googleアナリティクスにおいて、コンバージョン（CV）を計測するための目標設定機能には、一般的に到達したページのURLが使用されます。

「特定のページを表示した」というユーザー行動を集計し、CVとしてカウントする方法です。

しかし、特定のページに到達したユーザー行動をCVに設定しない場合があります。この際に用いられる機能の一つがイベントトラッキングとなります。

このイベントトラッキング機能を活用することで、WEBサイト上の様々な要素に対するインプレッション数、マウスオーバー数、クリック数などといった数値を集計することができます。

イベントトラッキング機能の活用例として以下の要素が挙げられます。

• 広告バナー
• 電話番号へ発信するボタン
• SNSアイコン
• 資料PDFなど各種ダウンロードリンク
• お問い合わせボタン
• YDNやGDN、アフィリエイトのリンク
• 動画の操作ボタン

こういった活用例のように同じページ内でのユーザー行動に対して、イベントトラッキング機能を活用することができます。

この中でも、今回は「利用頻度が高いと考えられる広告バナーに対するユーザー行動を集計する方法」をご紹介いたします。

Googleアナリティクス・タグマネージャーのイベントトラッキング・目標設定機能を使って、クリック数、マウスオーバー数、インプレッション数を計測する方法をご紹介いたします。

1. htmlのソースコードへのタグ追加
2. Googleアナリティクスの設定
3. Googleタグマネージャーでの設定

1. 計測対象htmlのソースコードにJavaScriptの記述を追加

htmlソースコード内の計測する対象広告バナーのリンクタグ <a href>に JavaScriptの記述を追加します。

サンプル：イベントトラッキングに使用するJavaScriptの記述

      a href="https://sample.com/" on※※※※="gtag('event', 'アクション', {'event_category': 'カテゴリー', 'event_label': 'ラベル'});"
    

on※※※※の部分はイベントハンドラーと呼ばれ、何らかのイベントが発生した際に処理を実行します。

今回の場合ですとonclick が クリック、onmouseover が マウスオーバー、onload が インプレッション といったイベントが発生した際にGoogleへのeventデータの送信処理が実行されます。

JavaScriptの記述：クリックの場合

      a href="https://sample.com/" onclick="gtag('event', 'click', {'event_category': 'campaign_click', 'event_label': 'campaign'});"
    

JavaScriptの記述：マウスオーバーの場合

      a href="https://sample.com/" onmouseover="gtag('event', 'mouseover', {'event_category': 'campaign_mouseover', 'event_label': 'campaign'});"
    

JavaScriptの記述：インプレッションの場合

      a href="https://sample.com/"  onload="gtag('event', 'load', {'event_category': 'campaign_load', 'event_label': 'campaign'});"
    

ここでのアクション、カテゴリー、ラベルの値をGoogleアナリティクスとタグマネージャーに設定しますので、メモしておくとその時に便利です。

2.Googleアナリティクスでイベントトラッキングによる目標設定

計測対象のhtmlソースコードに設置したJavaScriptのon※※※※記述をGoogleアナリティクスに設定して連携させていきます。

Googleアナリティクスの目標設定によく利用される特定のページへの到達 をCVとカウントする場合との違いは、目標設定からカスタムを選び、先ほどのon※※※※記述を使って独自に設定していくところです。

③目標の詳細 イベント条件 に先ほどonclick（クリック）、onmouseover（マウスオーバー）、onload（インプレッション）のそれぞれに記述したカテゴリー、アクション、ラベルの値を追加します。

3.Googleタグマネージャーでトリガータグの設定

次にGoogleタグマネージャーでの設定方法をご説明いたします。Googleタグマネージャーでは、トリガーとタグの設定を行います。

トリガーでは動作を実行するための条件を設定し、タグでは、on※※※※で送信されるデータ形式やIDを設定します。

トリガーの設定

1. トリガー → 新規をクリックする
2. トリガーの設定 → トリガーのタイプを選択（クリック：リンクのみ）
3. タグの配信を待つにチェックを入れる
4. これらすべての条件が true の場合にこのトリガーを有効化▼
   Page URL　正規表現に一致　対象ページのURL
5. このトリガーの発生場所（一部のリンククリック を選択）
6. イベント発生時にこれらすべての条件が true の場合にこのトリガーを配信します▼
   Click URL　正規表現に一致　飛び先のリンクURL
7. 右上にある保存ボタンをクリック
8. 今回作成したトリガーの名前を変更

以上でGoogleタグマネージャーのトリガー設定が完了しました。

タグの設定

次にタグの設定方法を見ていきましょう。

1. タグ → 新規をクリックする
2. タグの設定 → タグタイプを選択（Googleアナリティクス：ユニバーサルアナリティクス）
3. トラッキングタイプ（イベントを選択）
4. on※※※※で指定したカテゴリー・アクション・ラベルの値を記入する
5. このタグでオーバーライド設定を有効にする にチェックを入れる
6. Google アナリティクスで発行したトラッキングIDを記入
7. 先程作成したトリガーを選択する
8. 右上にある保存ボタンをクリック
9. 今回作成したタグの名前を変更
10. 一番初めのページ（ワークスペース）に戻り、右上にある公開をクリック
11. バージョンの公開と作成を選択し、右上の公開をクリックして完了です

以上でGoogleタグマネージャーでの設定は完了です。

Googleのリアルタイム機能を使って、設定したそれぞれのイベントトラッキングによる目標設定が動作しているかどうかを確認することができます。

まず、リアルタイム > 概要を選択し、現在アクセスしている地域を選択します。

次に、リアルタイム > コンバージョンを選択し、計測対象のCVを選択します。

アクセスしている地域からのトラフィックを認識しているかを確認してから、設定したイベントトラッキングの目標設定が動作しているかどうかを確認してください。

上記のようにアクセスした地域とユーザーアクションの内容で動作していることを確認することができます。以上が動作確認の方法となります。

以上がGAとGTMでのイベントトラッキング目標設定の方法となります。いかがでしたでしょうか。

広告バナーを掲載する場合、広告を出す前と後でどのような差があるのかはとても気になる部分かと思います。

今回紹介した方法であれば、広告バナーを見たユーザーがどれだけいて、広告バナーをクリックしたユーザーがどれだけいて、コンバージョンに繋がったユーザーがどれだけいるのかが計測でき、サイトを改善するための一つの指標として利用することができます。