Edited at

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


目的

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


  • hiddenの項目を追加したい

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

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

  • おまけ:Marketoフォームの入力内容をTreasureDataに送りたい

etcetc...

という部分で、リファレンス読んでやったことをまとめておきます。

まだまだMarketo初心者なので、それGUIで楽に設定できるよ!とかあればぜひご指摘ください!


はじめに

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

スクリーンショット 2018-10-22 19.37.13.png

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

<!-- 埋め込みコード例 -->

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

スクリーンショット 2018-10-22 19.35.33.png

ただ、簡単な分、自由に設定できない部分があったりするので

埋め込みコードをいじってやりたいことを実現していきたいと思います。

基本的には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を応用すると、loadFormvalsしておけばデフォルト値として扱ってくれる。

デフォルト値やバリデーション自体は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は読み込んでおいてください。


さいごに

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