post

Criando seu Próprio Traqueamento (Track UTM) Permanente com JS + Formulário do Elementor

Publicado em: 22/03/2024 / Atualizado em: 22/03/2024

Categorias: BlogJavaScript (JS)JSUTM

O código abaixo tem 3 funcionalidades para um traqueamento avançado independente.

  • Armazenar parâmetros UTM na primeira visita
  • Adicionar parâmetros UTM à URL conforme o usuário navega no site
  • Preencher campos de formulário com parâmetros UTM após o DOM estar carregado

Isso faz com que você possa manter um rastreamento permanente do seu usuário que acessou uma URL UTM, mas você pode editar para flexibilizar facilmente. Segue código abaixo:

<script>
(function() {
  // Função para capturar e armazenar os parâmetros UTM na sessionStorage
  function storeUTMParams() {
    var utmParams = {};
    var hasUTMParams = false;
    new URLSearchParams(window.location.search).forEach(function(value, key) {
      if (key.startsWith("utm_")) {
        utmParams[key] = value;
        hasUTMParams = true;
      }
    });

    // Se parâmetros UTM foram encontrados e ainda não estão armazenados, armazená-los na sessionStorage
    if (hasUTMParams) {
      sessionStorage.setItem('utmParams', JSON.stringify(utmParams));
    }
  }

  // Função para adicionar os parâmetros UTM à URL da página atual
  function addUTMParamsToCurrentUrl() {
    var storedUtmParams = sessionStorage.getItem('utmParams');
    if (storedUtmParams) {
      var utmParams = JSON.parse(storedUtmParams);
      var urlParams = new URLSearchParams(window.location.search);

      // Verificar se algum parâmetro UTM já está na URL
      var shouldUpdateUrl = false;
      Object.keys(utmParams).forEach(function(key) {
        if (!urlParams.has(key)) {
          urlParams.set(key, utmParams[key]);
          shouldUpdateUrl = true;
        }
      });

      // Se necessário, atualizar a URL
      if (shouldUpdateUrl) {
        var newUrl = window.location.pathname + '?' + urlParams.toString() + window.location.hash;
        window.history.replaceState({path: newUrl}, '', newUrl);
      }
    }
  }

  // Função para preencher campos de formulário com os parâmetros UTM
  function fillFormFieldsWithUTM() {
    var storedUtmParams = sessionStorage.getItem('utmParams');
    if (storedUtmParams) {
      var utmParams = JSON.parse(storedUtmParams);
      
      Object.keys(utmParams).forEach(function(key) {
        var formField = document.querySelector('input[name="form_fields[' + key + ']"]');
        if (formField) {
          formField.value = utmParams[key];
        }
      });
    }
  }

  // Armazenar parâmetros UTM na primeira visita
  storeUTMParams();

  // Adicionar parâmetros UTM à URL conforme o usuário navega no site
  addUTMParamsToCurrentUrl();

  // Preencher campos de formulário com parâmetros UTM após o DOM estar carregado
  document.addEventListener('DOMContentLoaded', function() {
    fillFormFieldsWithUTM();
  });
})();
</script>

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/4792

ID de Referência: 4792

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários