コンバージョン経路をセッションをまたいで計測して問い合わせデータと1対1で紐づける方法
コンバージョンが発生するまでの経路をセッションをまたいで計測し、コンバージョンデータと1対1で対応させる方法を解説します。
これにより、例えば「A社さんは、最初にGoogleの自然検索でこのコラムから流入した後、Gのリスティング広告でトップページから流入してコンバージョンに至った」のような可視化が実現できます。
得られるデータ(各問い合わせのコンバージョン経路)
問い合わせデータとしてフォームで収集している項目に、CVまでに発生した各セッションのランディングページのURLとリファラ(参照元)が追加されます。
例えば下記のようなイメージです。
- 社名
- 株式会社リラクス
- メールアドレス
- info@example.com
- 問い合わせ内容
- サイトのCV率を改善したいです。〜〜〜〜
- コンバージョン経路
-
- https://rilaks.jp/blog/improving-homepage/: https://www.google.com/
- https://rilaks.jp/: https://search.yahoo.co.jp/
- https://rilaks.jp/feed-forward/: none
コンバージョン経路は {セッションのLPのURL}: {リファラ(参照元)}の形式になっています。そのため、上記の例だと下記の意味になります。
1回目のセッション | 2回目のセッション | 3回目のセッション |
---|---|---|
Googleの自然検索からhttps://rilaks.jp/blog/improving-homepage/に流入 | Yahoo!の自然検索からhttps://rilaks.jp/に流入 | ダイレクトでhttps://rilaks.jp/feed-forward/に流入 |
補足
- 流入チャネルはLPのURLとリファラを見て判断します。例えばGoogleの自然検索とリスティング広告ではどちらもリファラはGoogleになりますが、広告であればLPのURLにパラメータがつくためそれで判断します。
- Webストレージを使用するため、クロスドメインでデータを計測することはできません(例えばフォームがサブドメインになっているなど)。
- 同じくWebストレージであることにより、同一ユーザー判定はブラウザを基準におこなわれます。
計測設定の手順
計測の設定は2ステップで完了します。技術的な知識はほぼ不要です(HTMLのコピペ程度)。
- CVフォームにデータ取得用の不可視フィールドを追加する
- JavaScriptのコードをサイトを設置する
CVフォームにデータ取得用の不可視フィールドを追加する
各セッションのLPとリファラは後述するJavaScriptで取得・保存します。そして、そのデータをコンバージョン用のフォームの中に挿入することで問い合わせデータと結合します。
そのためのフィールドをフォームに追加することが第1ステップになりますが、これはユーザーに見せる必要が無い(見せるべきではない)ものなので、label
とinput
を囲うラッパーにdisplay:none;
をかけ、input
のtype
属性もhidden
にしておきます。
注:自動返信メールにユーザーが送信した値を表示している場合は、メールにコンバージョン経路が記載されてしまう可能性があるため、必要に応じてケアしてください。
プレーンなHTMLの場合、例えば下記のようなコードになります。
<form action="submit.php" method="post">
<div>
<label for="name">氏名</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" required></textarea>
</div>
<div style="display:none;">
<label for="cv-journey">コンバージョン経路</label>
<input type="hidden" id="js-cv-journey" name="cv-journey">
</div>
<button type="submit">送信</button>
</form>
JavaScriptのコードをサイトを設置する
次に、各セッションのLPのURLとリファラを取得・保存して、フォームの不可視フィールドに挿入するJavaScriptをサイトに設置します。
下記のコードに対して後述の通り2箇所だけ差し替えをおこなった上で、サイトの内の全ページに設置してください。設置箇所は「body
区間のなるべく下の方」が推奨です。
// ランディングページとリファラ情報を保存する関数
const storeLandingPageAndReferrer = () => {
const sessionStart = sessionStorage.getItem('sessionStart');
if (!sessionStart) {
sessionStorage.setItem('sessionStart', 'true');
const referrer = document.referrer || 'none';
const landingPageAndReferrer = `${location.href}:${referrer}`;
const storedLandingPagesAndReferrers = localStorage.getItem('landingPagesAndReferrers');
const updatedLandingPagesAndReferrers = storedLandingPagesAndReferrers ? `${storedLandingPagesAndReferrers},${landingPageAndReferrer}` : landingPageAndReferrer;
localStorage.setItem('landingPagesAndReferrers', updatedLandingPagesAndReferrers);
}
};
// コンタクトフォームの不可視フィールドにランディングページとリファラ情報を設定する関数
// '/contact/'はフォームのパス、'js-cv-journey'は不可視フィールドのID
const setContactFormValue = () => {
if (location.pathname === '/contact/') {
document.addEventListener('DOMContentLoaded', () => {
const cvJourney = document.getElementById('js-cv-journey');
cvJourney.value = localStorage.getItem('landingPagesAndReferrers');
});
}
};
const setupLandingPageTrackingAndContactFormValue = () => {
storeLandingPageAndReferrer();
setContactFormValue();
};
setupLandingPageTrackingAndContactFormValue();
差し替え箇所は次の通りです。
20行目の/contact/ | 22行目のjs-cv-journey |
---|---|
あなたのサイトのコンバージョンフォームのページのパスに差し替えてください。 例えばhttps://example.com/form/contact/なら/form/contact/になります。 | フォームのHTMLに追加したコンバージョン経路用のinputタグのid属性の値に差し替えてください。 |
以上で計測設定は完了です。
これ以降、問い合わせデータの中にコンバージョン経路が含まれるようになり、例えば「A社さんは、最初にGoogleの自然検索でこのコラムから流入した後、Gのリスティング広告でトップページから流入してコンバージョンに至った」のように可視化できるようになります。