Marketoフォームのメールアドレス入力欄がフリーアドレスの場合に送信を制限する

#Marketoフォームのメールアドレス入力欄がフリーアドレスの場合に送信を制限する
##始めに
<p>Webサイトのフォーム入力には何かしらのノイズが混じることがあります。フォームの種類や目的によってノイズの種類は異なりますが、例えば以下のようなノイズがあります。
<ul>
<li>営業目的</li><li>競合他社による情報を探る目的</li><li>悪意のあるフォーム入力（サーバー負荷など）</li><li>フリーアドレス（BtoBの場合）</li>
</ul>
</p>

<p>
「フリーアドレスでのフォーム入力」は、『リード獲得』の意味はありますが、ナーチャリングを考えたときに継続的なコミュニケーションにつながる可能性は低いため、ビジネス利用のメールアドレスを入力していただく必要があります。</p>

<p>
コミュニケーションにつながる可能性を高めるためにも、フリーメールでのフォーム入力の場合はマーケティングオートメーション（以下、MA）によってフォーム入力完了後に再度フォーム入力を促す自動配信メールを行うことはありますが、2度目のフォーム入力が行われる可能性は低いのが現状です。すなわち、1度目のフォーム入力の際にビジネス利用のメールアドレスを入力してもらう必要があります。</p>

<p>
これらを満たすためにMAの『Marketo』と、Googleタグマネージャ（以下、GTM）を利用した、Marketoフォームのメールアドレス入力欄がフリーアドレスの場合に送信を制限する（フォーム入力を完了させない）方法について、以下Marketo開発ブログを参考に実装を行いましたのでご紹介します。</p>

<p>※ソースコードは以下Marketo開発者ブログを引用させていただきました。<br>
<blockquote>
Restrict Free Email Domains on Form Fill Out（公開日：2014年9月9日）<br>
<a href="https://developers.marketo.com/blog/restrict-free-email-domains-on-form-fill-out/">https://developers.marketo.com/blog/restrict-free-email-domains-on-form-fill-out/</a>
</blockquote>
</p>

##実装手順
<p>以下手順によりJavaScriptコード（以下、JS）をMarketoフォームへ実装することで、目的とする動作を実現します。
<ol>
<li>除外するメールアドレスを棚卸し</li><li>JSコードの該当箇所にメールアドレスを記入</li><li>JSコードの該当箇所にフォーム送信拒否メッセージを記入</li><li>MarketoフォームにJSコードを反映</li>
</ol>
</p>

<p>
実装するJSコードは以下です。
</p>

```Javascript:.js
<script>
(function (){
  // 2.以下[“▲▲”]に除外対象のメールアドレスを記入
  var invalidDomains = ["@gmail.com","@yahoo.co.jp","@outlook.jp"];

  MktoForms2.whenReady(function (form){
    form.onValidate(function(){
      var email = form.vals().Email;
      if(email){
        if(!isEmailGood(email)) {
          form.submitable(false);
          var emailElem = form.getFormElem().find("#Email");
          //3.以下にフォーム送信拒否メッセージを記入
          form.showErrorMessage("フリーメールは登録できません", emailElem);
        }else{
          form.submitable(true);
        }
      }
    });
  });
  
  function isEmailGood(email) {
    for(var i=0; i < invalidDomains.length; i++) {
      var domain = invalidDomains[i];
      if (email.indexOf(domain) != -1) {
        return false;
      }
    }
    return true;
  }

})();
</script>
```

###1. 除外するメールアドレスを棚卸し
<p>どのテキストがメールアドレスに含まれていたらフォーム送信を制限するのか、制限対象とするメールアドレスの棚卸しを行います。
弊社ではフリーアドレスを除外したいため「@yahoo.co.jp」や「@gmail.com」などが該当のドメインです。<br>
注意点として、アットマーク「@」を含まずに除外対象とした場合、ドメインパート（「@」以下のメールサーバーを表す箇所）によっては意図していないドメインも制限されてしまう可能性があります。逆にアットマーク「@」以下のドメインパートがサブドメイン.ドメインとなるパターンもあるため、注意が必要です。
</p>

###2. JSコードの該当箇所にメールアドレスを記入
<p>以下JSコードの箇所に、1.で棚卸しを行ったメールアドレスを、2重引用符「”」で括り、メールアドレスごとにカンマ「,」で区切ります。</p>
<blockquote>var invalidDomains = [<font color="red">"@gmail.com","@yahoo.co.jp","@outlook.jp"</font>];</blockquote>
<p>ここで制限対象とするメールアドレスを指定します。</p>

###3. JSコードの該当箇所にフォーム送信拒否メッセージを記入
<p>以下JSコードの箇所に、実際に送信ボタンを押下した際にメールアドレス入力欄に表示するメッセージを記入します。例えば「フリーメールは登録できません」や「会社利用のアドレスを入力してください」などです。</p>
<p>
<blockquote>form.showErrorMessage("<font color="red">フリーメールは登録できません</font>", emailElem);</blockquote>
</p>

###4. MarketoフォームにJSコードを反映
<p>Marketoのランディングページテンプレートに該当のJSコードを記述します。共通のランディングページテンプレートを使っており、該当箇所を限定させたい場合は、GTMで配信対象を限定することをおすすめします。<br>
以下GTMでの設定手順になります。
<ol>
<li>GTMを開き、新規トリガーを作成</li>
<li>トリガータイプ「ページビュー」、トリガー発生場所「一部のページ」、対象ページを指定 ⇒ [ 保存 ]</li>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1440257/9ca13d10-e82a-70a3-18be-2d8802bb052d.png">


<li>新規タグを作成</li>
<li>タグの設定をクリックし「カスタムHTML」を選択</li>
<li>HTML記載箇所に、上記編集した<script>~</script>を含むソースコードを記述</li>
<li>トリガーに先程作成したトリガーを指定 ⇒ [ 保存 ]</li>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1440257/efa20c55-945d-e3d4-9569-0c25babdd43a.png">


<li>ページ右上の「プレビュー」より、設定したスクリプトが動作するかを確認</li>
※プレビュー選択後、対象ページをリロードすることで、GTMより配信されているタグをプレビュー画面で確認できます。<br>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1440257/6fa458e1-bb0b-b5a4-d912-5988d69b394c.png">


<li>プレビューを終了し、『公開』を行う</li>
</ol>
以上が設定手順です。
</p>

##最後に
<p>注意点として、ブラウザのJSを無効にすると動作しなくなります。また、ブラウザのキャッシュなどによってはJSが動作せずにフォームを通過する場合があります。
完璧な制御が難しいため、フォーム入力後に再度入力を促すなどの回避策を用意しておく必要があります。
</p>
<p>不要なリード作成によるデータベースの圧迫を避けることもできますので、興味のあるMarketo導入済み企業様は実装してみてください。</p>