LPでGTMのパラメータが反映されない場合の対応方法

広告バナーからLPに遷移し、最終的に申し込むまでの効果測定のためURLにパラメータをつけることはよくあります。
しかしそのパラメータが途中で途絶するとせっかく打った広告の効果測定が行ないと機会損失につながります。
もしそんな状況になった際の対応方法の一例です。

前提

LP側のリンクにパラメータを入れておく方法はいくつかありますが、流入経路が無数にあるので動的に取得する場合が多いと思います。
今回はURLのパラメータをJavaScriptで取得しLP内のaタグに付与する際の例になります。

うまくいかないパターン

例えば以下のJavaScriptではHTML読み込み後、aタグに対してパラメータを付与する処理をしています。
一見問題ないのですが、対象のページがNextやNuxtなどで生成されている場合にうまくいかない場合があります。

window.addEventListener('DOMContentLoaded', function(e){
  const param=location.search;
  if(param.indexOf("?")>=0){
    Array.prototype.forEach.call(document.querySelectorAll('a[href]'),function(x){
      var href=x.getAttribute("href");
      if(href.match(/^https?:\/\/.+/)){
        x.setAttribute("href",href+param);
      }
    });
  }
});

うまくいくパターン

以下のパターンはsetTimeoutで実行を遅らせたものです。
しかし通信環境によってはうまくいかない場合もありえます。

window.addEventListener('DOMContentLoaded', function(e){
  const param=location.search;
  setTimeout(function () {
	  if(param.indexOf("?")>=0){
	    Array.prototype.forEach.call(document.querySelectorAll('a[href]'),function(x){
	      var href=x.getAttribute("href");
	      if(href.match(/^https?:\/\/.+/)){
		x.setAttribute("href",href+param);
	      }
	    });
	  }
  }, 200);
});

もう少し安定的にパラメータを付与できるようにしたパターンです。
任意の秒数・回数をセットすることで可能な限りパラメータをセットできるようにしています。

window.addEventListener('DOMContentLoaded', function (e) {
  const param = location.search;

  function setParam() {
    if (param.indexOf('?') >= 0) {
      Array.prototype.forEach.call(document.querySelectorAll('a[href]'), function (x) {
        var href = x.getAttribute('href');
        if (href.match(/^https?:\/\/.+/)) {
          x.setAttribute('href', href + param);
        }
      });
    }
  }

  function repeatSetParam(interval, maxAttempts) {
    if (maxAttempts === 0) return;

    setTimeout(function () {
      const firstAtag = document.querySelector('a[href]');
      if (firstAtag && !firstAtag.href.match(/\?/)) {
        setParam();
        repeatSetParam(interval, maxAttempts - 1);
      }
    }, interval);
  }

  // 初期実行
  setParam();
  // 200msごとに最大5回（合計1000ms）試行
  repeatSetParam(200, 5);
});

まとめ

最近はLPはノーコードサービス（Studioなど）を使うことも増えてきました。
サービス側でのLP生成方法やユーザーの通信環境によって、今までのサーバーだと動いていたコードがうまく動かずにパラメータが引き継げない場合があるので一例として参考になったら嬉しいです。