GTMを用いてURLパラメータを抽出してHTML要素に付け加える

URLにGETで渡されているパラメータ値をHTMLの要素で出力する際に、どうしてもGTMを利用したい場合の方法解説です。
通常はファイルに直接記述するパターンが多いかと思いますが、マーケティング担当でファイルを直接編集する権限がないが、広告計測等のためにパラメータをピクセルタグ等につける場合に活用できるかと思います。

データレイヤ変数としてGTMにパラメータ値を渡す方法もありますが、今回はHTMLファイルを一切編集せずGTMのみで実装する方法となります。

実装したいことの確認

(例)

https://www.exapmle.com?param1=aaa&param2=bbb

このURLの状態でparam2(bbb)をimgタグのsrc属性の一部として以下のようなタグを発火させたい時

<img src="https://conversion.com?p=bbb" width=1 height=1>

param2についているパラメータを、imgタグ(ピクセルタグ)のsrc属性のパラメータとして付与したい、
このような需要がHTMLファイルの編集権限は無いが、GTMは操作できる広告担当の方からあるかと思います。
この場合、GTMで以下のような設定をします。

GTMの設定

タグ>カスタムHTMLを選択します。

HTML入力ボックスに以下コードを追加します。

HTML

<script type="text/javascript">
      var url = new URL(window.location.href);
      var params = url.searchParams;
      var value = params.get('param2');
      var cvTag = document.createElement('img');
      cvTag.src = "https://conversion.com?p="+value;
      cvTag.width = 1;
      cvTag.height = 1;
      document.body.appendChild(cvTag);
 </script>

実際に使用する際は以下の要素を適宜変更してご利用ください。

例での記載	設定項目
param2	URLに付与されているパラメータ名
cvTag.src	imgタグに設定したいアドレス
document.body.appendChild	出力したい箇所をDOMで指定
※広告タグの場合は多くの場合はbody直下で問題ないため、document.body.appendChildはそのままで大丈夫なことが多いです。

注意

GTMは基本的にはES6に対応していないため、constやletおよびテンプレートリテラルは利用できません。
また、id等を指定して、document.getElementById等をする方法も考えられますが、広告事業者側がタグの改変を認めていない場合があるため、id等の属性を付加しない方が無難です。（idくらいなら付けても問題はないのですが、たまに厳しいところがあります。）

参考