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

## 目的

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

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

etcetc...

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

## はじめに

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

![スクリーンショット 2018-10-22 19.37.13.png](https://qiita-image-store.s3.amazonaws.com/0/36590/a0dce0a2-4ab6-368f-e3fe-04fb443443c8.png)

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

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

![スクリーンショット 2018-10-22 19.35.33.png](https://qiita-image-store.s3.amazonaws.com/0/36590/d0276b60-0adf-58c2-2f36-a4fa0da26b8f.png)


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

基本的には[Marketoのリファレンス](http://developers.marketo.com/javascript-api/forms/api-reference/)にあるとおりです。

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

* たとえば、ユーザには入力項目として表示したくない項目がある
* 動的に裏で値を設定したい項目がある

```js
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がっつり作り込んで、値はこっちで渡したい

```js

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の設定でできるが、動的に設定したい場合には使える。

```js

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


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

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

### やりかた

[本家のDocs](https://support.treasuredata.com/hc/en-us/articles/360000691187-Website-Tracking-with-Marketo-Forms)に書いてある通りです。
TD側にtableさえ作っておけば、フォーム送信時に存在しないカラムは自動で追加されます。
Marketoフォームの項目が増えても、TD側で追加しなくていいのは超ありがたい。

```js
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は読み込んでおいてください。

## さいごに

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