Blogical

AWS/Salesforceを中心に様々な情報を配信していきます(/・ω・)/

Account EngagementフォームハンドラーとGoogleフォームの連携方法

こんにちは、ロジカル・アーツの西田です。
今回はAccount EngagementフォームハンドラーとGoogleフォームの連携方法をご紹介いたします。

はじめに

Account Engagementフォームを活用することで、資料ダウンロード目的の個人情報の取得、アンケートの実施などはもちろん可能です。
今回ご紹介するフォーム連携では、
運用しているGoogleフォームを活用し、Account Engagementでフォームを作り直すことなく、転記する方法を用いてAccount Engagement上で見込み客の情報収集が可能になります。

Googleフォーム作成

既存のGoogleフォームがある場合は作成不要ですが、以下で説明する設定内容をご確認ください。
「新しいフォームを作成」から「新規フォーム」を作成します。 メールアドレス項目はデフォルトで挿入されます。

Googleフォーム

「設定を変更」もしくは「設定」から設定を行います。

Googleフォーム

【設定①】
設定＞回答＞メールアドレスを収集する＞「回答者からの入力」（回答者はメールの応答を手動で入力します）
「確認済み」を選択した場合、回答者によるGoogle へのログインが必要になります。
※不特定多数の外部の方へ実施するため、「回答者からの入力」にします。

【設定②】
設定＞回答＞「回答のコピーを回答者に送信」＞「オフ」
※[回答のコピーを回答者に送信]を有効にすると、オリジナルHTMLページの連携が正常に動作しません。そのため、オリジナルHTMLページにGoogleフォームを連携させる場合は、「回答のコピーを回答者に送信」をオフ設定にします。

【設定③】
設定＞回答＞ログインの必須：「回答を1 回に制限する」をオフにしておけば、回答者によるGoogleログインの必要はありません。 Googleフォーム

次に、Account Engagementフォーム項目とマッピングしたい項目を作成します。今回は以下の項目を作成します。
①メールアドレス（デフォルトで挿入）
②氏名（姓）
③氏名（名）
④電話番号

※Googleフォームで必須入力にした場合、後のAccount Engagementフォームハンドラー設定でも必ず必須にしてください。
※Account Engagementと正確にデータ連携させるため、Googleフォームでも姓・名を分けて情報取得する必要があります。 Googleフォーム

作成後、右上の「送信」ボタンをクリックし、リンクをコピーしてください。別タブでURLを貼り付けて、このフォームの内容を表示しておきます。 Googleフォーム

Googleフォーム連携用のAccount Engagementランディングページ作成

Account Engagementでランディングページを作成します。
レイアウトテンプレートでHTMLを編集します。以下を例に、HTMLコードをレイアウトテンプレートのbodyタグ内に挿入します。必要に応じてCSSで調整を行ってください。

 <h4>AccountEngagement－Googleフォーム連携</h4>
    <form>
      <label>メールアドレス</label>
      <input name="email" placeholder="例：logical@example.co.jp" required="" type="mail" />
      <label>氏名（姓）</label>
      <input name="name" placeholder="例：山田" required="" type="text" />
      <label>氏名（名）</label>
      <input name="name" placeholder="例：太郎" required="" type="text" />
      <label>電話番号</label>
      <input name="phone" placeholder="例：11122223333" required="" type="text" />
      <button type="submit">送信</button>
    </form>

以下のようなランディングページ（中身はフォーム）が作成されます。

Account Engagementランディングページ（フォーム）

GoogleフォームとAccount Engagementランディングページを紐づける

デベロッパーツールでGoogleフォームのソースコードを確認し、method="POST"を探します。
<form action="https://docs.google.com/〇〇" target="_self" method="POST" id="mG61Hd">部分をコピーし、先程のHTMLのform部分へ貼り付けます。
そうすると以下のようなHTMLコードになります。

 <h4>AccountEngagement－Googleフォーム連携</h4>
    <form action="https://docs.google.com/〇〇" target="_self" method="POST" id="mG61Hd">
　  <label>メールアドレス</label>
      <input name="email" placeholder="例：logical@example.co.jp" required="" type="mail" />
      <label>氏名（姓）</label>
      <input name="name" placeholder="例：山田" required="" type="text" />
      <label>氏名（名）</label>
      <input name="name" placeholder="例：太郎" required="" type="text" />
      <label>電話番号</label>
      <input name="phone" placeholder="例：11122223333" required="" type="text" />
      <button type="submit">送信</button>
    </form>

