見出し画像

【Pardotフォーム拡張】バナー💈▷回遊🔄▷CV🎯｜回遊しても流入ソースを保存する極小.jsライブラリを作った話

Toshihiko Tsuchiya (7ms)

こんにちは、Pardotとラーメン🍜をこよなく愛するツチヤと申します。

最近はPardotフォームを快適にする小ネタにハマっています。（こちらは過去記事です）
▷【保存版】Pardotフォーム埋め込みコード
▷ Pardotフォームで送信待ちアイコンを表示する

今回はフォーム拡張の第三弾記事です。
では、まずは背景から。

💈 バナー広告効果をキャンペーンに記録したい

バナー広告を思い浮かべてください。利用者がバナーから自社サイトに来訪し、フォームに申し込み、プロスペクト化したとします。この際、Pardot経由でSalesforceキャンペーンに、この情報を記録し、広告の効果測定をしたいとします。

一般的に、広告のコンバージョン数だけであれば比較的簡単にわかります。Google Analyticsや広告のコンバージョンリンカーを使ったりすれば良いですよね。しかし、「誰が」この時コンバージョンした人か？という情報を得るのは少し難しいはずです。ランディング即コンバージョンのようなケースであれば、かろうじてPardotでも記録できました。でも…

🔄 ページ回遊すると流入ソースが記録できない

広告に長けた方であれば、広告のランディングは通常導線とは分けておくのは常識かもしれません。ですが、ライトな広告施策であれば、バナーから製品やサービスのトップページに案内することもあるでしょう。

こうしたケースでは、利用者はサイト内を回遊し、その後フォームCVする導線が一般的。しかし、回遊するとどの広告から来てCVしたかという情報が失われ、Pardotに記録することはできません。（一応、utm_campaignを付与すれば、初来訪に関してはGAパラメータとしてPardotに保存されるようですが、この項目をオートメーション等で再利用するのは簡単ではありません）

それで周囲のPardotユーザーの方にこの手の事象で困っていないかお聞きすると「手作業で拾ってました」「アドエビス使ってました」とのこと。

そういえば、今月から自社でもバナー広告を本格的にはじめるのをすっかり忘れていました。しかし、いきなり新しいツールを入れている時間も予算もありません。

と、いうわけで…！（前置きが長くてすいませんでした）
バナーからどこにランディングしても、Pardotフォームに流入元情報を引き継げる、極小.jsライブラリを作ってみました！

⚙ 具体的にどう動くもの？

実際どう動くのかわからないとピンとこないですよね。

例えば、バナーの飛び先URLが https://mydomain/lp/ だったとします。そして、フォームが設置されているのは https://mydomain/form/ だったとします。

通常、広告にはutmパラメータなどを加えると思いますが、さらに何か流入ソースを記録するためのパラメータを加えてください。例えば、ad_typeだったとしますと、

https://mydomain/lp/?ad_type=sample&utm_...

のように新しいパラメータを付与します。

その後、利用者はサイト内をグルグル回遊して（ここ重要！）、最終的にフォームを設置したページで、Pardotのカスタム項目（ID：ad_type）をフォーム項目に入れておくと上記の smaple という値が項目に引き継がれます。

これが今回作った .js の主な機能です。

🐣 種明かしはcookie

ランディング・ページで、指定したパラメータ（上記であればad_type=sample ）をcookieに保存しておく関数を用意しました。そして、保存しておいたcookieを読み出してきて、フォームに渡す関数も作りました。この2つの関数を使い、離れたページ間でパラメータの受け渡しができるのです。

画像2

ちなみにランディング・ページはサイト内どのページでも構わないので、とりあえず全ページでこの.jsを読み込み、パラメータをcookie保存する関数を書いておけば、広告からどのページにランディングさせても、フォームできっちりパラメータを引き継げることになります。

⇩ ダウンロードおよび使い方

GitHubで公開しましたので、こちらからダウンロードしてください。

使い方についても詳しく記載しておきましたのでご参照ください。

📌 動作環境はIEを除くすべて

なお対応ブラウザは、IEのみ動作しません。ご了承ください。
ただし、パラメータ受け渡しが不可能なだけで、フォームはちゃんと動作しますので、他のブラウザ共通でフォーム設置ライブラリとして使用していただいても構いません。

🛠 簡単な設置手順

🟩 0. Pardotの準備

あらかじめ、Pardot側でプロスペクトのカスタム項目の作成、及び、上記カスタム項目を使ったフォームを保存しておいてください。

なお、検証の際には、フォームのカスタム項目は「非表示」ではなく「テキスト」を使った方が良いです。（本番で非表示にするのをお忘れなく）

🟩 1. plibform.js のダウンロード

上記のGitHubサイトからダウンロードしてください。ダウンロードの仕方がよくわからない人はこちら↓です。

画像1

