「Microsoft Azure WebAppとGoogleアナリティクスを使えばA/Bテストができる」という記事を書いてきましたが、Googleタグマネージャーもうまいこと使えばEFOも実施できることに気づきました。
EFO（Entry Form Optimization ）とは、Webサイトの入力フォームを利用しやすいよう改善すること。また、そのような改善を行うサービス。「入力フォーム最適化」とも訳される。（IT用語辞典より抜粋）
どれだけA/Bテストで効果がいいデザインを選んでも、エンドユーザーが入力したくないフォームにしてしまうと本末転倒…ということで、EFOもサイトの改善には大切です。
今回は「ユーザーがフォーム内で入力を放棄する項目はどこなのか？」をザックリではありますが測定してみる方法を実践してみました。
まずはフォームを準備する
Microsoft Azure側はWebアプリを作成し、テスト対象となるフォームページを作成しておきます。（今回は「webtest-efo」というwebアプリを作成）
jQueryのフォーム項目の変更イベントリスナーを利用するので、ページにはjQueryを読み込んでおくのを忘れずに。
作成したフォームはこちら。
Bootstrapでサクッと作成してみました。
※テスト用なのでメール送信はできませんー。
また、GoogleアナリティクスとGoogleタグマネージャーの基本的な設定は、ついでにやっておきます。
フォームの項目にJavaScriptを仕込む
例えば、一番上の項目「名前」部分のソースはこんな感じ。
<input type="text" class="form-control" id="inputName" placeholder="Name" name="namae" onfocus="ga('send','event','focus','namae');">
name="namae" onfocus="ga('send','event','focus','namae');"
このように、フォームのinputタグにname属性を付与しておきます。
動作的には「inputタグのonfocus属性にsendコマンドを追加、event以降の2つの値を送信する」となります。
カスタムHTMLタグを作成
ここから「Googleタグマネージャー」を使います。
まずは登録用の「カスタムHTMLタグ」を作成しておきます。
1. jQueryのフォーム項目の変更イベントリスナーを利用。別の項目にフォーカスが移ったときに「dataLayer.push」を発行
2. dataLayer変数「formElementName」にinputタグのname属性を格納
3. Googleタグマネージャーのカスタムイベントとして「formElementFocus」を発生させる
上記の赤枠部分に必要な項目を入力。
トリガーを作成
イベントタイプが「カスタムイベント」のトリガーを作成します。
上記の赤枠部分に必要な項目を入力。
カスタムHTMLタグによって、フォームの移動があるたびにカスタムイベント「formElementFocus」が送信されるので、それを配信タイミングとします。
トリガー名は「FormOnFocus」としました。
変数を作成
種類が「データレイヤー変数」のユーザ―定義変数を作成します。
上記の赤枠部分に必要な項目を入力。
変数名を「formElementName」とし、データレイヤー変数名「formElementName」の値に紐づくようにしています。
Googleアナリティクスのタグを作成
イベントを送信するためのGoogleアナリティクスのタグを作成します。
上記の赤枠部分に必要な項目を入力。
トラッキングタイプは「イベント」とし、カテゴリを「FormCnange」、アクションを先ほど設定した変数「formElementName」とします。
「その他」を選ぶと既存のトリガーが表示されるので「FormOnFocus」にチェックを入れます。（配信するタイミングになります。）
ここまで設定できたら、タグの[プレビュー] ＞ [公開]を忘れずに！
これでGoogleタグマネージャーの設定は終わりです。
どういう仕組み？
今回はJavaScriptのonfocusイベントハンドラを使用します。
HTMLソースに直接挿入されたトラッキングコードでフォームの項目にフォーカスするには、onfocusイベントハンドラからGoogleアナリティクスに対してイベントを送信。
フォーカスされたフォーム項目のname属性がGoogleアナリティクスのイベントとしてカウントされます。
つまり「特定の項目からイベント数が少なくなっているようであれば、その項目がユーザーに入力を放棄させている原因になっている可能性がある」と考えられます。
例えばお問合せ数が伸びない場合、フォーム全体を改修するより「どの項目で放棄されたか」がわかった方が、より的確な改善ができますね。
最後に
A/Bテスト同様、EFOについても色々な会社が非常に優秀で使いやすいツールを提供してくれています。
より詳細に正確なデータを取りたい場合は、もちろん専門のツールを使うべきだと思いますが、今回の方法を使えば「やろうと思えばできるよ！」ということで。（設定も手間がかかりますが…）
予算をかけられないけど、EFOを試してみたい場合はいい方法かなぁと。
またAzureは「スロット」や「トラフィックルーティング」があるので、それをうまく使えばもっと面白いテストができそうだなぁと個人的には思っていますｗ
Azureを使ったA/BテストやEFOについてのご相談はお気軽にお声掛けください～！
こちらの本を参考にさせていただきました！
両方とも、とてもわかりやすくてオススメですー。
◆できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応
