wordpressで構築しているサイト中でパラメーターを保持したまま遷移したい

Question

実現したいこと

web広告（googleおよびyahoo）からきたユーザの動向をgoogle analyticsなどで正しく計測するため、wordpressで構築しているサイト中でパラメーターを保持したまま遷移したい。たとえば、掲載している広告がクリックされると、

https://example.com/?yclid=111111

のようなURLがブラウザに表示されるが、たとえばお問合せページに移動しても、

https://example.com/contact/?yclid=111111

のように、?の後ろのパラメーターを保持したままにしたいです。

前提

wordpressで作成されたサイトで、URLのパラメーターを画面遷移時に保持するためにはどのような方法がありますでしょうか？

検索してもjavascript、php、googleタグマネージャーでやるやり方など色々な方法がありどれがベストか判断しねています。

試したこと

googleタグマネージャー

https://dev.classmethod.jp/articles/keep-utm-parameters-when-going-around-in-a-website/

を参照に行いましたがうまく動いておりません。

補足情報

サイト内にメールフォームがあるため、それとバッティングしないかどうかが不安なのと、セキュリティ的に大丈夫な方法を知りたいです。

Answer 1

PHP などのサーバサイドスクリプトでクエリ文字列を操作するのは面倒なので、JavaScript で処理するのがよいでしょう。

それにしても参照された classmethod の記事にある JavaScript は2022年に書かれたとは思えないコードですね。

• https://codepen.io/arcxor/pen/zYJKOvY?a=1&b=2&c[]=31&c[]=32

(function() {
  'use strict';

  class CascadingQueries {
    // ['example.com'] or null, if null then any domains are targeted.
    static targetDomains = null;
    // ['foo', 'bar'] or null, if null then any queries are accepted.
    static targetQueries = null;

    static main() {
      delegateEvent('a[href]', 'click', (evt, anchor) => {
        const url = anchor.href;
        if (url === '') return;

        if (this.isTargetUrl(url)) {
          anchor.href = this.mergeUrlQueries(url, document.URL);
        }
      });
    }

    static isTargetUrl(url) {
      if (!Array.isArray(this.targetDomains)) return true;
      const urlObject = new URL(url);
      const hostname = urlObject.hostname;
      return this.targetDomains.includes(hostname);      
    }

    static isTargetQuery(key) {
      if (!Array.isArray(this.targetQueries)) return true;
      if (this.targetQueries.includes(key)) return true;
      // if targetQuery is `foo` and key is `foo[...]`
      if (this.targetQueries.includes(key.replace(/\[[^\]]*\]$/, ''))) return true;
      return false;
    }

    static getQueryParams(queriesUrl) {
      let params = null;
      try {
        params = new URL(queriesUrl).searchParams;
      }
      catch (e) {
        params = new URLSearchParams(queriesUrl.replace(/^\?/, ''));
      }
      return params;
    }

    static mergeUrlQueries(url, ...queries) {
      const urlObject = new URL(url);
      const params = urlObject.searchParams;
      for (const query of queries) {
        for (const [key, value] of this.getQueryParams(query)) {
          if (!this.isTargetQuery(key)) continue;
          // if key is `foo[]` or `foo[...]`
          if (/\[[^\]]*\]$/.test(key)) {
            if (!params.getAll(key).includes(value)) {
              params.append(key, value);
            }
          }
          // if key is `simpleKey`
          else {
            if (!params.has(key)) {
              params.set(key, value);
            }
          }
        }
      }
      return urlObject.href;
    }
  }

  function delegateEvent(selector, type, listener, options) {
    if (options == null) options = false;
    document.addEventListener(type, evt => {
      for (let elem = evt.target; elem && elem !== document; elem = elem.parentNode) {
        if (elem.matches(selector)) return listener.call(elem, evt, elem);
      }
    }, options);
  }

  CascadingQueries.main();
}());

Comments

[100nen]

プログラミングは不勉強のため、とても助かりました。chatGPTの力も借りながらやってみます。ご丁寧にありがとうございました。