Garder les utm à travers les pages et les domaines

Garder les paramètres lors de la navigation à travers les pages et domaines

Language: Javascript

Catégorie : Tracking

<script>

(function () {
  var script = document.currentScript;
  var domainsToDecorate = script
    .getAttribute('domains')
    .split(',')
    .map(function (domain) {
      return domain.trim();
    });
  var queryParams = script
    .getAttribute('params')
    .split(',')
    .map(function (param) {
      return param.trim();
    });

  function decorateLinks() {
    var links = document.querySelectorAll('a');
    for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
      // Éviter de décorer plusieurs fois le même lien
      if (links[linkIndex].getAttribute('data-decorated') === 'true') {
        continue;
      }

      for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) {
        if (
          links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 &&
          links[linkIndex].href.indexOf('#') === -1
        ) {
          links[linkIndex].href = decorateUrl(links[linkIndex].href);
          links[linkIndex].setAttribute('data-decorated', 'true');
        }
      }
    }
  }

  function decorateUrl(urlToDecorate) {
    // Créer un objet URL pour manipuler les paramètres facilement
    var url = new URL(urlToDecorate);
    var existingParams = new URLSearchParams(url.search);
    var hasAddedParams = false;

    for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
      var paramName = queryParams[queryIndex];
      var paramValue = getQueryParam(paramName);

      // Ajouter seulement si le paramètre existe dans l'URL actuelle
      // ET n'existe pas déjà dans l'URL de destination
      if (paramValue && !existingParams.has(paramName)) {
        existingParams.append(paramName, paramValue);
        hasAddedParams = true;
      }
    }

    // Reconstruire l'URL seulement si on a ajouté des paramètres
    if (hasAddedParams) {
      url.search = existingParams.toString();
      return url.toString();
    }

    return urlToDecorate;
  }

  function getQueryParam(name) {
    var match = new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)').exec(
      window.location.search
    );
    if (match) {
      return decodeURIComponent(match[1]);
    }
    return null;
  }

  document.addEventListener('DOMContentLoaded', decorateLinks);
})();


</script>

Sommaire

Le script

Les attributes

Source du script

Utiliser un LLM pour résumer ou expliquer ce script

Le script

Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Keep Query Params -->
<script domains="justa.fr" params="utm_medium, utm_source, utm_campaign" src="https://cdn-scripts.justa.fr/dist/tracking/keep-query-params.js"></script>

Les attributes

Script

Nom

domains

Valeur

{identifier}

Ajouter les domaines pour lesquels vous voulez garder les paramètres d'URL. Séparer les valeurs avec des virgules
Exemple : justa.fr, app.justa.fr

Script

Nom

params

Valeur

{identifier}

Ajouter les paramètres d'URL (pas forcément des utm) que vous voulez garder lors de la navigation. Séparer les valeurs avec des virgules
Exemple : utm_source, utm_medium, utm_ campaign

‍

Code source du script

<script>

(function () {
  var script = document.currentScript;
  var domainsToDecorate = script
    .getAttribute('domains')
    .split(',')
    .map(function (domain) {
      return domain.trim();
    });
  var queryParams = script
    .getAttribute('params')
    .split(',')
    .map(function (param) {
      return param.trim();
    });

  function decorateLinks() {
    var links = document.querySelectorAll('a');
    for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
      // Éviter de décorer plusieurs fois le même lien
      if (links[linkIndex].getAttribute('data-decorated') === 'true') {
        continue;
      }

      for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) {
        if (
          links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 &&
          links[linkIndex].href.indexOf('#') === -1
        ) {
          links[linkIndex].href = decorateUrl(links[linkIndex].href);
          links[linkIndex].setAttribute('data-decorated', 'true');
        }
      }
    }
  }

  function decorateUrl(urlToDecorate) {
    // Créer un objet URL pour manipuler les paramètres facilement
    var url = new URL(urlToDecorate);
    var existingParams = new URLSearchParams(url.search);
    var hasAddedParams = false;

    for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
      var paramName = queryParams[queryIndex];
      var paramValue = getQueryParam(paramName);

      // Ajouter seulement si le paramètre existe dans l'URL actuelle
      // ET n'existe pas déjà dans l'URL de destination
      if (paramValue && !existingParams.has(paramName)) {
        existingParams.append(paramName, paramValue);
        hasAddedParams = true;
      }
    }

    // Reconstruire l'URL seulement si on a ajouté des paramètres
    if (hasAddedParams) {
      url.search = existingParams.toString();
      return url.toString();
    }

    return urlToDecorate;
  }

  function getQueryParam(name) {
    var match = new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)').exec(
      window.location.search
    );
    if (match) {
      return decodeURIComponent(match[1]);
    }
    return null;
  }

  document.addEventListener('DOMContentLoaded', decorateLinks);
})();


</script>