> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nemu.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Elementor

> Este tutorial é destinado para você que possui uma página no Elementor e deseja utilizar um formulário de pré-checkout para capturar informações dos seus clientes. Vamos aprender a rastrear os parâmetros de UTM criando parâmetros URL no Elementor, de forma semelhante à criação dos campos do seu formulário.

## Rastreando Parâmetros de UTM no Elementor

### 1. Identificando os Campos UTM

Primeiramente, você deve identificar os campos que serão utilizados de acordo com o seu checkout. Aqui estão os campos típicos:

**Para Hotmart:**

* `src`
* `sck`

**Para outros checkouts:**

* utm\_source
* utm\_campaign
* utm\_medium
* utm\_content

Esses nomes deveram ser usados em todos os campos de identificação do campo que está sendo criado.

### 2. Criando Variáveis no Elementor

Agora, vamos criar as variáveis no Elementor para rastrear os parâmetros de UTM.

**Passo 1: Adicionar Novas Variáveis**

* Primeiro você deve encontrar o menu de edição do seu formulário semelhante a figura à baixo.
* Crie uma nova variável para cada campo listado anteriormente.

<img src="https://mintcdn.com/nemu/1PP-evrYzqGXeyQk/assets/pages/integracoes/elementor/1.png?fit=max&auto=format&n=1PP-evrYzqGXeyQk&q=85&s=377404b86d4e20dd98ba3239e87ee671" alt="" width="693" height="684" data-path="assets/pages/integracoes/elementor/1.png" />

### 2. Definindo o ID e Shortcode

**Em Conteúdo:**

* Defina o tipo do parâmetro como `oculto`.

**Em Avançado:**

* Defina o valor padrão como **Parâmetro de consulta**.
* Ao definir o valor padrão, aparecerão as **configurações avançandas**, nelas você deve definir o tipo como `GET` e o nome do parâmetro referente ao atual parâmetro.
* Defina um ID único para cada variável.
* Gere o shortcode correspondente para cada variável.

### 4. Adicionando Variáveis na URL de Redirecionamento

Com os campos criados, agora você precisa adicionar os shortcodes de cada campo na URL da função de redirecionamento do seu formulário. Isso garantirá que os parâmetros UTM sejam passados corretamente para o checkout.

**Exemplo de URL**

Aqui está um exemplo de como a URL pode ser estruturada:

`https://www.meucheckout.com/?email=[field id="email"]&src=[field id="src"]`

### 5. Finalizando a Configuração

* Salve todas as configurações no Elementor.
* Teste o formulário de pré-checkout para garantir que os parâmetros UTM estão sendo rastreados e passados corretamente para o checkout.

## Dicas Adicionais

* **Validação de Dados:** Certifique-se de que os dados dos parâmetros UTM estão sendo capturados corretamente em seu sistema de checkout.
* **Testes:** Realize testes com diferentes parâmetros UTM para verificar a funcionalidade e precisão.

## Código de Rastreamento

O código abaixo é um exemplo de como você pode rastrear os parâmetros de UTM no formulário do Elementor.

```html theme={null}
<script>
  var timer = setInterval(function () {
    var pixelPattern = /nemu_.{10}/;

    clearInterval(timer);
    var pixelTimer = setInterval(function () {
      if (pixelPattern.test(document.location.search)) {
        var params = new URLSearchParams(window.location.search);
        var src = params.get("src");

        var inputTimer = setInterval(function () {
          var inputUtmSrc = document.querySelector(
            "input[name='form_fields[src]']"
          );
          if (inputUtmSrc) {
            inputUtmSrc.value = src;
            clearInterval(inputTimer);
          }
        }, 100);
        clearInterval(pixelTimer);
      }
    }, 100);
  }, 100);
</script>
```