Googleタグマネージャの仕組みを使った、フォーム入力イベントトラッキングのタグの作り方を紹介します。

GTMのイベントトラッキングの仕組みや独自のイベントリスナー作成の基本も説明しています。ユニバーサルアナリティクスを例にしていますが、従来のGoogleアナリティクスにも使えるテクニックです。

Googleタグマネージャのイベントトラッキングの仕組み

はじめに、Googleタグマネージャのイベントトラッキングの仕組みを説明します。Googleタグマネージャのイベントトラッキングは次の図のような構成になっています。

イベントトラッキングでは、タグを2つ使います。イベントリスナーでユーザーの操作などのイベントを捕捉して、もう一方のタグでUAやGAのトラッキングコードを配信します。次のような流れで動作します。

1. イベントが発生すると、イベントリスナーがpush() APIを呼ぶ。
2. push() APIは、データレイヤー変数にパラメータを設定し、イベントハンドラにイベント名を渡してルールを駆動する。
3. イベントのルールに一致するタグが配信される。
4.ルールやタグは、マクロを通してデータレイヤー変数を参照する。

イベントトラッキングを実現するには、イベントリスナーのタグ、ルール、マクロ、そしてイベントが発生したときに配信するタグを用意します。

Googleタグマネージャには予めクリックリスナー、リンククリックリスナー、タイマーリスナー、フォーム送信リスナーが用意されています。用意された以外のイベントを計測するときは自分でイベントリスナーを作成する必要があります。

実は、イベントリスナーの中にGAやUAのトラッキングコードまで組み込んでしまえば、このような複雑な仕組みを使わなくてもタグひとつでできてしまいます。しかし、上記のGoogleタグマネージャの仕組みを使ってタグを構成すると、他のタグにイベントリスナーを流用することができ、拡張性が高くなります。

フォーム入力イベントのトラッキング

今回はフォームの入力要素ひとつひとつの動作を計測します。Googleタグマネージャにはそのような入力を捕捉するイベントリスナーが用意されていないので、新しくイベントリスナーを作成します。

このトラッキング全体の構成は次の図のようになります。

 

図の流れを説明すると、まずフォーム入力リスナーをカスタムHTMLタグで作成します。フォーム入力リスナーは、フォームの入力要素が変更されたときにpush() APIを呼んで、パラメータをデータレイヤー変数に格納して、イベントハンドラにイベント名’formEvent’を渡します。ルールには、イベント名が’firmEvent’に等しいという条件のルールを作成します。マクロには、各データレイヤー変数を参照するマクロを追加します。UAフォーム入力イベントタグは、フォーム入力イベントが発生したときに、イベントトラッキングを発行してパラメータにデータレイヤー変数の値を渡します。

以下に具体的な手順を説明します。

jQueryを読み込む

イベントリスナーでjQueryを使用しているので、あらかじめhtmlにjQuery本体を読み込むコードを追加しておきます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

フォーム入力のイベントリスナーを作成する

新しいタグを追加します。タグの種類を[カスタムHTMLタグ]にして、次のように設定します。

HTMLには次のjavaScriptを入力します。

<script>
if(typeof jQuery != 'undefined'){
  $(function(){
    $('form').find(':text,:password,:radio,:checkbox,:file,select,textarea').change(function(){
      dataLayer.push({
        'eventAction': 'change',
        'eventElement': this,
        'eventElementId': this.id,
        'eventElementName': this.name || this.id,
        'eventElementType': $(this).attr('type') || this.tagName,
        'event': 'formEvent'
      });
    });
  });
}
</script>

JavaScriptの動作を説明すると、フォームの入力要素が変更されたとき、dataLayer.push() を呼んで、計測に必要な要素のidや属性をデータレイヤー変数に設定し、イベントハンドラにイベント名’formEvent’を送っています。

データレイヤー変数を参照するマクロを作成する

ルールやタグからデータレイヤー変数を参照するためのマクロを作成します。
新しいマクロを追加して、次のように設定します。

上記のようにしてデータレイヤー変数 eventAction を参照するマクロを作成します。

同じ手順で、eventElementName、eventElementType を参照するマクロも作成します。

これらのマクロを作成することで、ルールやタグから{{eventAction}}のように記述してデータレイヤー変数を参照できます。

フォーム入力イベントのルールを作成する

フォーム入力イベントが発生したかどうかを判定するルールを作成します。
新しいルールを追加して、次のように設定します。

条件はマクロ event が ‘formEvent’ に等しいときに成立します。これをタグの配信ルールで使用します。

イベントトラッキングのタグを作成する

イベントが発生したときに配信する、ユニバーサルアナリティクスのタグを作成します。
新しいタグを追加して、次のように設定します。

[トラッキングID]にはユニバーサルアナリティクスのプロパティIDを設定します。ここではマクロ{{UA ID}}にプロパティIDを定義しておいて、そのマクロを参照しました。

[トラッキングタイプ]を[イベント]にして、イベントトラッキングのパラメータを次のように設定します。

カテゴリ = Form
操作 = {{eventAction}}
ラベル = {{eventElementName}}#{{eventElementType}}
非インタラクションヒット = True

[非インタラクションヒット]をTrueにすると、イベントトラッキングが発生したとき直帰にならないのを防止します。直帰にしたくないときはFalseにします。

[配信のルール]に、先ほど作成した[フォーム入力イベント]を追加します。

プレビューとバージョン作成、公開

Googleタグマネージャの[プレビュー]で動作を確認したら、[バージョンを作成]、[公開]します。

正しく動作すれば、Googleアナリティクスのレポートの[リアルタイム＞イベント]または[行動＞イベント]で、入力要素毎の入力回数やフローを見ることができます。

従来のGoogleアナリティクスで使うには

今回はユニバーサルアナリティクスを使っていますが、2つめのタグ作成のときユニバーサルアナリティクスの代わりにGoogleアナリティクスを選ぶことで、従来のGoogleアナリティクスでも使用できます。

このようにGoogleタグマネージャの仕組みを使ってタグを構成すると、タグの変更や再利用が容易にできて、拡張性が高くなります。最初は仕組みを理解するのが大変かも知れませんが、拡張性やメンテナンス性を重視したい方はぜひ挑戦してみてください。

関連しているかもしれない記事

• Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」
• Googleタグマネージャとアナリティクスでソーシャルボタンをトラッキングする
• jQueryを使ったJavaScriptの書き方と、日本語入力モード制御の例
• jQueryプラグインの簡単な書き方と、ランダム表示プラグインの例
• Googleタグマネージャとアナリティクスで外部リンクのクリックをイベントトラッキング