未分類

ランディングページのURLパラメータをリンク先に引き継ぐJavaScript

1. 目的

 訴求内容がサブスクリプション登録や、商品購入を目的とした、ブラウザ上で動くLPページを準備した。このLPページは、本サービスへ誘導するページとなっている。LPページへ広告やSNSから誘導をかけて、本サイト(AppまたはWebへ)へ誘導する。この時に、本サイトへの流入元情報は、LPページではなく、広告やSNSにしたい。LPページのJSを埋め込みことで、本サイトへのリンクの後ろに、LPページへの流入時のURLパラメータを引継ぎ処理を入れたい

SP Browser Infographic

2. 具体的な例

説明がわかりずらいため、実例を提示する

①LP(https://www.test.com/)にGoogle広告を出稿をする。その時の入稿URLは、以下のようになるとする。

https://www.test.com/?utm_source=google&utm_medium=ads&utm_campaign=kongo

②LPは本サイト(https://www.honmono.com/)への訴求を行っているページであるが、色々なマーケティングプランを使って、LPにユーザー誘導をしており、LPから本サイトへどれだけ誘導できたかというよりも、どこからかLPへ誘導したユーザーが本サイトへ誘導できたか把握したいため、LP上の本サイトへのリンクに以下のように流入時のURLパラメータを引き継ぎたい

https://www.honmono.com/?utm_source=google&utm_medium=ads&utm_campaign=kongo

本サイトのリファラードメインは、https://www.test.com/であるが、URLパラメータは?utm_source=google&utm_medium=ads&utm_campaign=kongo  のため集計上、Google広告から流入したと集計できる。これが実現したい事である。

3. 詳細設計

utmパラメータが付いていないケースもあるので、仕様を明確にしておく

1. utm_sourceとutm_mediumがある場合、本サイトへのリンクにutmパラーメタをそのまま引き継ぐ
 ※utm_source、utm_mediumがKEYもVALUEもある場合は、リファラードメインが取得できてもURLパラメータを優先させる

 ?utm_source=xxx&utm_medium=yyy&utm_campaign=zzz&utm_term=aaa


2. utm_sourceもしくはutm_mediumがない場合は、リラファードメインを取得しutm_sourceにセットする
 ※utm_source、utm_mediumのKEYなし、VALUEなしの場合もこの対応
 ※utm_source、utm_mediumはKEYもVALUEも必須。ない場合は、リラファードメイン情報へ

 ?utm_source={referreDomain}&utm_medium=referral&utm_campaign=&utm_term

3. utm_sourceもしくはutm_mediumがない場合で、リラファードメインも取得できない場合は、自分ドメインを入れる

 ?utm_source={自分ドメイン}&utm_medium=referral&utm_campaign=&utm_term

※全体的に、VALUEにundefinedという値が入らないようにない場合はutm_source=&utm_medium=&となる

4. コード

※この部分の修正(運用)が必要。本サイト(https://xxxxxx.com/)の例

  // hrefがxxxxxx.comのaタグのhrefにパラメータを付与する
  var anchorList = document.querySelectorAll('a');
  [].slice.call(anchorList).forEach(function(elem) {
    if (!elem.href.match(/^https://xxxxxx.com/)) {

以下のコードを上記の内容で修正し、</body>の直前に置く

<script>
(function() {
  var finalUrlParamsObj = {};
  var urlParams = location.search.substring(1).split('&');
  var referrerDomain = document.referrer.split('/')[2];

  if (urlParams[0] !== '') {
    urlParams.forEach(function(elem){
      var kv = elem.split('=');
      finalUrlParamsObj[kv[0]] = kv[1] || '';
    });
  }


  if (!finalUrlParamsObj.utm_source) {
    if (!referrerDomain) {
      finalUrlParamsObj.utm_source = location.hostname;
    } else {
      finalUrlParamsObj.utm_source = referrerDomain;
    }
  }

  if (!finalUrlParamsObj.utm_medium){
    finalUrlParamsObj.utm_medium = 'referral';
  }

  if (!finalUrlParamsObj.utm_campaign){
    finalUrlParamsObj.utm_campaign = '';
  }

  if (!finalUrlParamsObj.utm_term){
    finalUrlParamsObj.utm_term = '';
  }

  if (!finalUrlParamsObj.utm_content){
    finalUrlParamsObj.utm_content = '';
  }

  var finalUrlParamsString = getUrlParamsFromObject(finalUrlParamsObj);

  // hrefがxxxxxx.comのaタグのhrefにパラメータを付与する
  var anchorList = document.querySelectorAll('a');
  [].slice.call(anchorList).forEach(function(elem) {
    if (!elem.href.match(/^https://xxxxxx.com/)) {
      return;
    }
    if (elem.href.indexOf('?') !== -1) {
      elem.href = elem.href + '&' + finalUrlParamsString;
    } else {
      elem.href = elem.href + '?' + finalUrlParamsString;
    }
  });

  function getUrlParamsFromObject(urlParamsObj) {
    var urlParamsString = '';
    Object.keys(urlParamsObj).forEach(function(key) {
      urlParamsString += key + '=' + urlParamsObj[key] + '&';
    });
    return urlParamsString.substr(0, urlParamsString.length - 1);
  }
})();
</script>

*Appendix

GA4とGoogle Optimizeの連携

GA4とGoogle Optimizeの連携方法について説明しています。プロパティのリンクや、目標の設定など管理画面の設定内容と。GAとGA4の違いなどを説明

Google Optimizeのテスト期間とサンプル数について

ベイズ推定を用いて有意差検定を行うGoogle Optimize。少ないサンプル数でも優劣をつけるのが得意です。実験の有意差検定には、テスト期間とサンプル数がとても重要な要素です。

ABテスト設計ガイド

ABテストを行う際に事前に確認して言語化しておくべき内容を設計書としてまとめました。実験を成功に導くため見切り発車しないように設計書を事前に準備しましょう。

GA4/ABテストツールの選定

2023年9月30日をもって、Google Optimizeはサービス終了します。GA4と連携するABテストツールとして、候補に挙がるサービスをどのように選定していくかがとても重要

参考図書1: A/Bテストの教科書、カバ本です。お勧めです。

A/Bテスト実践ガイド

参考図書2: 効果検証入門〜正しい比較のための因果推論/計量経済学の基礎

効果検証入門

コメント

タイトルとURLをコピーしました