Go to Qiita Advent Calendar 2024 Top
LoginSignup
35
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@prograti

とっても簡単！Googleタグマネージャ イベントトラッキング ガイド

Posted at

サイト内でユーザーがどのような行動をしているかを知る方法の一つとして、Googleアナリティクスのイベント トラッキングがあります。しかし、イベント トラッキングを行うには、Javascriptでイベントハンドラを実装してページに組み込んだり色々面倒な作業が発生します。

// イベントハンドラの例
function handleOutboundLinkClicks(event) {
  ga('send', 'event', {
    eventCategory: '外部リンク',
    eventAction: 'click',
    eventLabel: event.target.href
  });
}

上記のような作業も、Googleタグマネージャを使えばもっと簡単にイベント トラッキングを行うことができます。ここでは、Googleタグマネージャを利用した基本的なイベント トラッキングをいくつかご紹介します。

##イベント トラッキングを始める前に
前準備としてGoogleタグマネージャの組み込み変数の設定を行ってください。「変数」⇒「設定」から「ページ」、「クリック」、「フォーム」、「動画」、「スクロール」の各変数にチェックを付けて有効にしてください。

組み込み変数の設定

##:footprints: Case1:リンクのクリックをトラッキングする
例えば下記のようなPDFダウンロードリンクがある場合、リンク クリックのトリガーを利用すればPDFのダウンロード回数を簡単に計測することができます。

<a id="whitepaper" href="https://xxxxx.com/download/whitepaper.pdf">ダウンロード</a>

:one: メニューの「トリガー」⇒「新規」から、クリックイベントのトリガーを作成する。

クリックイベントのトリガー作成例

■トリガーの設定例

項目 設定内容
トリガーの種類 クリック - リンクのみ
このトリガーの発生場所 一部のリンククリック
トリガー配信条件 【PagePathが"/download/"に等しい】 AND 【Click IDが"whitepaper"に等しい】

:two: メニューの「タグ」⇒「新規」から、タグタイプでユニバーサル アナリティクスを選択し、タグの設定および先ほど作成したトリガーの登録を行う。

クリックイベントのタグ作成例

■タグの設定例

項目 設定内容
タグタイプ ユニバーサルアナリティクス（Googleアナリティクス）
トラッキングタイプ イベント
カテゴリ ダウンロード
アクション ホワイトペーパー
ラベル {{Page Path}}
非インタラクション ヒット 真 1
トラッキング ID UA-xxxxxxxx-x

:three: プレビューモードでサイトにアクセスし、リンククリック時にタグが動作することを確認する。

プレビューモードで動作を確認

:four: Googleアナリティクスのリアルタイムレポートでイベントが計測されていることを確認する。

リアルタイムレポートで動作を確認

:five: 公開ボタンを押してワークスペースの変更を反映させる。

以上の:one:~:five:がリンクのクリックをトラッキングするための手順になります。各項目の設定内容はご自身の用途に合わせて適宜ご修正ください。

###:bulb:Tips.外部リンクのクリックをトラッキングする
アフィリエイトサイトなどを運営していてアフィリエイトリンクのクリックを計測したい場合があると思います。そのような場合はトリガーの作成とタグの作成を以下のような設定で行うことでトラッキングすることができます。

■トリガーの設定例

項目 設定内容
トリガーの種類 クリック - リンクのみ
このトリガーの発生場所 一部のリンククリック
トリガー配信条件 【PagePathが次の正規表現に一致⇒ .*】 AND 【Click URLがmydomain.com（自分のドメイン）を含まない】

※特定のサイトを指定したい場合はClick URLに正規表現を使ってください。　
例：(.*)px.a8.net(.*)|(.*)h.accesstrade.net(.*)

■タグの設定例

項目 設定内容
タグタイプ ユニバーサルアナリティクス（Googleアナリティクス）
トラッキングタイプ イベント
カテゴリ アフィリエイトリンク
アクション {{Click URL}}
ラベル {{Page Path}}
非インタラクション ヒット 真
トラッキング ID UA-xxxxxxxx-x

##:footprints: Case2:ボタンのクリックをトラッキングする
次はCase1のリンクが下記のようなボタンだった場合の設定方法です。

<button id="whitepaper" type="button">ダウンロード</button>

このケースはCase1のリンクの場合と同じ流れになりますが、:one:のトリガーの作成でトリガーの種類を「リンクのみ」ではなく「すべての要素」に設定してください。

すべての要素

##:footprints: Case3:フォーム送信をトラッキングする
ブログサイトでサイドカラムやページの最後にメルマガ登録フォームを設置しているケースは多いと思います。例えばどのページからのお申し込みが多いかを知りたいという場合、フォームの送信（サブミット）をトラッキングすることで簡単に計測することができます。ここではWordPressで最も多く使われているContact Form 7のトラッキング例を記載します。

