外部フォームでのMarketoデータ送信（空フォーム利用） | Community
Skip to main content
Shintaro_Toh
Adobe Employee
Shintaro_TohAdobe Employee
Adobe Employee
June 16, 2020

外部フォームでのMarketoデータ送信（空フォーム利用）

  • June 16, 2020
  • 3 replies
  • 2136 views

参考

以下のブログ記事を参考に、もう少し詳しくやり方を記述してみました。

https://developers.marketo.com/blog/make-a-marketo-form-submission-in-the-background-3/

ユースケース

Marketoフォームではないフォーム（非Marketoフォーム）の入力内容を、Marketoにもデータを入れたいし、別のプラットフォームにも入れたい＆タギング（cookie）も紐づけたい。

 

※JavascriptによるAssociate lead の非推奨化に伴う代替案としても利用可。

Munchkin API - associateLead メソッドの使用非推奨について

Deprecation of Munchkin Associate Lead Method

どうやって？

非表示のMarketoフォームを埋め込み、Forms2.0 APIを使ってデータを送信する。
※Associate lead APIで送信する方法もあるが、スクリプトの実装が必要だった。

実装方法

１）フィールドをすべて削除したフォームを作成。

送信ボタンだけが残るようにフィールドをすべて削除します。

また、フォーム入力後に遷移させるページの設定(「ありがとうございましたページ」の設定)を設定し、

「承認して終了」します。

２）埋め込みコードをコピーしてメモ帳ソフトに貼り付ける。

１で作成したフォーム画面で、「フォームアクション」＞「埋め込みコード」をクリックし、コード部分をコピーして端末のメモ帳ソフトに貼り付けます。

※フォーム作成直後は「埋め込みコード」が表示されない場合があるので、ブラウザを更新してから再度確認してください。

３）スクリプトに修正を加える。

メモ帳ソフトに貼り付けたコードの<form 〜 </form>の部分を以下のように書き換えます。

 

変更前

 

 

<form id="mktoForm_XXXX"></form>

 

 

 

変更後

 

 

<form id="mktoForm_XXXX" style="display:none"></form>

 

 

※XXXXの部分はフォームのIDが入ります。

４）３で修正した埋め込みコードをウェブページに埋める。

３で修正した埋め込みコードを、非Marketoフォームが実装されているページに埋めます。
※Tag Manager で実装も可能です。実装方法は後述「※参考※ Google Tag Managerでの実装方法」をご参照ください。

 

Marketoフォームは表示されていない。

５）Form2.0APIで、フォームの入力内容をMarketoに送信する処理を記述する。

Marketo Form 2.0 APIを使ってスクリプトを非Marketoフォームが実装されているページに記述していきます。

※位置は非Marketoフォームの下に記述

※Tag Manager で実装も可能です。実装方法は後述「※参考※ Google Tag Managerでの実装方法」をご参照ください。

①：関数名

任意の名前をつけます。

②：入力値を変数に代入

フォームの入力値を変数に代入します。
以下の形で指定します。変数名は任意です。

 

 

変数名＝[非Marketoフォームのname値].[非Marketoフォームのinputのname値].value

 

 

各値は非MarketoフォームのHTMLから取得する。

↓非MarketoフォームのHTML

 

 

 

 

A：[非Marketoフォームのname値] B：[非Marketoフォームのinputのname値]

 

 

 

 

非Marketoフォームにname値が設定されていない場合はフォームの管理者に設定してもらいましょう。

③Marketoへの送信データの設定

Marketoのフィールドと②で設定した変数をマッピングします。

左辺がMarketoフィールドのAPI名、右辺が②で設定した変数名です。

※最終行の末尾のカンマは不要です。あるとエラーになるので注意しましょう。

６）設定した関数を非Marketoフォームのsubmitのonclickイベントに設定

５-①で設定した関数を非Marketoフォームのsubmitのonclickイベントに設定します。

 

 

 

<input type="submit" onclick="関数名()">

 

 

 

という形で設定します。

こちらも非Marketoフォームの管理者に設定してもらいましょう。

※参考※ Google Tag Managerでの実装方法

ウェブサイトに直接実装できない！という場合でも、tag managerで実装することも可能です。

今回はGoogle Tag Manager (GTM)を例に紹介します。

※Google Tag Managerの細かい操作方法は省略しています。

 

①タグの作成

タグタイプを「カスタムHTML」としてタグを新規作成し、そこに４）と５）で修正したスクリプトを両方貼り付けます。

②トリガーはフォームのページでのみ起動するように設定をします。
例）emptyform/index_gtm_test.html を含むURLでのみ起動させる場合

 

