Remoção de Parâmetros de Rastreamento com Cloudflare Workers

Remoção de Parâmetros de Rastreamento com Cloudflare Workers

Parâmetros de rastreamento como os parâmetros de URL utm_, gclid e fbclid podem ser usados por profissionais de marketing e empresas para coletar dados e insights sobre suas campanhas online e comportamento do usuário. Para o Core Web Vitals, eles podem ser um pesadelo porque tendem a quebrar a funcionalidade de cache! Se você está procurando limpar esses parâmetros de rastreamento sem quebrar suas análises, o Cloudflare Workers oferece uma solução leve e escalável.

Nesta postagem do blog, vou orientar sobre um script simples do Cloudflare Worker para remover parâmetros de rastreamento de solicitações de entrada enquanto preserva a funcionalidade principal do seu site.

O Problema de Cache com Parâmetros de Rastreamento

Se o cache não estiver configurado corretamente, os parâmetros de URL causarão perdas de cache. Quando os sistemas de cache armazenam páginas, eles dependem da URL como uma chave de cache. Se uma URL incluir parâmetros de rastreamento (como ?utm_source=google ou ?ref=partner), esses parâmetros tornam a URL única, mesmo que o conteúdo seja idêntico. Sem a configuração adequada, essa exclusividade força o servidor ou cache de borda a ignorar a versão em cache da página, resultando em uma perda de cache. Em vez de servir o conteúdo já disponível, o servidor o regenera ou busca novamente, levando a desperdício de recursos e tempos de carregamento de página mais lentos.

Por que simplesmente não removemos todos os parâmetros de URL? Nem todas as perdas de cache são ruins—alguns parâmetros genuinamente mudam o conteúdo da página, como consultas de pesquisa (?q=laptops) ou filtros dinâmicos (?color=blue). Essas perdas garantem que os usuários vejam resultados precisos e personalizados.

O segredo é diferenciar entre parâmetros que afetam o conteúdo e aqueles que não afetam. 

Cloudflare Workers

O Cloudflare Workers permite interceptar e manipular solicitações na borda. Isso o torna uma ferramenta ideal para limpar os parâmetros de rastreamento antes que as solicitações cheguem ao seu servidor de origem. Veja como implementá-lo:

O Código

Abaixo está o script completo para remover parâmetros comuns de rastreamento:

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
}

Como Funciona

• Interceptar Solicitações: A função addEventListener('fetch') escuta as solicitações HTTP de entrada.
• Analisar a URL: A API URL analisa a URL da solicitação, facilitando a manipulação de parâmetros de consulta.
• Identificar Parâmetros de Rastreamento: Uma expressão regular (regex) corresponde a parâmetros comuns de rastreamento, como utm_, gclid, fbclid e outros.
• Remover Correspondências: O método searchParams.forEach() itera sobre todos os parâmetros de consulta. Qualquer parâmetro que corresponda à regex é removido usando url.searchParams.delete().
• Buscar URL Limpa: A URL modificada é usada para buscar a resposta, que é então retornada ao usuário. 

Implantação

1. Faça login na Cloudflare: Faça login no seu painel da Cloudflare.
2. Crie um Worker: Não navegue até o seu site ainda. Navegue até a seção Workers e crie um novo Worker.
   
3. Nomeie o worker e implante.  Esta etapa pode parecer um pouco contra-intuitiva, mas não se preocupe. Apenas nomeie o seu worker 'hello world' vazio e clique em Deploy.
     
4. Edite seu worker. Na página seguinte, clique em Edit Code 
   
5. Cole o Script: Copie e cole o script acima no editor. Então clique em Deploy
   
6. Vincule o Worker a uma Rota: Agora volte e navegue até o seu site na Cloudflare. Clique em worker routes e depois em 'Add Route'. Selecione o worker recém-criado e aplique-o ao seu site!
   

Benefícios

• Cache Melhorado: URLs mais limpas garantem um uso mais eficaz dos caches de borda e do navegador.
• Controle total! Embora muitas soluções de cache tenham sua própria configuração, é sempre melhor ter controle total. Dessa forma, não removemos os parâmetros que queremos manter e garantimos a remoção dos que estão interferindo no cache do site

Personalização

Você pode modificar facilmente a regex para incluir ou excluir parâmetros específicos com base em suas necessidades. Por exemplo, se você quiser preservar certos parâmetros utm_, você pode simplesmente removê-los da regex!

Como encontrar quais parâmetros de URL remover

Encontrar quais parâmetros de URL remover é fácil se você usar a ferramenta certa. Ferramentas de Rastreamento RUM como o CoreDash monitoram seu site 24/7 e registram todas as strings de consulta e seu impacto no desempenho. No CoreDash, simplesmente navegue até Largest Contentful Paint e veja os resultados por string de consulta!