<!-- Contact Form 7が出力するHTML -->
<form action="xxxx" method="post" class="wpcf7-form" novalidate="novalidate">
~（略）
</form>

:one: メニューの「トリガー」⇒「新規」から、フォームの送信イベントのトリガーを作成する。

フォームの送信イベントのトリガー作成例

■設定例

項目 設定内容
トリガーの種類 フォームの送信
このトリガーの発生場所 一部のフォーム
トリガー配信条件 【PagePathが次の正規表現に一致⇒ .*】 AND 【Form Classesが次のクラスを含む⇒ wpcf7-form】

:two: メニューの「タグ」⇒「新規」から、タグタイプでユニバーサル アナリティクスを選択し、タグの設定および先ほど作成したトリガーの登録を行う。

■設定例

項目 設定内容
タグタイプ ユニバーサルアナリティクス（Googleアナリティクス）
トラッキングタイプ イベント
カテゴリ メルマガ登録
アクション {{Page Path}}
ラベル （空白）
非インタラクション ヒット 偽
トラッキング ID UA-xxxxxxxx-x

:three: プレビューモードでサイトにアクセスし、フォーム送信時にタグが動作することを確認する。

:four: Googleアナリティクスのリアルタイムレポートでイベントが計測されていることを確認する。

:five: 公開ボタンを押してワークスペースの変更を反映させる。

以上の:one:~:five:がフォームの送信をトラッキングするための手順になります。各項目の設定内容はご自身の用途に合わせて適宜ご修正ください。なお、フォーム送信時のバリデーションエラー（未入力エラーなど）が発生した場合もカウントされますのでご注意ください。

##:footprints: Case4:ページスクロールをトラッキングする
コンテンツの良し悪しを計る指標としてページビューや滞在時間の他に精読率があります。細かく計測にはヒートマップツールなどを利用する必要がありますが、ページのどの位置までスクロールされたかをトラッキングすることにより、この精読率を大まかに推測することができます。

:one: メニューの「トリガー」⇒「新規」から、スクロールイベントのトリガーを作成する。

スクロールイベントのトリガー作成例

■設定例

項目 設定内容
トリガーの種類 スクロール距離
縦方向スクロール距離（%もしくはpx） 任意の数値をカンマ区切り（例：25,50,70,90）
トリガー配信条件 PagePathが次の正規表現に一致⇒ /blog/.*

:two: メニューの「タグ」⇒「新規」から、タグタイプでユニバーサル アナリティクスを選択し、タグの設定および先ほど作成したトリガーの登録を行う。

■設定例

項目 設定内容
タグタイプ ユニバーサルアナリティクス（Googleアナリティクス）
トラッキングタイプ イベント
カテゴリ 精読率
アクション {{Page Path}}
ラベル {{Scroll Depth Threshold}}%
非インタラクション ヒット 真
トラッキング ID UA-xxxxxxxx-x

:three: プレビューモードでサイトにアクセスし、縦方向スクロール距離に設定した値に到達した時にタグが動作することを確認する。

:four: Googleアナリティクスのリアルタイムレポートでイベントが計測されていることを確認する（上記設定例の場合、ページの最後までスクロールすると計4回のイベントが計測される）。

:five: 公開ボタンを押してワークスペースの変更を反映させる。

以上の:one:~:five:がページスクロールをトラッキングするための手順になります。各項目の設定内容はご自身の用途に合わせて適宜ご修正ください。

##:footprints: Case5:Youtube動画をトラッキングする
Youtubeアナリティクスを使えば動画の詳細な解析ができますが、Googleアナリティクスとの連携ができません（YoutubeチャンネルはGoogleアナリティクスで計測可能）。Googleタグマネージャを使えば、ページに埋め込んだYoutube動画の再生状況も簡単に計測することができます。例としてユーザが動画を再生してからどこまで視聴したかをトラッキングしてみます。

:one: メニューの「トリガー」⇒「新規」から、Youtube動画のトリガーを作成する。

Youtube動画のトリガー作成

■設定例

項目 設定内容
トリガーの種類 YouTube 動画
進捗状況（割合もしくは時間のしきい値） 任意の数値をカンマ区切り（例：1,10,25,50,75,100）
上級 2 すべての YouTube 動画に JavaScript API サポートを追加するにチェック
このトリガーの発生場所 すべての動画を選択

:two: メニューの「タグ」⇒「新規」から、タグタイプでユニバーサル アナリティクスを選択し、タグの設定および先ほど作成したトリガーの登録を行う。

■設定例

