GTMとGAを組み合わせると、GTMの設定だけで簡単にページ単位の分析情報は取得することができます。しかし、1ページ内の入力項目が多くどこで離脱したかを分析するためにはテキストボックスのフォーカス時などにイベントを発行する仕込みが必要になります。

ここでは、テキストボックスへのフォーカス時にGAにイベントを送るGTMの設定方法を紹介します。この方法を使うとHTMLコードには修正を入れずに、GTMの設定のみで実現することができます。

カスタムHTMLタグでテキストボックスのフォーカスイベントを定義する

GTMのトリガーには「クリック（全ての要素）」があり、これを使うとIDなどを指定してボタンのクリックイベントを取得できます。しかし、テキストボックスへのフォーカス時にはこのトリガーを利用してもイベントを取得することができません。

テキストボックスへのフォーカス時にイベントを取得するには、まずカスタムHTMLタグで対象のテキストフィールドのonfocusを定義し、その中でdataLayer.pushを呼び出す必要があります。

カスタムHTMLタグのトリガーは「All Pages」でも「DOM Ready」でも動作します。

カスタムHTMLには以下のようなjavascriptを書きます。dataLayer.pushの第二引数は任意になります。

＜script＞
    var input_text = document.getElementsByName("input_text_name")[0];
    input_text.onfocus = function(){
      dataLayer.push({'event': 'input_text_onfocus'});
    }
＜/script＞

「ユニバーサルアナリティスク」タグを追加しトラッキングタイプ「イベント」とする

GA（ユニバーサルアナリティスク）のタグをトラッキングタイプを「イベント」にして追加します。カテゴリ、アクション、ラベル、値は分析に合わせて任意に設定します。

トリガーは「クリック　全ての要素」とし、Click IDなどでテキストボックスのIDを指定します。

以上の設定で、GAにここで設定したカテゴリ、アクション、ラベルでイベントが飛ぶようになります。