エフトラEFOの入力支援機能が動かない?そんなときチェックしたい4つのポイント

専用管理画面でフォームの入力ページのHTMLを登録することで発行されるEFOタグを貼り付けて、入力支援機能のための必要な初期設定を管理画面で行えば利用開始できるエフトラEFOですが、特に初めて導入いただくお客さまには、タグ貼りまわりで少々苦労されるケースもあります。

今回は、過去にいただいたお問い合わせ内容を元に、設定したはずだけど入力支援機能が動かない場合のチェックポイントをご紹介します。お困りのときには是非チェックしてみてください。

チェックポイント1)EFOタグが入力ページに貼られていない

EFOを利用するための前提として、入力から完了に至る一連の遷移のなかで登場する各ページに、それぞれ専用のタグをページのHTMLに貼る必要があります。EFOタグは同じフォームのタグでも、入力ページ用、確認ページ用、完了ページ用でそれぞれタグは別の内容になります。それぞれ、ユニークに重複なく貼る必要があります。

目的のページにEFOタグが正しく貼られているかの確認方法

対象のページをブラウザで開き、ソースを表示して、そのなかにEFOタグが入っているかを確認する必要があります。ソースの表示方法には、ブラウザのソースを開く(CTR+U)方法と、ブラウザの開発者ツールでブラウザが読み込んだHTMLを確認する、という2通りの方法があります。

ただし、いわゆるタグマネージャーを使ってEFOタグを貼る場合は、ソースを表示の方法ではなく、開発者ツールを使う方法でソースを確認しましょう。ソースを表示のほうで表示されるソースは、タグマネージャーが処理をおこなう前の、サーバーからブラウザに送信されたままの内容なので、タグマネージャーのタグは見つかってもタグマネージャーのタグが呼び出すタグは含まれません。開発者ツールで表示するソースは、ブラウザがページ表示に必要な処理を終え、タグマネージャーも処理を一旦完了した後のソースなので、タグマネージャーのタグ、呼び出されるタグ、どちらの内容も確認可能です。

EFOタグを見つける方法を説明します。
EFOタグは、入力ページの本番タグは、


<script src="//xxx.f-tra.jp/ffconf/ffconf_0000_0000_0000.js" charset="utf-8" type="text/javascript"></script>
<script src="//xxx.f-tra.jp/track/efo2.js" charset="utf-8" type="text/javascript"></script>

テスト環境用タグは


<script src="//xxx.f-tra.jp/ffconf/ffconf_0000_0000_0000_test.js" charset="utf-8" type="text/javascript"></script>
<script src="//xxx.f-tra.jp/track/efo2.js" charset="utf-8" type="text/javascript"></script>

という形式の文字列です。「ソースを表示」「開発者ツール」どちらかの方法で表示したソースを、このffconfや、efo2という文字列で検索し、タグを確認しましょう。タグが見つかったら、EFO管理画面からダウンロードできるEFOタグと一致しているかを確認しましょう。

チェックポイント2)タグは貼られていたが、正しいタグではない

よくあるケースとしては以下があります。
・別のフォームのEFOタグを貼っている
・対象ページとEFOタグの対応がずれている

後者は、入力ページが複数ある場合にありがちです。
個人情報同意->ユーザー情報入力->支払い情報入力->確認->完了
というページ構成で、ユーザー情報入力ページが、EFOの登録上1つ目の入力ページである一方で、そのタグを個人情報同意ページに貼ってしまう、などです。

チェックポイント3)EFO管理画面で入力支援機能の設定がOFFになっている

本番環境用タグは、タグが貼られていて、さらに入力支援機能の設定がONになる必要があります。一方、テスト環境用タグの場合はEFO管理画面の入力支援機能の設定によらず入力支援機能が常にONになります。

チェックポイント4)登録されたHTMLが実際に表示されるHTMLではない

よくあるケースとして以下などがあります。
1)そもそも違うページのHTMLを登録してしまっている
2)対象ページのHTMLが、動的に内容が変わるものだった

後者については説明が必要でしょう。
EFOタグは、ブラウザが表示するページの解析を終え、ページの表示の準備が完了してから、入力支援機能を動作させるための処理を開始します。例えば、想定している入力項目が存在するかをひとつひとつチェックしたり、存在する入力項目には必要なイベントをバインドしたり、ガイド要素を追加したり、などです。

このEFOタグが入力項目の存在を確認する際、処理の流れは大きく以下の順番で実行されます。
※あらかじめどのように入力項目を探すかは、EFO管理画面にHTMLを登録することで決まっています。

・特定のname属性を持つ<form>タグを探す
・HTMLの上から特定の順番で登場する<form>タグを探す
・さらに<form>タグの子要素から
 ・<input>、<select>などのタグ名で探す
 ・type属性で探す
 ・name属性で探す

例えば、jQuery(‘form[name="contact"] input[type="text"][name="kana"]’)などのように、親要素からjQueryのセレクタの記法にならって目的の要素を探します。

このうち、入力ページのHTML内の<form>タグの順番は、入力ページの作られ方によっては順番が変わることがあります。例えば、サイト内検索の検索フォームが本来のフォーム送信の<form>タグよりも、HTMLのなかで先に追加されたりされなかったりという状況があり、name属性ではなく、順番で<form>タグを探しにいく処理だと、想定の順番で目的の<form>タグが見つからずに、入力項目が見つからないという状況に陥ってしまいます。その場合は、ページ側の動的な処理が終わったあとのHTMLを登録しましょう。ソースを表示ではなく、HTMLを開発者ツールで取得すればOKです。

いかがだったでしょうか?

1度、設定の流れに慣れてしまえば、導入は容易なはずのエフトラEFOです。今回のポイントを是非参考にしてスムーズに利用開始してください。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です