Skip to main content

Utm's | Frontend

  • Utm's | Frontend

UTMs no frontend são parâmetros adicionados na URL para rastrear de onde veio o usuário.

Exemplo:

https://meusite.com/produto?utm_source=instagram&utm_medium=social&utm_campaign=black_friday

Esses pedaços utm_* ajudam ferramentas como Google Analytics, Meta, CRMs e sistemas internos a entenderem a origem do tráfego.

Os UTMs mais comuns​

utm_source​

Diz a fonte do tráfego.

Exemplo:

utm_source=instagram
utm_source=google
utm_source=newsletter

utm_medium​

Diz o meio/canal.

Exemplo:

utm_medium=social
utm_medium=cpc
utm_medium=email

utm_campaign​

Diz a campanha.

Exemplo:

utm_campaign=black_friday
utm_campaign=lancamento_curso

utm_term​

Normalmente usado para palavra-chave, muito comum em mídia paga.

Exemplo:

utm_term=curso_dotnet

utm_content​

Serve para diferenciar variações do anúncio, botão, banner ou link.

Exemplo:

utm_content=botao_azul
utm_content=header_banner

No frontend, para que isso serve?​

No frontend, UTMs costumam ser usados para:

  • capturar os parâmetros da URL
  • enviar isso para analytics
  • salvar localmente para usar depois
  • associar a origem do usuário a cadastro, lead ou compra

Exemplo em JavaScript:

const params = new URLSearchParams(window.location.search);

const utmSource = params.get("utm_source");
const utmMedium = params.get("utm_medium");
const utmCampaign = params.get("utm_campaign");

console.log({ utmSource, utmMedium, utmCampaign });

Exemplo prático​

Usuário clica em:

https://app.exemplo.com/signup?utm_source=instagram&utm_medium=social&utm_campaign=promo_maio

O frontend pode:

  1. ler esses parâmetros
  2. salvar no localStorage ou cookie
  3. mandar junto no cadastro

Exemplo:

localStorage.setItem("utm_source", params.get("utm_source") ?? "");
localStorage.setItem("utm_medium", params.get("utm_medium") ?? "");
localStorage.setItem("utm_campaign", params.get("utm_campaign") ?? "");

Depois, ao enviar um formulário:

const payload = {
  name: "Adolfo",
  email: "adolfo@email.com",
  utm_source: localStorage.getItem("utm_source"),
  utm_medium: localStorage.getItem("utm_medium"),
  utm_campaign: localStorage.getItem("utm_campaign"),
};

Resumindo​

UTM é basicamente um marcador de rastreamento na URL.

No frontend, ele serve para responder perguntas como:

  • esse usuário veio de onde?
  • veio de anúncio, email ou rede social?
  • qual campanha trouxe essa conversão?

Ponto importante​

UTM não é segurança, não é autenticação, não é dado confiável por si só. É apenas um dado de rastreamento, porque qualquer pessoa pode alterar a URL manualmente.