Eliminando parámetros de seguimiento con Cloudflare Workers

Eliminando parámetros de seguimiento con Cloudflare Workers

Los parámetros de seguimiento como utm_, gclid y fbclid en las URL pueden ser utilizados por especialistas en marketing y empresas para recopilar datos e información sobre sus campañas en línea y el comportamiento de los usuarios. Para Core Web Vitals pueden ser una pesadilla porque tienden a romper la funcionalidad de caché. Si buscas limpiar estos parámetros de seguimiento sin afectar tus analíticas, Cloudflare Workers ofrece una solución ligera y escalable.

En esta publicación del blog, te guiaré a través de un simple script de Cloudflare Worker para eliminar parámetros de seguimiento de las solicitudes entrantes mientras se preserva la funcionalidad principal de tu sitio.

El problema de caché con los parámetros de seguimiento

Si el caché no está configurado correctamente, los parámetros de URL causarán fallos de caché. Cuando los sistemas de caché almacenan páginas, dependen de la URL como clave de caché. Si una URL incluye parámetros de seguimiento (como ?utm_source=google o ?ref=partner), estos parámetros hacen que la URL sea única, incluso si el contenido es idéntico. Sin una configuración adecuada, esta singularidad obliga al servidor o al caché del borde a omitir la versión en caché de la página, resultando en un fallo de caché. En lugar de servir el contenido ya disponible, el servidor lo regenera o lo obtiene nuevamente, lo que lleva a un desperdicio de recursos y tiempos de carga de página más lentos.

¿Por qué no simplemente eliminamos todos los parámetros de URL? No todos los fallos de caché son malos—algunos parámetros realmente cambian el contenido de la página, como consultas de búsqueda (?q=laptops) o filtros dinámicos (?color=blue). Estos fallos aseguran que los usuarios vean resultados precisos y personalizados.

La clave es diferenciar entre parámetros que afectan el contenido y los que no. 

Cloudflare Workers

Cloudflare Workers te permite interceptar y manipular solicitudes en el borde. Esto lo convierte en una herramienta ideal para limpiar parámetros de seguimiento antes de que las solicitudes lleguen a tu servidor de origen. Así es cómo implementarlo:

El código

A continuación se muestra el script completo para eliminar los parámetros de seguimiento comunes:

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
}

Cómo funciona

• Interceptar solicitudes: La función addEventListener('fetch') escucha las solicitudes HTTP entrantes.
• Analizar la URL: La API de URL analiza la URL de la solicitud, facilitando la manipulación de los parámetros de consulta.
• Identificar parámetros de seguimiento: Una expresión regular (regex) identifica los parámetros de seguimiento comunes como utm_, gclid, fbclid y otros.
• Eliminar coincidencias: El método searchParams.forEach() itera sobre todos los parámetros de consulta. Cualquier parámetro que coincida con la regex se elimina usando url.searchParams.delete().
• Obtener URL limpia: La URL modificada se usa para obtener la respuesta, que luego se devuelve al usuario. 

Implementación

1. Inicia sesión en Cloudflare: Accede a tu panel de control de Cloudflare.
2. Crea un Worker: No navegues a tu sitio aún. Ve a la sección de Workers y crea un nuevo Worker.
   
3. Nombra el worker y despliega.  Este paso puede parecer un poco contraintuitivo, pero no te preocupes. Simplemente nombra tu worker vacío 'hello world' y haz clic en deploy.
     
4. Edita tu worker. En la siguiente página haz clic en Edit Code 
   
5. Pega el script: Copia y pega el script anterior en el editor. Luego haz clic en deploy
   
6. Vincula el Worker a una ruta: Ahora regresa y navega a tu sitio en CloudFlare. Haz clic en worker routes y luego en 'Add Route'. ¡Selecciona el worker recién creado y aplícalo a tu sitio!
   

Beneficios

• Caché mejorado: URLs más limpias aseguran un uso más efectivo del caché del borde y del navegador.
• ¡Control total! Aunque muchas soluciones de caché tienen su propia configuración, siempre es mejor tener control total. De esta manera no eliminamos los parámetros que queremos conservar y nos aseguramos de eliminar los que están interfiriendo con el caché del sitio.

Personalización

Puedes modificar fácilmente la regex para incluir o excluir parámetros específicos según tus necesidades. Por ejemplo, si deseas preservar ciertos parámetros utm_, ¡simplemente puedes eliminarlos de la regex!

Cómo encontrar qué parámetros de URL eliminar

Encontrar qué parámetros de URL eliminar es fácil si usas la herramienta adecuada. Las herramientas de seguimiento RUM como CoreDash monitorean tu sitio 24/7 y registran todas las cadenas de consulta y su impacto en el rendimiento. En CoreDash simplemente navega a Largest Contentful Paint y visualiza los resultados por cadena de consulta.