項目 設定内容
タグタイプ ユニバーサルアナリティクス（Googleアナリティクス）
トラッキングタイプ イベント
カテゴリ Youtube動画
アクション {{Video Title}}
ラベル {{Video Percent}}%
非インタラクション ヒット 偽
トラッキング ID UA-xxxxxxxx-x

:three: プレビューモードでサイトにアクセスし、動画を再生して進捗状況に設定した値に到達した時にタグが動作することを確認する。

:four: Googleアナリティクスのリアルタイムレポートでイベントが計測されていることを確認する（上記設定例の場合、動画を最後まで再生すると計6回のイベントが計測される）。

:five: 公開ボタンを押してワークスペースの変更を反映させる。

以上の:one:~:five:がYoutube動画をトラッキングするための手順になります。各項目の設定内容はご自身の用途に合わせて適宜ご修正ください。

##:footprints: Case6:要素の表示をトラッキングする
サイトに設置したバナーのインプレッションを計測したい場合、バナーがファーストビューにあればインプレッション数≒PV数となりますが、バナーが下の方にあるとインプレッション数＜PV数となり大きな誤差が生まれます。
Case4で紹介したスクロールイベントで縦方向スクロール距離を指定して計測する方法も考えられますが、ブラウザやデバイスの違いで誤差が生まれ正確性に欠けます。そのような場合は特定要素の表示をトラッキングすることで簡単に計測することができます。

:one: メニューの「トリガー」⇒「新規」から、要素表示イベントのトリガーを作成する。

要素表示イベントのトリガ作成例

■設定例

項目 設定内容
選択方法 CSSセレクタ
要素セレクタ class属性に指定しているセレクタを入力（例： .ad-footer）
このトリガーを起動するタイミング 1 ページにつき 1 度を選択
視認の最小割合 50
画面上での最小表示時間 500ミリ秒
このトリガーの発生場所 一部の表示イベントを選択
トリガー配信条件 PagePathが次の正規表現に一致⇒ /blog/.*

:two: メニューの「タグ」⇒「新規」から、タグタイプでユニバーサル アナリティクスを選択し、タグの設定および先ほど作成したトリガーの登録を行う。

■設定例

項目 設定内容
タグタイプ ユニバーサルアナリティクス（Googleアナリティクス）
トラッキングタイプ イベント
カテゴリ 広告バナーインプレッション
アクション {{Page Path}}
ラベル （空白）
非インタラクション ヒット 真
トラッキング ID UA-xxxxxxxx-x

:three: プレビューモードでサイトにアクセスし、スクロール位置がバナー設置箇所に到達した時にタグが動作することを確認する。

:four: Googleアナリティクスのリアルタイムレポートでイベントが計測されていることを確認する。

:five: 公開ボタンを押してワークスペースの変更を反映させる。

以上の:one:~:five:が要素の出現をトラッキングするための手順になります。各項目の設定内容はご自身の用途に合わせて適宜ご修正ください。

##:mortar_board: 応用編:ソーシャルイベントをトラッキングする
オフィシャルのFacebookの「いいね」ボタンやTwitterのツイートボタンを使用している場合、Case1やCase2のクリックのトラッキングは適用できません。トラッキングするには以下のような流れが必要になります。

ソーシャルイベントのトラッキングの流れ

###:footprints: Facebook「いいね」のトラッキング

:one: メニューの「トリガー」⇒「新規」から、ウィンドウの読み込みイベントのトリガーを作成する。

ウィンドウの読み込みイベントのトリガー作成

■設定例

項目 設定内容
トリガーの種類 ウィンドウの読み込み
このトリガーの発生場所 すべてのウィンドウの読み込みイベント

:two: メニューの「タグ」⇒「新規」から、カスタムHTMLを選択し、Facebookのイベントハンドラの作成および先ほど作成したトリガー（ウィンドウの読み込みイベント）の登録を行う。

HTMLには以下のJavascriptを記述します。

<script>
FB.Event.subscribe('edge.create', function(targetUrl) {
  dataLayer.push({
    'event': 'socialActionEvent', 
    'socialNetwork': 'Facebook', 
    'socialAction': 'Like',
    'socialTarget': targetUrl
  });
});
</script>

FB.Event.subscribeはFacebookのイベントをキャッチし、コールバック関数を実行するFacebookグラフAPIです。第一引数の'edge.create'が「いいね」が押されたイベントを表します。コールバック関数内ではGoogleタグマネージャにデータを渡す役割を果たすデータレイヤーに値をセットしています。

データレイヤーには'event'という特別な変数が用意されており、これを利用してカスタムイベントを作成することができます。例では'socialActionEvent'というカスタムイベントを作成しています。'socialNetwork'、'socialAction'、'socialTarget'はタグに値を渡すために定義したデータレイヤー変数です。

:three: メニューの「トリガー」⇒「新規」から、先ほど作成したカスタムイベントのトリガーを作成する。

