コンバージョン経路をセッションをまたいで計測して問い合わせデータと1対1で紐づける方法

著者:牧野健人

コンバージョンが発生するまでの経路をセッションをまたいで計測し、コンバージョンデータと1対1で対応させる方法を解説します。

これにより、例えば「A社さんは、最初にGoogleの自然検索でこのコラムから流入した後、Gのリスティング広告でトップページから流入してコンバージョンに至った」のような可視化が実現できます。

牧野健人

記事の著者牧野健人

株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

得られるデータ(各問い合わせのコンバージョン経路)

問い合わせデータとしてフォームで収集している項目に、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/に流入

補足

計測設定の手順

計測の設定は2ステップで完了します。技術的な知識はほぼ不要です(HTMLのコピペ程度)。

CVフォームにデータ取得用の不可視フィールドを追加する

各セッションのLPとリファラは後述するJavaScriptで取得・保存します。そして、そのデータをコンバージョン用のフォームの中に挿入することで問い合わせデータと結合します。

そのためのフィールドをフォームに追加することが第1ステップになりますが、これはユーザーに見せる必要が無い(見せるべきではない)ものなので、labelinputを囲うラッパーにdisplay:none;をかけ、inputtype属性も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のリスティング広告でトップページから流入してコンバージョンに至った」のように可視化できるようになります。

WebサイトのCV数を増やしたいなら無料相談 / お問い合わせ