GTMでURLクエリパラメータでアクセスした時HTMLを書き換える設定を行う

Googleタグマネージャーでパラメータ付きURL、例えばA.html?test=hogeにアクセスした際、パラメータついていない場合は<p id="test">ホゲホゲ</p>と表示されるところ、パラメータ付きURLの場合<p id="test">フガフガ</p>に書き換えるには、JavaScriptを使用します。

設定手順

1. GoogleタグマネージャーにJavaScriptタグを作成します。
2. 以下のJavaScriptコードを貼り付けます。

<script>
    var queryString = window.location.search;
    var urlParams = new URLSearchParams(queryString);
    if (urlParams.get('test') == 'hoge') {
        document.getElementById("test").innerHTML = "フガフガ";
    }
</script>

3.タグをA.htmlにトリガーします。

これで、A.html?test=hogeにアクセスした場合のみ、<p id="test">ホゲホゲ</p>が<p id="test">フガフガ</p>に書き換えられるようになります。

結果

https://aaaikaaa.hatenablog.com/entry/2023/01/14/152955 https://aaaikaaa.hatenablog.com/entry/2023/01/14/152955?test=hoge

ホゲホゲ