次に、GoogleフォームとHTMLコードのNameを揃える必要があります。
メールアドレスは、Googleフォーム作成時、初期値で挿入されるため、Name属性は「emailAddress」固定になります。
その他のName属性はデベロッパーツールで「entry」で検索をかけます。
例）氏名（姓）【name属性】⇒ entry.199270975
Googleフォームの紐付けたい項目のName属性をそれぞれ切り出し、コードに貼り付けると以下のようなHTMLコードになります。

 <h4>AccountEngagement－Googleフォーム連携</h4>
    <form action="https://docs.google.com/〇〇" target="_self" method="POST" id="mG61Hd">
      <label>メールアドレス</label>
      <input name="emailAddress" placeholder="例：logical@example.co.jp" required="" type="mail" />
      <label>氏名（姓）</label>
      <input name="entry.199270975" placeholder="例：山田" required="" type="text" />
      <label>氏名（名）</label>
      <input name="entry.1283074606" placeholder="例：太郎" required="" type="text" />
      <label>電話番号</label>
      <input name="entry.1980573660" placeholder="例：11122223333" required="" type="text" />
      <button type="submit">送信</button>
    </form>


保存をし、ランディングページからフォームを送信してみます。 問題なければ以下のようなGoogleフォームの回答完了の表示になります。Googleフォームから［回答］を選択すると、フォーム送信した結果が確認できます。

Googleフォーム

Account Engagementランディングページとフォームハンドラーの連携

フォームハンドラーを作成します。

① 名前を入力、フォルダ・キャンペーンを選択
② 成功した場所へのデータ転送を有効化にチェック　※Googleフォームにデータを飛ばします
③ 成功した場所：特定のURL
成功した場所のURL：先程設定した<form action="https://docs.google.com/〇〇" target="_self" method="POST" id="mG61Hd">のhttps://docs.google.com/〇〇　を挿入
④ エラー発生場所：参照元URL
⑤ GoogleフォームからAccount Engagementに連携したい項目のマッピング
外部項目名：Name属性を設定（例： emailadress ）
プロスペクト項目：AE項目を選択（例：Email）
データ形式：データ形式を選択
必須チェック：必ずGoogleフォームで設定した必須条件と合わせること
※同一にしないとエラーになり、情報が取得できません

フォームハンドラー

保存するとエンドポイントURLが発行されます。
エンドポイントURL：https://go.demo.pardot.com/l/41〇〇〇〇〇〇〇〇

フォームハンドラー

上記URLをコピーし、AEランディングページの<form action=　のURLと書き換えます。
※必ずSSL化したURLを挿入してください。
<form action="https://docs.google.com/〇〇" target="_self" method="POST" id="mG61Hd">
↓
<form action="https://go.demo.pardot.com/l/41〇〇〇〇〇〇〇〇" target="_self" method="POST" id="mG61Hd">

最終的には、以下のようなHTMLコードになります。

    <form action="https://go.demo.pardot.com/l/41〇〇〇〇〇〇〇〇" target="_self" method="POST" id="mG61Hd">
      <label>メールアドレス</label>
      <input name="emailAddress" placeholder="例：logical@example.co.jp" required="" type="mail" />
      <label>氏名（姓）</label>
      <input name="entry.199270975" placeholder="例：山田" required="" type="text" />
      <label>氏名（名）</label>
      <input name="entry.1283074606" placeholder="例：太郎" required="" type="text" />
      <label>電話番号</label>
      <input name="entry.1980573660" placeholder="例：11122223333" required="" type="text" />
      <button type=“submit”>送信</button>
    </form>

Account Engagementランディングページからフォーム連携テスト

Account Engagementで作成したランディングページのフォームを入力してテストを行います。
フォーム送信後、Googleフォームの完了画面が表示されれば、成功です。

Googleフォーム

Account Engagementプロスペクトのアクティビティにも記録され、Googleフォームの情報にも記録されていることが確認できます。 プロスペクト情報

Googleフォーム

おわりに

Account Engagementランディングページ・フォームハンドラーを活用し、HTMLベースで編集を行うことで、Googleフォームと連携することが可能になります。
既存のGoogleフォームを活用しつつ、Account Engagementで見込み客の管理ができますので是非ご活用ください。