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

2021.10.18

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

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

iframeによるAccount Engagement（旧：Pardot）の埋め込みコード取得手順

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

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

• フォーム画面右端の「下向き黒矢印」ボタンから「HTMLコードの表示」を選ぶ
• フォームのHTMLコードが表示される
• <iframe></iframe>で囲まれていることをチェックして全文コピーする
• 外部Webページに貼り付ける

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

Account Engagement（旧：Pardot）のフォーム埋め込み時のポイント

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

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

このような状態を解決するポイントは、Account Engagement（旧：Pardot）のフォーム埋め込み時に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（旧：Pardot）のフォーム作成手順

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

名前の設定

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

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

名前：ページ名の入力（Account Engagement（旧：Pardot）内で区分するためのID名）
タグ：ページ量がある場合の対策（コンテンツのタグ管理に必要）
フォルダー：フォームの保存場所を変えるときに設定が必要（必要なければ標準のままで）
トラッカードメイン：ランディングページ用の独自ドメイン設定（「ドメイン管理」で事前準備）
キャンペーン：自社ビジネスに合わせたキャンペーンをフォームに対して設定

項目の設定

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

基本：フォームの基本的な設定
詳細：エラーが出たときのメッセージ設定
順次：ユーザーが再度フォームを通過した時点で表示させる項目の設定

デザインの設定

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

完了アクションの設定

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

OKならば保存

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

Account Engagement（旧：Pardot）のフォーム作成におけるポイント

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

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

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

Account Engagement（旧：Pardot）のフォームレポートでチェックできる情報

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

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

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

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

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

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

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

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

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

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

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

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

Folder：アイテムを保存するためのフォルダ
Tags：タグによりアイテムを活用
Campaign：コンバージョン後に登録されるソースキャンペーン
Success Location：Account Engagement（旧：Pardot）以外に情報を保存するためにページリダイレクトする設定
Error Location：フォーム登録のエラーによりページリダイレクトする際の設定

まとめ

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

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

弊社ではAccount Engagement（旧：Pardot）の導入支援を行っています。
お気軽にお問い合わせください！