カスタムイベントのトリガー作成

■設定例

項目 設定内容
トリガーの種類 カスタムイベント
イベント名 :two:で指定したイベント名（例：socialActionEvent）
このトリガーの発生場所 すべてのカスタム イベント

:four: メニューの「タグ」⇒「新規」から、タグタイプでユニバーサル アナリティクスを選択し、タグの設定および先ほど作成したトリガー（カスタムイベント）の登録を行う。

タグの設定例

■設定例

項目 設定内容
タグタイプ ユニバーサルアナリティクス（Googleアナリティクス）
トラッキングタイプ ソーシャル
ネットワーク {{Social Network}}
アクション {{Social Action}}
アクションターゲット {{Social Target}}
トラッキング ID UA-xxxxxxxx-x

:five: プレビューモードでサイトにアクセスし、「いいね」を押した時にタグが動作することを確認する。

:six: Googleアナリティクスの「集客」⇒「ソーシャル」⇒「プラグイン」でイベントが計測されていることを確認する（反映されるまで時間が掛かる場合があります）。

イベントが計測されていることを確認

:seven: 公開ボタンを押してワークスペースの変更を反映させる。

以上の:one:~:seven:がFacebookの「いいね」をトラッキングするための手順になります。各項目の設定内容はご自身の用途に合わせて適宜ご修正ください。

###:footprints: Twitter「ツイート」のトラッキング

既に前述のFacebookの設定を行っている場合、イベントハンドラだけ作成すれば残りは共通で使いまわせます。

gtm.png

ここではイベントハンドラに設定するJavascriptだけ以下に記述します（FacebookとTwitterでイベント名を統一することがポイント）。

<script>
if (typeof twttr !== 'undefined') {
  twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function() {
      dataLayer.push({
        'event': 'socialActionEvent',
        'socialNetwork': 'Twitter',
        'socialAction': 'Tweet',
        'socialTarget': window.location.href
      });
    });
  });
}
</script>

##:moneybag: おまけ:JavaScriptエラーをトラッキングする
Googleタグマネージャはブラウザで発生したJavaScriptエラーもイベントとしてトラッキングすることができます（ただし、トラッキングできるのはタグマネージャが読み込まれた後に発生したエラーのみ）。

:one: 「変数」⇒「設定」から、組み込み変数「Error Message」、「Error URL」、「Error Line」、「Debug Mode」にチェックを付ける。

gtm.png

:two: メニューの「トリガー」⇒「新規」から、JavaScriptエラーイベントのトリガーを作成する。

gtm.png

■設定例

項目 設定内容
トリガーの種類 JavaScript エラー
このトリガーの発生場所 すべての JavaScript エラー

:three: メニューの「タグ」⇒「新規」から、タグタイプでユニバーサル アナリティクスを選択し、タグの設定および先ほど作成したトリガーの登録を行う。

gtm.png

■タグの設定例

項目 設定内容
タグタイプ ユニバーサルアナリティクス（Googleアナリティクス）
トラッキングタイプ イベント
カテゴリ JavaScriptエラー
アクション {{Error Message}}
ラベル Line {{Error Line}} of {{Error URL}} on {{Page URL}}
非インタラクション ヒット 真
トラッキング ID UA-xxxxxxxx-x

:four: プレビューモードでサイトにアクセスし、JavaScripeエラーが発生した時にタグが動作することを確認する。

:five: Googleアナリティクスのリアルタイムレポートでイベントが計測されていることを確認する。

gtm.png

:six: 公開ボタンを押してワークスペースの変更を反映させる。

以上の:one:~:six:がJavaScriptエラーをトラッキングするための手順になります。

また、必要に応じてGoogleアナリティクスの「カスタム」⇒「カスタムアラート」から、JavaScriptエラーのアラートを作成してメールで通知するようすると良いでしょう。

gtm.png

まとめ

Googleアナリティクスではちょっと面倒だったイベントトラッキングも、Googleタグマネージャなら既存のコードに手を加えることなく簡単に設定することができます。
PVやUU、直帰率などの数値の変動を観察するだけしかやってないという方は、今後の運用にイベント トラッキングを活用した仮説・検証のプロセスを組み込んでみてはいかがでしょうか？

  1. 非インタラクションヒットを真にした場合、イベント トラッキングが設定されたページでの 1ページのみのセッションは直帰としてカウントされます。逆に偽にした場合は直帰としてカウントされません。ユーザー インタラクションをエンゲージメントの根拠として重視する場合は偽に設定すると良いと思います。 ↩

  2. YoutubeプレーヤーのJavaScript APIを有効にするためのenablejsapiパラメータが自動的に付加されます。大抵の場合はチェックを入れておけば問題ないと思います。 ↩

35
41
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
35
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?