Account Engagement（旧：Pardot）フォーム埋め込みの方法を知っていますか？

2021.10.18

#pardot #Account Engagement #埋め込み #フォーム

Account Engagement（旧：Pardot）には、Webページに設置するフォーム作成機能があります。Account Engagementのフォーム機能を活用することにより、Webページ経由の見込み客情報をフォームから入手して、Account Engagementに記録することが可能です。
では、実際にランディングページのフォームは、どのように埋め込んでいるのでしょうか？

このページでは、Account Engagementのフォーム埋め込み方法について、フォーム作成方法とあわせて紹介します。
Account Engagementのフォーム埋め込みについて探している担当者に役立つヒントになるでしょう。

iframeによるAccount Engagementの埋め込みコード取得手順

はじめに、Account Engagementのフォームを埋め込む方法について解説します。フォームの埋め込みは、HTMLのコードを埋め込み先に設置するイメージです。

Account Engagementで作成したフォームをAccount Engagement以外の外部Webサイトで利用するには、iframeタグのHTMLコードを使います。
iframeタグとは、よくあるWebページにYouTube動画を埋め込んだり、Googleマップを埋め込んだりする際に見かける別サイトで読み込み表示する仕組みです。iframeタグの埋め込み設定手順は、次のようになります。

上記の手順によりAccount Engagementで作成したフォームの埋め込みが可能です。
Account Engagementで作成した以外の外部サイトソースコード内に埋め込めば、フォーム経由の情報をAccount Engagementに記録できるでしょう。

Account Engagementのフォーム埋め込み時のポイント

Account Engagementのフォーム埋め込み時には、問題が発生する場合もあるでしょう。
標準で作成したフォームのコードをiframeにより外部サイトに埋め込んだ場合です。

親ページのURLパラメータのiframeは、自動的に渡されない状態になります。自動でコードの受け渡しができないため、Google Analyticsの計測に支障をもたらすことが考えられるでしょう。

このような状態を解決するポイントは、Account Engagementのフォーム埋め込み時にJavaScriptを使います。
JavaScriptを使ったコード改変により、URLパラメータの値を同じようにロードすることが可能です。

以下に改変後のコードを紹介します。

<blockquote>
<noscript>
<iframe src="PARDOT_FORM_URL" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
</noscript>
<script type="text/javascript">
var form = 'PARDOT_FORM_URL';
var params = window.location.search;
var thisScript = document.scripts[document.scripts.length - 1];
var iframe = document.createElement('iframe');
iframe.setAttribute('src', form + params);
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', 500);
iframe.setAttribute('type', 'text/html');
iframe.setAttribute('frameborder', 0);
iframe.setAttribute('allowTransparency', 'true');
iframe.style.border = '0';
thisScript.parentElement.replaceChild(iframe, thisScript);
</script>
</blockquote>

データ引用元URL：https://help.salesforce.com/s/articleView?id=000317377&type=1

※コード改変に伴うエラーが発生した場合、弊社ではいかなる責任も負わないものとします。
必ずバックアップをとるなどして、注意しながら作業を行ってください。

Account Engagementのフォーム作成手順

Account Engagementのフォーム作成手順について解説しましょう。今回は、標準で設定されているフォームによる作成手順を紹介します。

名前の設定

まず、左メニューバーの最上部「マーケティング」を選び、表示されるリストの中から「フォーム」を選択しましょう。

「フォーム」のページに移動したら、さらび「フォーム」を選択して新規作成画面へと移動になります。新規作成画面から、必要事項の入力開始です。
この時点で次の情報の入力が必要です。

 

項目の設定

続いて、フォームに追加するべき項目の設定になります。フォームから「＋新しい項目」を選択し、項目を追加することが可能です。項目は、カスタマイズもできます。具体的には、次のような詳細項目です。

 

デザインの設定

フォームのヴィジュアル面の設定です。ボタンのデザインや画像や文字装飾まで、Webページのエディタ画面のように直感的に操作できます。

完了アクションの設定

最後に設定するのは、完了アクションです。フォームに訪れたユーザーがフォームを通過した時点で「完了」と認識されます。
完了した時点で、フォーム通過ユーザーに対して何らかのメッセージを送信する竹の設定です。設定するには、「＋新しい完了アクションの追加」を選択します。

OKならば保存

ここまでの設定で問題なければ、フォームは完成です。保存して終了します。
保存したフォームは、プレビューで確認することが大事です。

Account Engagementのフォーム作成におけるポイント

Account Engagementのフォームを作成する際の重要事項について解説します。
フォーム作成時には、入力するユーザーが離脱しないことを念頭において作る必要があるでしょう。

離脱を減らすための工夫として、フォームの入力項目を冗長にしないことや、送信ボタンの文章を魅力的にすることも大事です。

目的は、フォームに入力するユーザーのストレスを軽減することになります。Account Engagementのフォーム作成では、ユーザーに配慮した入力項目をカスタマイズできるため、機能を理解することがポイントです。

Account Engagementのフォームレポートでチェックできる情報

Account Engagementで作ったフォームによりフォームレポートでチェックできる情報について紹介します。
フォームレポートのチェックにより、次にあげるランディングページの効果を知ることが可能です。

• ページビュー数
• コンバージョン数
• クリック数
• 登録数
• エラー回数など

Account Engagementのフォーム運用におけるプログレッシブプロファイリングについて

Account Engagementフォームの運用におけるプログレッシブプロファイリングについて、解説します。
プログレッシブプロファイリングは、フォームの入力項目が多くなった場合に有効な機能です。

入力項目が多ければ多いほど、ユーザーの負担が増えて途中で離脱してしまうことが考えられます。
それによりコンバージョン率を下げることになるため、項目数を4～6項目に抑えて設定することが必要です。

具体的には、プログレッシブプロファイリングを設定すると、項目に沿って表示される入力項目を自動で変化させられます。手順は、次のとおりです。

1. 1. フォーム画面→「Fields」
   2. 「Fields」→「Add New Field」の編集ボタンを選択
   3. メニューバーの「Progressive」を選択
   4. 表示されたタブにチェックを入れる
   5. ドロップダウンで選択された項目が表示される

Account Engagementのフォームはデザイン重視ならばフォームハンドラ―

Account Engagementのフォーム作成は、作成したフォームをランディングページに設置するだけで活用できます。しかし、そのままの状態だと、フォームのチェック画面の設置やデザイン制限など課題もあるでしょう。

カスタマイズ性を高めるには、フォームハンドラ―を活用することも方法の1つです。
ただし、フォームハンドラ―でのフォームの作成はデザイン設定からすべて実行する必要があります。

フォームハンドラーの設定項目

Account Engagementでは、フォームハンドラ―によってフォームを詳細に設定することが可能です。フォームハンドラ―における設置項目を紹介します。

 

まとめ

今回の記事では、Account Engagementのフォーム埋め込み方法について、フォーム作成から埋め込み時のポイントなど紹介してきました。
単なるWebページのパーツとしてフォームを作成するのであれば、簡単に作れます。ただし、Account Engagementはマーケティングを目的にするツールです。

マーケティング目的としてフォームから収集できる見込み客のデータが活かされなければいけません。
その点をふまえて、フォーム埋め込み時のポイントについて解説してきました。
ぜひ、役立ててみてください。

＜MAツール運用＞
弊社ではAccount Engagementの導入から運用・課題解決までフルサポートさせていただいています。
自社で詳しい人間がいない、設定するが大変な方はぜひお気軽にお問い合わせください。
＞＞Account Engagementについてはこちらのページで詳しく紹介しています。