🟩 2. ランディングページへの組み込み

ランディングページへ次の記述を追加してください。

<head>
 :
 
<script type="text/javascript" src="/(plib.jsを保存したpath)/plibform.js"></script>
<script type="text/javascript">plib_save('(流入パラメータ名)','(ドメイン名)');</script>

 :
</head>

(plibform.jsを保存したpath) / (流入パラメータ名) / (ドメイン名)の部分はそれぞれ環境に適した値に置き換えてください。

「流入パラメータ名」には、Pardotで設定したプロスペクト項目のID名が入ります。
「ドメイン名」は、親ドメインでも大丈夫です。例えば、www.mydomain.com と pardot.mydomain.com の両方を使用しているのであれば、mydomain.com とすればクロスドメインでもパラメータを受け渡せます。

例えば、こんな感じであればOK

// www.mydomain.com/?ad_type=banner をキャッチするには
<script type="text/javascript" src="/js/plibform.js"></script>
<script type="text/javascript">plib_save('ad_type','mydomain.com');</script>

🟩 3.フォームをページに設置する

フォーム設置ページには、次のようなコードを記載してください。この記述だけで、Pardotフォームのiframe設置が可能です。

この埋め込みコードは、前回の記事で作った埋め込みフォームコードを元にして関数化したものですので、縦幅の自動調節機能なども含まれています。

<div id="pardot-form" style="text-align:center;">
<script ></script>
<noscript><iframe src="（PardotフォームURL）" type="text/html" frameborder="0" allowTransparency="true" style="border: 0" class="pardot-iframe"></iframe></noscript>
</div>
<script type="text/javascript">
	plib_get('(流入パラメータ名)');
	plib_form('（PardotフォームURL）','pardot-form',(max-width),(default-height));
</script>

（PardotフォームURL） /  (流入パラメータ名) / (max-width) / (default-height)  の部分はそれぞれ環境に適した値に置き換えてください。

max-width は、フォームの最大横幅です。
default-height は、初期表示時のフォーム縦幅です。だいたいぴったりサイズにしておくと、エラー表示などがあった場合には自動で縦幅を広げてリサイズしてくれます。

🎊完成！

パラメータ付きでランディングページを開き、しばらく回遊したのち、フォームページを表示すると... いかがでしょうか、フォームに値が引き継がれたでしょうか？

🟩 4.キャンペーンに登録する

Pardot項目に保存出来たら、あとはオートメーションルールなりEngagement Studioなり、もしくはSalesforce項目に連携して、プロセスビルダーやフローを使い、キャンペーンに登録してあげてください。

🌟 他にも便利な機能を搭載

応用① 任意のフォーム項目に値を書き込む関数

フォーム項目に自由に値を書き込める関数も作っておきました。

plib_append("（Pardot項目ID）","（値）");

例えば、フォームにもう一つ非表示項目を設けておき、その値にはCMSで持たせたページタイトルなどを忍ばせておけば、フォームが送信されたページのタイトル名をPardotに保存できます。

テンプレート化した量産ページで同じフォームを使い回しつつ、どのページからフォーム送信されたのかを記録できるようになります。セミナーページや動画申し込みページとしてフォームを設置したい場合に便利です。

また、使うかどうかわかりませんが、あらかじめデフォルト値を入れておきたい時にも使えます。（プレースホルダーではないので、そのまま保存されてしまうことにご注意）

応用②cookieの保存期間を変更

デフォルトではセッションcookieとして保存しています。したがって、ブラウザを閉じるまでが保存期間です。（ただし、スマホの場合は期限がもう少し早い模様。iOSのSafariの場合は、3時間以内に消えていました。厳密な時間はわからず...）

この時間を変更したい場合は、3つ目のパラメータを使用してください。

<script type="text/javascript">
plib_save('(流入パラメータ名)','(ドメイン名)','（保存する秒数）');
</script>

max-age属性が指定されていますので、1時間保存したい場合は3600です。

応用③ 複数のパラメータを保存

plib_saveとplib_appendは、複数のパラメータを保存できるようにしておきました。
utmパラメータライクに、複数パラメータを組み合わせ、複数の項目に値を挿入できます。

plib_save('param1','mydomain.com');
plib_save('param2','mydomain.com');

としておけば、?param1=sampleA&param2=sampleB のように流入パラメータを複数cookie保存しておけます。

さいごに

Pardotのフォームはそこまで多機能ではないので、ちょっと複雑な場合はフォームハンドラーを使ってしまう場合も多いかもしれませんが、如何せんハンドラーの場合は自分でやるにしても人にお願いするにしても開発コストが上がりがちです。
このライブラリを使えば、省コストで複雑なことができます。

使ってみられた方はぜひ足跡がわりに記事に「スキ」していただけるとうれしいです！

この記事が気に入ったらサポートをしてみませんか？