MarketoフォームをちょっとだけいじるTips

10774 ワード
TreasureData Marketo TreasureData テキストリンク

目的

Marketoフォームのデフォルト(GUI)設定でできないことを、もうちょっとだけ細かくいじりたい。たとえば...

  • hiddenの項目を追加したい
  • フォームのHTMLとCSSを独自で生成したい
  • 動的にデフォルト値を設定したい
  • おまけ：Marketoフォームの入力内容をTreasureDataに送りたい

etcetc...

という部分で、リファレンス読んでやったことをまとめておきます。
まだまだMarketo初心者なので、それGUIで楽に設定できるよ！とかあればぜひご指摘ください！

はじめに

Marketoでは、GUIでさくっと項目を選択してフォームを作成できます。

作成したフォームは、指定された埋め込みタグをページ入れることで、簡単に表示させることができます。

<!-- 埋め込みコード例 -->
<!-- パラメータは baseUrl, munchkinId, formId -->
<script>MktoForms2.loadForm("//app-sj17.marketo.com", "123-ABC-456", 1001);</script>

ただ、簡単な分、自由に設定できない部分があったりするので
埋め込みコードをいじってやりたいことを実現していきたいと思います。

基本的にはMarketoのリファレンスにあるとおりです。

1. hiddenの項目を追加したい

  • たとえば、ユーザには入力項目として表示したくない項目がある
  • 動的に裏で値を設定したい項目がある
MktoForms2.loadForm("//app-sj17.marketo.com", "123-ABC-456", 1001, function(form){
  // 項目を追加する
  form.addHiddenFields({COLUMN: 'test'}); // <input type="hidden" name="COLUMN" value="test">

  // ex. URLのパラメータをMarketoの任意のカスタム項目に登録する
  var url_params = new URLSearchParams(window.location.search);
  var test_param  = url_params.get('test_param_key');
  form.addHiddenFields({test_param_key: test_param});
});

ロード時にaddHiddenFieldsしておく。
他の入力値を取ってくるなど、送信時が良い場合は後述。

2.フォームのHTMLとCSSを独自で生成したい

  • inputなどいい感じにしなくていいので、HTMLがっつり作り込んで、値はこっちで渡したい

MktoForms2.loadForm("//app-sj17.marketo.com", "123-ABC-456", 1001);
MktoForms2.whenReady(function(form){
  // 項目を設定する
  var values = {
    Company   : $("input[name=company_name]").val()
    ,FirstName: $("input[name=user_name]").val()
    ,Email    : $("input[name=email]").val()
  }
  form.vals(values);
});

最初にフォームの埋め込みはしないで、入れ物は好きなように作る。
ボタン押したあとでjsでフォームをロードし、そのあとで値を設定するという流れ。
GUIでフォーム作成時に設定済みのカラムであればvalsで良い。

3.動的にデフォルト値を設定したい

1,2を応用すると、loadFormでvalsしておけばデフォルト値として扱ってくれる。
デフォルト値やバリデーション自体はGUIの設定でできるが、動的に設定したい場合には使える。


MktoForms2.loadForm("//app-sj17.marketo.com", "123-ABC-456", 1001, function(form){
  // 項目を設定する（デフォルト値とする）
  form.vals(｛Address: '神奈川県'｝);
});

おまけ： Marketoフォーム -> TreasureData に送りたい

Marketoフォームで入力された内容をTDに送りたい。
入力内容の集計など、1レコードずつ扱って処理したい場合にTDにデータを送っておきたくなります。

やりかた

本家のDocsに書いてある通りです。
TD側にtableさえ作っておけば、フォーム送信時に存在しないカラムは自動で追加されます。
Marketoフォームの項目が増えても、TD側で追加しなくていいのは超ありがたい。

MktoForms2.loadForm("//app-sj17.marketo.com", "123-ABC-456", 1001, function(form){
  // 項目操作したければここでごにょごにょする。さっきの項目追加とか

  // Marketoフォームが送信されたあとに実行する処理
  form.onSuccess(function(values, followUpUrl) {
    var td = new Treasure({
        writeKey:"xxxxxxxxxxxxxxxxxxxxx", // TDのwrite-key
        database: "TD_DATABASE_NAME" // 登録したいTDのDatabase名
    });
    td.set('$global', 'td_global_id', 'td_global_id'); // 3rd Party cookieがほしければ追加しておくと◎
    td.trackEvent("TD_TABLE_NAME", values); // 登録したいTDのtable名
    return true;
  });
});

大前提ですが、TDのSDKは読み込んでおいてください。

さいごに

もっといろいろできそう。