【GTM】タグマネージャとjQueryを使ったEFO(フォーム改善)

所謂エントリーフォームオプティマイゼーション(Entry Form Optimization)というやつですが、Google Tag Managerを使ってサクッと出来たので、今回はテスト結果の共有です。
事前にjQueryを読み込んでいる前提でこんな感じのScriptを組んでみました。

var now;
 (function($) {
 $(document).ready(function() { 
  var clientId = ga.getAll()[0].get('clientId'); //"User ID"があれば"Client ID"よりもそっちを使うべきかも。
  //    var clientId = "{{utma}}"; //ga.jsの場合は個を特定する値としてutmaをファーストパーティクッキー経由で取得する。
  $(':input').focus(function () {
   now = new Date();
       dataLayer.push({'event': 'form', 'eventAction': 'focus', 'eventLabel': $(this).attr('name') + ',' + clientId + ',' + now.getTime()});
   });
  $(':input').blur(function () {
   if($(this).val().length > 0) {
   now = new Date();
       dataLayer.push({'event': 'form', 'eventAction': 'completed', 'eventLabel': $(this).attr('name') + ',' + clientId + ',' + now.getTime()});
   } 
   else {
   now = new Date();
       dataLayer.push({'event': 'form', 'eventAction': 'skipped', 'eventLabel': $(this).attr('name') + ',' + clientId + ',' + now.getTime()});
   }
  });
  },
 function newDate(){now = new Date();}
  );
 }
 )(jQuery);

やっていることは、Google Analyticsで必ず発行される「clientid」を取得してきます。
あとは、フォームの入力ボックスにフォーカスしたタイミング、離れるタイミングのそれぞれでイベントを飛ばします。ユニバーサルアナリティクスの場合はUser Idを入れると完璧ですよね。

Submit時にもClient Idを入れたり、エラーを検知したり、もっとデータを追加してもイイかも。

＜追記＞
凡ミスでjavascriptの呼び出し部分を変更しました。
あと、時刻をnow.getTime()にしているのでミリ秒表示です。

【参考】
Google Tag Managerに関するまとめ