Javascriptによる外部フォーム連携

※こちらエンジニア向けの説明となります。予めご了承ください

サイトデザインの観点から、もともと使用していたフォームをそのまま活用したいケースがあります。
メールアドレスとCookieを紐づける場合、通常のMAツールはそのツールが生成するフォームを使用する必要がありますが、GENIEE MA(以下MA)はその限りではありません。 MAフォームを使用せず、フォーム通過者のメールアドレスとCookieを紐づける方法です。


1.フォーム通過時の情報を受け渡すスクリプトの記述をする


フォームが載っているページにMAビーコンタグを設置の上、以下のようなスクリプトをMAのウェブビーコン用タグ直下に記述します。

以下の例では、追跡として、sampleIDを設定しています。
また、form_emailへsample@geniee.co.jpという文字列を受け渡し、form_last_nameへsampleという文字列を受け渡しています。

ma.Track("sampleID", {
"form_email": pb.StringValue("sample@geniee.co.jp"),
"form_last_name": pb.StringValue("sample")
});



※実際に受け渡す値は変数をご用意いただき、エンドユーザがWeb上で入力する値を渡す記述をお願いいたします

2.シナリオキャンバスで上記スクリプトで設定した追跡IDに対して動作するキャンバスを設定する

otherformconnect1.png (28 KB)
以下のようにシナリオキャンバス上で「追跡スターター」と「カスタマー変更アクション」を設置します。
この際、追跡スターターを以下のように設定することで、form_emailに文字列が入っている場合に次のノードへ進めるようにできます。

・追跡ID: sampleID
・条件: form_emailに文字列がセットされている

3.シナリオキャンバスでカスタマー変更をすることでカスタマーとして格納する

otherformconnect2.png (37 KB)
カスタマー変更アクションを以下のように設定することで、form_emailに入った文字列を標準フィールドのメールアドレスへ、form_last_nameに入った文字列を標準フィールドの姓(漢字)へ移し替えることができます。
設定した追跡スターターとカスタマー変更アクションを繋ぐことで、スクリプト経由で取得した情報からカスタマーを作成し、同時にメールアドレスとCookieを紐づけることができます。

・追跡モード: 追跡
・入力元: form_email, 出力先: メールアドレス
・入力元: form_last_name, 出力先: 姓(漢字)

※2つ以上のフィールドを更新する場合は、複数のカスタマー変更ノードを連続させず、1つのノードで全ての変更を定義してください(連続させた場合はどちらかの更新が失敗する可能性があります)

4.更にシナリオキャンバスでメール送信などを行う場合

otherformconnect3.png (199 KB)
カスタマー変更アクションノードの後ろにラベルアクションノードやスコアアクションノードといった、 カスタマーの情報を更新するノードを配置する場合、図のように一時停止ノードを間に挟んでください。

※一時停止ノードを挟まずに後ろにノードをつなげると、新規カスタマーが生成される前にラベルアクションノード等後続の処理が先行してしまうことで、 後続の処理が失敗する場合があります

5.「カスタムフィールドの型」と「JavaScript変数の型・スクリプト」との対応表

出力先のカスタムフィールドの型とスクリプトの型の対応表です。 型情報が間違っている場合、正しくカスタマーが作成されないため、ご注意ください。

型 JavaScript変数の型 スクリプト 備考
数値 Number pb.UintValue(num) または pb.SintValue(num) または pb.FloatValue(num)  
文字列 String pb.StringValue(str)  
日付 Date pb.Timestamp(d) JavaScript標準ビルトインオブジェクトのDateインスタンスをご指定ください。
日時 Date pb.Timestamp(d) JavaScript標準ビルトインオブジェクトのDateインスタンスをご指定ください。
単一選択 String pb.StringValue(label) カスタムフィールドで定義されている選択肢のラベルテキストをご指定ください。
複数選択 String pb.List(pb.StringValue(label1), ...) カスタムフィールドで定義されている選択肢のラベルテキストを、リスト形式でご指定ください(※メソッドシグネチャにご注意ください)。

以下具体例です。

型 スクリプト 備考
数値 pb.UintValue(100) pb.SintValue(-100) pb.FloatValue(100.0) 整数、符号、浮動小数点数に応じてスクリプトを変更してください。
文字列 pb.StringValue("09012345678") 電話番号や会員IDのように、数字のみで構成されていたとしても文字列として扱う必要のある情報は、文字列リテラルとして指定してください。
日付 pb.Timestamp(new Date("2020-02-02")) 文字列型ではない点にご注意ください。
日時 pb.Timestamp(new Date("2020-02-02 10:00:00")) 日時の場合は時刻も明確にして指定してください。
単一選択 pb.StringValue("公務員") 選択肢が 会社員, 公務員, 自営業, 学生, その他 のような単一選択型の例です。
複数選択 pb.List(pb.StringValue("Python"), pb.StringValue("JavaScript")) 選択肢が C, Ruby, JavaScript, Python, PHP, Perl のような複数選択型の例です。