HubSpot

フォーム送信時にURLにパラメータを付与する

HubSpotフォームを利用してアフィリエイトのコンバージョンを計測するには?

実現したいこと / 背景

アフィリエイトサイトを利用しているウェブサイトへの実装です。フォームは、WordPressで作成されたページにエンベッドコードで埋め込んでいます。

フォーム送信後にリダイレクトされるサンキューページには、別途<head>内にアフィリエイトの計測タグが埋め込まれています。送信を識別するためのIDに電話番号を使用しているため、サンキューページに電話番号のデータを渡す必要があります。


データの渡し方

フォームに入力された電話番号の値をサンキューページのURLのパラメーターとして設定。ページ側では、PHPの$_GETで値を取得しています。

Image 2020-10-29 at 2.50.06 PM

実装のポイント

1. フォームに入力された電話番号の値を取得
$form.find('input[name="phone"]').val();

2. サンキューページのリダイレクト設定
window.location.href = "https//xxx.xxx.jp";

3. タイムラグが発生することを考慮し、リダイレクトするまで 2.5秒ほど間をとる

スクリプト

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "xxxxxxx",
formId: "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxxx",
inlineMessage: 'このページはリダイレクトされます',

onFormSubmit: function($form){
setTimeout(function() {
var website = $form.find('input[name="phone"]').val();
window.location.href = "https://www.100inc.jp/thanks?id=" + website;
}, 2500 ); // Redirects to url with query string data from form fields after 2500 milliseconds.
}
});
</script>

サンキューページのURL:
https://www.100inc.jp/thanks?id=000-000-0000