③タグの名前をつけ、保存をクリックし、タグとトリガーを公開します。

７）動作確認

実際にデータを非Marketoフォームに入力して送信します。

 

Marketoにログインし、データベース＞すべての顧客から、該当のユーザを検索します。

 

きちんと入力した値が入っていることを確認

 

アクティビティログにも、ウェブページアクセスのログが入っていることを確認

 

あとは、Marketo外のプラットフォームにもきちんとデータが入っていることを確認します。

これで一通り完了です。

※完了画面に遷移しない場合

元々のフォームの作りによって、完了画面に遷移しない場合があります。その場合はMarketoフォーム側の「ありがとうございましたページ」の設定で完了画面のURLを指定してみてください。

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    3 replies

    h_kodono
    h_kodono
    Level 1
    November 22, 2021

    Toh様

     

    お世話になっております。

    ご質問させていただいてよろしいでしょうか。

     

    ご記入いただいている手順で実装しておりますが、こちらはスマートフォンからフォーム入力した場合、

    正常に動作しないなどの制約はありますでしょうか。

    もし、制約がある場合、スマートフォンで動かすためにはどのようにすればいいか

    ご教授いただけませんでしょうか。

     

    よろしくお願いいたします。

    Shintaro_Toh
    Adobe Employee
    Shintaro_TohAdobe EmployeeAuthor
    Adobe Employee
    November 30, 2021

    @h_kodono さま
    お返事遅くなり申し訳ありません。

    制約もなく、スマホだから正常動作しないということはないです。

    Shintaro Toh
      中
      中島カス
      April 19, 2022

      こちらの空フォームを使ったデータ送信を行っていますが、Marketoが受け取れないことがあります。

      当初はcookieが無いリード（ページのcookie利用の許諾無し）が落ちていると思っていましたが、実際は無関係に受け取れるのを確認したところです。

       

      本ページの指示通りに実装しているのですが、なにか細工が必要でしょうか。
      Marketoの技術者ページが全て英文のため、実装担当に指示ができず困っています。

       

      解決策または、検証方法など教えていただけないでしょうか。

      Shintaro_Toh
      Adobe Employee
      Shintaro_TohAdobe EmployeeAuthor
      Adobe Employee
      April 24, 2022

      @中島カス さま

      コメントありがとうございます。

      お返事遅くなり申し訳ありません。

       

      こちらの方法で実装いただいたのにもかかわらず、データがMarketoに飛ばないとのことですが、

      実装内容とNGになる状況を確認しないとなんとも言えないのが正直なところです。申し訳ございません。

       

      担当CSM（カスタマーサクセスマネージャー）またはサポートケースにお問い合わせいただけますでしょうか。

       

      お手数おかけして申し訳ございませんがよろしくお願いいたします。

      Shintaro Toh
      M
      mfrk5601
      September 25, 2023

      Toh様

       

      本件につきまして、質問させていただきたくご連絡差し上げました。

      突然のご連絡となり、失礼いたします。

       

      独自のHTMLで作成したフォームの回答をMarketoのカスタムフィールドへ連携したく、拝見しておりました。

      現在遷移の箇所で躓いておりまして、formタグのaction属性を"form.php"、ありがとうございましたページを外部URLのGoogleに設定しております。

      何度送信してもカスタムフィールドに値が反映されず、またページ遷移もうまくいかない状態です。

       

      変数等の記述は問題なくできており、環境によって変化する要因が遷移関連であろうとの予想から質問をさせていただいております。

       

      以下記述コードです。(IDなどは変更しております)

      ■---------------------------------------

      <form action="form.php" method="post" name="new">
                  <p>お名前(姓)：<span class="p-form__required">必須入力</span></p>
                  <input class="required form-text" type="text" name="last">
              <div>
                <input type="submit" onclick="mkto_push()">
              </div>
        </form>
       
        <script src="//xxx.mktoweb.com/js/forms2/js/forms2.min.js">
        </script>
        <form id="mktoForm_xxxx" style="display:none">
        </form>
        <script>
      MktoForms2.loadForm("//xxxx.mktoweb.com", "xxxx", xxxx);
        </script>
       
        <script>
        function mkto_push(){
      var myForm = MktoForms2.allForms()[0];
      var name = new.name.value;
       
      myForm.addHiddenFields({
      "API":name
      });
      myForm.submit();
        }
        </script>

      ---------------------------------------■

       

      ご意見頂戴できますと幸いです。

      何卒よろしくお願いいたします。

      M
      mfrk5601
      September 25, 2023

      var name = new.name(→lastの間違いです)

      Terms & ConditionsAccessibility statement

      Loading footer...