Google Analytics : ajout dynamique de chaînes de requête UTM aux liens sortants

Ajouter UTM paramètres de chaîne de requête vers sortants URL peut fournir des informations précieuses lors du suivi des campagnes marketing et des sources de trafic de référence. Cependant, compter sur les auteurs de contenu pour ajouter manuellement ces paramètres est sujet aux erreurs et souvent incomplet. Une meilleure approche consiste à ajouter dynamiquement des paramètres UTM aux liens externes à l’aide de JavaScript après le chargement de la page.

jQuery : Ajouter des chaînes de requête de campagne UTM

Voici une fonction JavaScript qui ajoute des paramètres UTM à tous les liens sortants d’une page à l’aide de jQuery :

<script>
window.addEventListener('load', function() {
  var domain = window.location.hostname; // Get current domain
  var pageTitle = document.title; // Get current page title

  // Find all external links
  $('a').filter(function() {
    return this.hostname && this.hostname !== window.location.hostname;
  }).each(function() {
    var href = $(this).attr('href');
    
    // Append UTM parameters to existing query string or create a new one
    var utmParams="?utm_campaign=referral&utm_source=" + domain + '&utm_content=" + encodeURIComponent(pageTitle);
    var separator = href.indexOf("?') !== -1 ? '&' : '?';
    $(this).attr('href', href + separator + utmParams.slice(1));
  });
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Ce code attache un écouteur d’événement au load événement, qui se déclenche une fois le chargement de la page et de ses ressources terminé. La fonction trouve alors tout <a> balises pointant vers des domaines externes en utilisant le hostname propriété. Pour chaque lien externe, il ajoute une chaîne de requête UTM contenant le referral campagne, le domaine actuel comme source et le titre de la page actuelle comme contenu.

Pour l’utiliser, vous devrez inclure jQuery sur votre page en ajoutant le <script> balise pour jQuery après le script personnalisé.

JavaScript : ajouter des chaînes de requête de campagne UTM

Bien que l’exemple ci-dessus utilise jQuery pour plus de commodité, vous pouvez obtenir la même fonctionnalité en utilisant Vanilla JavaScript :

<script>
window.addEventListener('load', function() {
  var domain = window.location.hostname;
  var pageTitle = document.title;

  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    var link = links[i];
    if (link.hostname && link.hostname !== window.location.hostname) {
      var href = link.href;
      var utmParams="?utm_campaign=referral&utm_source=" + domain + '&utm_content=" + encodeURIComponent(pageTitle);
      var separator = href.indexOf("?') !== -1 ? '&' : '?';
      link.href = href + separator + utmParams.slice(1);
    }
  }
});
</script>

Ce code attache un écouteur d’événement au load événement, qui se déclenche lorsque la page a fini de se charger. Il parcourt ensuite tout <a> balises, vérifiant si chaque lien pointe vers un domaine externe et ajoute la chaîne de requête UTM si c’est le cas.

L’utilisation de JavaScript simple peut éviter d’éventuels problèmes de version ou conflits avec des bibliothèques tierces comme jQuery.

Personnalisation des paramètres UTM

Les exemples ci-dessus incluent un utm_campaign valeur de referral, mais vous pouvez facilement modifier les valeurs des paramètres UTM en fonction de vos besoins. Par exemple, vous pouvez inclure des paramètres supplémentaires tels que utm_medium, utm_termou des noms de campagnes personnalisés en fonction du contenu de la page ou du comportement de l’utilisateur.

Grâce à cette approche dynamique, vous pouvez garantir un suivi UTM cohérent et précis des liens sortants sur votre site Web, sans compter sur la saisie manuelle des auteurs de contenu ni affecter les temps de chargement des pages.

Dans cet article, nous avons également expliqué comment ajouter des chaînes de requête UTM aux redirections WordPress :

Ajouter des chaînes de requête UTM aux redirections WordPress