広告流入後のサイト内回遊時にURLパラメータを保持して広告効果測定の精度を上げたい

若槻龍太

2022.01.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

今回は、広告流入後のサイト内回遊時にURLパラメータを保持して広告効果測定の精度を上げる方法を確認してみました。

（01/24 追記）本記事では掲題の課題を「クエリパラメータをページ内のすべてのリンクに付与する」ことにより解決していますが、さらにベターな方法として別エントリで「クッキーを利用した方法」についても紹介しています。合わせて御覧ください。

広告流入した訪問者のURLパラメータを保持したい

リスティング広告やバナー広告などをクリックして訪問者がWebサイトに流入した際には、ランディングページのURLには代表的なものとして次のようなクエリパラメータが付与されます。

utm_medium
utm_source
utm_campaign
gclid

utm_xxxは、流入元のメディアやキャンペーンを識別するためのパラメータ（UTMパラメータ）です。gclidはGoogle広告の場合に付与されるクリック識別IDです。

そしてよくあるパターンとしては、広告のランディングページにサービスの申し込みや問い合わせフォームを設置して、フォーム送信時に現在のURLのクエリパラメータを取得して合わせて送信することにより、広告の効果測定に利用することができます。

しかし、訪問者が流入時にすぐに申し込みをするのではなく、サイト内の別ページを回遊した後にまたフォーム画面に戻ってきた場合は、広告流入時のクエリパラメータは保持できずに消えてしまっているため、フォームを送信しても広告効果測定が精度良く行えなくなってしまいます。

そこでこの問題を解決する方法を考えてみました。

ドンピシャな方法が紹介されていた

次のサイトでドンピシャな方法が紹介されていました。

Transfer UTM Parameters From One Page To Another with Google Tag Manager

紹介されていたのは、Google Tag ManagerのカスタムHTMLタグで次のようなJavaScriptスクリプトを実行するタグを利用する方法です。

<script>
  (function () {
    //クエリ付与対象とするリンクのドメイン一覧
    var domainsToDecorate = [
      'domain1.com',
      'domain2.net'
    ],
    //保持対象のパラメータ一覧
      queryParams = [
        'utm_medium',
        'utm_source',
        'utm_campaign',
        'gclid',
        'something_else'
      ];

    //ページ内のリンク（aタグ）をすべて取得
    var links = document.querySelectorAll('a');

    //ページ内のリンク毎の処理
    for (
      var linkIndex = 0;
      linkIndex < links.length;
      linkIndex++
    ) {
      for (
        var domainIndex = 0;
        domainIndex < domainsToDecorate.length;
        domainIndex++
      ) {
        //ページ内のリンクが対象ドメインの場合、リンクURLを置き換え
        if (
          links[linkIndex].href.indexOf(
            domainsToDecorate[domainIndex]
          ) > -1 &&
          links[linkIndex].href.indexOf('#') === -1
        ) {
          links[linkIndex].href = decorateUrl(
            links[linkIndex].href
          );
        }
      }
    }

    //ページ内のリンクURLに、現在のURLのクエリパラメータを連結
    function decorateUrl(urlToDecorate) {
      urlToDecorate =
        urlToDecorate.indexOf('?') === -1
          ? urlToDecorate + '?'
          : urlToDecorate + '&';
      var collectedQueryParams = [];
      for (
        var queryIndex = 0;
        queryIndex < queryParams.length;
        queryIndex++
      ) {
        if (getQueryParam(queryParams[queryIndex])) {
          collectedQueryParams.push(
            queryParams[queryIndex] +
              '=' +
              getQueryParam(queryParams[queryIndex])
          );
        }
      }
      //クエリパラメータがない場合はURL末尾の?を削除
      return collectedQueryParams.length === 0
        ? urlToDecorate.slice(0, -1)
        : urlToDecorate +
            collectedQueryParams.join('&');
    }

    //現在のURLのクエリパラメータを取得
    function getQueryParam(name) {
      if (
        (name = new RegExp(
          '[?&]' + encodeURIComponent(name) + '=([^&]*)'
        ).exec(window.location.search))
      )
        return decodeURIComponent(name[1]);
    }
  })();
</script>

コメントと、クエリパラメータがない場合はURL末尾の?を削除するようにしている（66-69行目で）以外はオリジナルのままです。

このタグにより、ページアクセス時に現在のURLのクエリパラメータをページ内のリンクに自動で付与できるようになるので、広告流入後にサイト内を回遊してもURLのクエリパラメータを保持できるようになります。

これを利用して今回の問題を解決してみます。

やってみた

対象のWebサイト

このようなWebサイト（https://jz6hl.csb.app/）を対象とします。このページが広告クリック後のランディングページとなります。

ページ内には同サイト（同ドメイン）の他のページへのリンクが設置されています。

またこのページのHTMLソースにはすでにGoogle Tag Managerのタグが設定済みです。

Google Tag Managerの設定

スクリプトの編集

前述のタグの冒頭を編集します。今回は、遷移先ドメインはjz6hl.csb.appのみ、保持対象のパラメータはutm_medium、utm_source、utm_campaign、gclidの4つです。

    //クエリ付与対処とするリンクのドメイン一覧
    var domainsToDecorate = [
      'jz6hl.csb.app'
    ],
    //保持対象のパラメータ一覧
      queryParams = [
        'utm_medium',
        'utm_source',
        'utm_campaign',
        'gclid'
      ];

ちなみにドメインはトップドメインだけを指定すればサブドメインも対象にしてくれます。