Google MAP API によるフォーム入力放棄の削減
フォーム入力を途中で放棄することは、通常の世界ではよく発生することだと言えます。多くの人はそれでも、顧客が「コンバート」する準備が整ったことを示す良い指標だと言うかもしれません。本ブログでは、フォームが放棄される一般的な理由について取り扱います。つまり、それは単にフィールドが多すぎるのです。
ユーザーがフォーム入力を完了しない理由は多くありますが、ある重要な事実が存在します。つまり、フィールドが多ければ多いほど、期待に沿わない結果が増えることになります。
それでは、フォームが保持すべき最適なフィールド数はいくつでしょうか。答えは簡単です。つまり、必須アイテム数です。
以下が、フォームの必須項目の良い例です。
- メールアドレス
- 電話番号
- 住所
- 都市名
- 州
- 国
- 郵便番号
お分かりの通り、完了するフィールドは 7 つあります。では、列挙するフィールド数を減らしながらも必要な情報を取得するにはどうすればよいでしょうか。
解決方法の一つは、Google Maps API を利用することです。
以下の例の両画像を評価してください。
いずれのページにもCTA (Call To Action) がありますが、左のフォームでは、コンバージョン率が結果的に 3-10 パーセント高くなります。
上記の解決策を実行するのに、Google Maps API と共にMarketo Form 2.0を利用し、一つのオートコンプリート型の住所フィールドを作成して必要データを Marketo に自動入力します。
それでは、始めてみましょう。
まず、3 つの可視フィールドと 4 つの非表示フィールドによって Marketo に新規フォームを作成します。可視フィールドの 1 つには住所用の Google Suggest API を使用します。ユーザーがアドレスを選択すると、 4 つのすべての非表示フィールドには必要データが補充されます。
ステップ 1： Marketo に新規のフォームを以下のように作成します。
Google Map オートコンプリート機能は window.HTMLInputElement (INPUT タグ)のみをサポートしています。従って、テキストエリアはサポートされていません。ステップ 2：次に、フォームの埋め込みコードを取得します。
以下のように表示されます。
<script src="//app-sj15.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1014"></form>
<script>MktoForms2.loadForm("//app-sj15.marketo.com", "343-RRE-559", 1014);</script>
ステップ 3：Google から API キーを取得するには、こちらの手順に従ってください。手順が完了したら、以下のように API キーを取得できます。
AIZaSybF1RmsRtcYGDoRe2tITKNJ9NJEwGn3uhK
ステップ 4：それでは、Marketo Form 2.0 の JavaScript 処理で、新規機能を追加します。
その結果は、ランディングページ上で以下のようになります。
<script src="//app-sj15.marketo.com/js/forms2/js/forms2.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIZaSybF1RmsRtcYGDoRe2tITKNJ9NJEwGn3uhK&libraries=places"></script>
<form id="mktoForm_1014"></form>
<script>
MktoForms2.loadForm("//app-sj15.marketo.com", "343-RRE-559", 1014,function(form) {
//Locate the field to trigger the auto-compleat
var location = document.getElementById('Address');
//Pass Google the field
var autocomplete = new google.maps.places.Autocomplete(location);
//Trigger the callback function
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
//Populate Marketo hidden fields
form.vals({"streetAddress":place.address_components[0]['long_name']+' '+place.address_components[1]['long_name'],
"City":place.address_components[3]['long_name'],
"Country":place.address_components[5]['short_name'],
"State": place.address_components[4]['short_name'],
"postalCode":place.address_components[7]['long_name']});
});
});
</script>
以下が、最終結果になります。訪問者は住所のサジェスト機能を使用して場所を選択すると、該当情報が非表示フィールドに入力されて、Marketo に送信されます。
従って、正確な少ないフィールド= 訪問者の嫌悪が少ないのでより多くの情報を取得できます。
この記事は、Moris Chenが投稿した"Reduce Form Abandonment with Google MAP API" を翻訳したものです。