0

Sou um pouco leigo no assunto, mas estou montando uma página de vendas de um produto e estou com uma grande dificuldade. Quero repassar as utms quem vêm via url, para alguns link contidos na página, de forma dinâmica.

A url vem assim: https://meusite.com?utm_source=teste&utm_campaign=teste&utm_content=teste

Gostaria de repassar esse utm quem vem na url para outros link que estão na página.

2
  • Assim eu utilizo esse parâmetros vindo das fonte de trafego como Facebook e o Google, assim [link] (meusite.com?src=teste) e no código fonte da pagina tem um link de check out que preciso leva as informações da url [link] (monetizze.com/dasdsd?src=utm-da-url) Commented 19/07/2018 às 23:07
  • Mas vc quer alterar TODOS os links da página ou apenas alguns?
    – Sam
    Commented 19/07/2018 às 23:28

3 Respostas 3

3

É possível fazer isso utilizando a API URL do JS em conjunto com a URLSearchParams

// Busca a URL atual de referência
const url = new URL('https://meusite.com?utm_source=teste&utm_campaign=teste&utm_content=teste')

// Acessa os parâmetros de busca da URL (query string)
const params = new URLSearchParams(url.search)

// Define o prefixo que identifica os parâmetros desejados
const prefix = 'utm_'

// Lista de parâmetros que deverão ser adicionados aos links da páginna
const toAdd = []

// Percorre os parâmetros da referência e cria a lista de parâmetros a serem adicionados
for (const [key, value] of params) {
  if (key.startsWith(prefix)) {
    toAdd.push([key, value])
  }
}

// Busca quais links da página precisam ser alterados
const anchors = document.querySelectorAll('a.utm')

// Percorre os links da página
for (let anchor of anchors) {
  // Busca a URL e os parâmetros de busca desse link
  const href = new URL(anchor.href)
  const params = new URLSearchParams(href.search)
  
  // Adiciona os novos parâmetros de busca
  for (const [key, value] of toAdd) {
    params.set(key, value)
  }
  
  // Atualiza o link
  href.search = params.toString()
  anchor.href = href.toString()
  
  // (opcional) Apenas para ficar visual no exemplo aqui
  anchor.textContent = href.toString()
}
<a href="http://localhost/?param=1">http://localhost/?param=1</a><br>
<a class="utm" href="http://localhost/?param=1">http://localhost/?param=1</a>

0

Para alterar TODOS os links da página, você pode pegar os parâmetros vindos na URL com location.href e extrair apenas a string a partir de ? usando o método .substring():

var url_ = location.href;
// url_ = https://meusite.com?utm_source=teste&utm_campaign=teste&utm_content=teste
var params = url_.substring(url_.indexOf("?"));
// params = ?utm_source=teste&utm_campaign=teste&utm_content=teste

Depois basta fazer um loop buscando todos os elementos <a> e concatenar a variável params ao atributo href de cada um:

// verifica se no params tem a string "?utm", caso contrário, não faz nada
if(~params.indexOf("?utm")){
   var as = document.querySelectorAll("a");
   for(var x=0; x<as.length; x++){
      as[x].href = as[x].href+params;
   }  
}

Código completo:

// aguarda o DOM ser carregado
document.addEventListener("DOMContentLoaded", function(){
   var url_ = location.href;
   var params = url_.substring(url_.indexOf("?"));

   if(~params.indexOf("?utm")){
      var as = document.querySelectorAll("a");
      for(var x=0; x<as.length; x++){
         as[x].href = as[x].href+params;
      }  
   }
});

Ou, se quiser que apenas alguns links sejam alterados, você precisa identificá-los de alguma forma. Pode colocar uma class, por exemplo, class="alt":

<a class="alt" href="link">Link 1</a>
<br>
<a href="link">Link 2</a>

O código abaixo irá alterar apenas os links com a classe .alt, ou seja, o href do link 1 será alterado, mas o do link 2 não:

document.addEventListener("DOMContentLoaded", function(){
   var url_ = location.href;
   var params = url_.substring(url_.indexOf("?"));

   if(~params.indexOf("?utm")){
      var as = document.querySelectorAll("a.alt");
      for(var x=0; x<as.length; x++){
         as[x].href = as[x].href+params;
      }  
   }
});
-1

Um pequeno ajuste para suportar links que já tem o ? na url...

  // aguarda o DOM ser carregado
document.addEventListener("DOMContentLoaded", function(){
   var url_ = location.href;
   var params = url_.substring(url_.indexOf("?"));

   if(~params.indexOf("?utm")){
      var as = document.querySelectorAll("a");
      for(var x=0; x<as.length; x++){
        //se já tem ? na url
        if(~as[x].href.indexOf("?")){
            as[x].href = as[x].href+params.replace("?", "&");
        } else {
            as[x].href = as[x].href+params;
        }
         
      }
   }
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .