目的
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は読み込んでおいてください。
さいごに
もっといろいろできそう。