Supprimer les paramètres de suivi avec Cloudflare Workers

Supprimer les paramètres de suivi avec Cloudflare Workers

Les paramètres de suivi comme les paramètres d'URL utm_, gclid et fbclid peuvent être utilisés par les spécialistes du marketing et les entreprises pour recueillir des données et des informations sur leurs campagnes en ligne et le comportement des utilisateurs. Pour les Core Web Vitals, ils peuvent être un cauchemar car ils ont tendance à casser la fonctionnalité de mise en cache ! Si vous cherchez à nettoyer ces paramètres de suivi sans casser vos analyses, Cloudflare Workers offre une solution légère et évolutive.

Dans cet article de blog, je vais vous présenter un script Cloudflare Worker simple pour supprimer les paramètres de suivi des requêtes entrantes tout en préservant la fonctionnalité principale de votre site.

Le problème de mise en cache avec les paramètres de suivi

Si la mise en cache n'est pas configurée correctement, les paramètres d'URL provoqueront des échecs de cache (cache misses). Lorsque les systèmes de mise en cache stockent des pages, ils s'appuient sur l'URL comme clé de cache. Si une URL inclut des paramètres de suivi (comme ?utm_source=google ou ?ref=partner), ces paramètres rendent l'URL unique, même si le contenu est identique. Sans une configuration appropriée, cette unicité force le serveur ou le cache en périphérie (edge) à contourner la version mise en cache de la page, ce qui entraîne un échec de cache. Au lieu de servir le contenu déjà disponible, le serveur le régénère ou le récupère à nouveau, ce qui entraîne un gaspillage de ressources et des temps de chargement de page plus lents.

Pourquoi ne supprimons-nous pas simplement tous les paramètres d'URL ? Tous les échecs de cache ne sont pas mauvais — certains paramètres changent véritablement le contenu de la page, tels que les requêtes de recherche (?q=laptops) ou les filtres dynamiques (?color=blue). Ces échecs garantissent que les utilisateurs voient des résultats précis et personnalisés.

La clé est de différencier les paramètres qui affectent le contenu de ceux qui ne l'affectent pas. 

Cloudflare Workers

Les Cloudflare Workers vous permettent d'intercepter et de manipuler les requêtes à la périphérie. Cela en fait un outil idéal pour nettoyer les paramètres de suivi avant que les requêtes n'atteignent votre serveur d'origine. Voici comment l'implémenter :

Le Code

Ci-dessous se trouve le script complet pour supprimer les paramètres de suivi courants :

addEventListener('fetch', event => {
  event.respondWith(fetchCleanUrl(event.request))
})

async function fetchCleanUrl(request) {
  const url = new URL(request.url)

  // Define a regex to match utm_, gclid, and fbclid query parameters
  const regex = /^(utm_|gad_|gclid|fbclid|srsltid|msclkid|dclid|referrer)/

  // Remove matching query parameters
  url.searchParams.forEach((value, key) => {
    if (regex.test(key)) {
      url.searchParams.delete(key)
    }
  })

  // Fetch the response from the modified URL
  const response = await fetch(url.toString(), request)

  return response
}

Comment ça marche

• Intercepter les requêtes : La fonction addEventListener('fetch') écoute les requêtes HTTP entrantes.
• Analyser l'URL : L'API URL analyse l'URL de la requête, ce qui facilite la manipulation des paramètres de requête.
• Identifier les paramètres de suivi : Une expression régulière (regex) correspond aux paramètres de suivi courants tels que utm_, gclid, fbclid, et autres.
• Supprimer les correspondances : La méthode searchParams.forEach() itère sur tous les paramètres de requête. Tout paramètre correspondant à la regex est supprimé à l'aide de url.searchParams.delete().
• Récupérer l'URL propre : L'URL modifiée est utilisée pour récupérer la réponse, qui est ensuite renvoyée à l'utilisateur. 

Déploiement

1. Connectez-vous à Cloudflare : Connectez-vous à votre tableau de bord Cloudflare.
2. Créez un Worker : Ne naviguez pas encore vers votre site. Naviguez vers la section Workers et créez un nouveau Worker.
   
3. Nommez le worker et déployez.  Cette étape peut sembler un peu contre-intuitive, mais ne vous inquiétez pas. Nommez simplement votre worker vide 'hello world' et cliquez sur déployer.
     
4. Modifiez votre worker. Sur la page suivante, cliquez sur Modifier le code 
   
5. Collez le script : Copiez et collez le script ci-dessus dans l'éditeur. Puis cliquez sur déployer
   
6. Liez le Worker à une route : Maintenant, revenez en arrière et naviguez vers votre site dans CloudFlare. Cliquez sur les routes de worker, puis sur 'Ajouter une route'. Sélectionnez le worker nouvellement créé et appliquez-le à votre site !
   

Avantages

• Mise en cache améliorée : Des URL plus propres garantissent une utilisation plus efficace des caches en périphérie et du navigateur.
• Contrôle total ! Bien que de nombreuses solutions de mise en cache aient leur propre configuration, il est toujours préférable d'avoir un contrôle total. De cette façon, nous ne supprimons pas les paramètres que nous voulons conserver et nous nous assurons de supprimer ceux qui interfèrent avec le cache du site

Personnalisation

Vous pouvez facilement modifier la regex pour inclure ou exclure des paramètres spécifiques en fonction de vos besoins. Par exemple, si vous souhaitez conserver certains paramètres utm_, vous pouvez simplement les supprimer de la regex !

Comment trouver quels paramètres d'URL supprimer

Trouver quels paramètres d'URL supprimer est facile si vous utilisez le bon outil. Les outils de suivi RUM comme CoreDash surveillent votre site 24h/24 et 7j/7 et enregistrent toutes les chaînes de requête et leur impact sur la performance. Dans CoreDash, naviguez simplement vers Largest Contentful Paint et affichez les résultats par chaîne de requête !