> For the complete documentation index, see [llms.txt](https://help.ticto.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.ticto.com.br/sou-produtor/trackeamento/como-fazer-trackeamento-perfeito-utilizando-utm-src-e-sck-na-ticto.md).

# Como fazer trackeamento perfeito utilizando UTM, SRC e SCK na Ticto?

## Índice

* [Como configurar](#como-configurar-o-script-de-utm-na-sua-pagina-de-vendas)
* [Versão do script por plataforma](#versao-do-script-por-plataforma)
* [Great Pages](#great-pages)
* [WordPress com PixelYourSite](#wordpress-com-pixelyoursite)
* [Como testar a configuração](#como-testar-a-configuracao)
* [Como funciona o script](#como-funciona-o-script)

***

## Como configurar o script de UTM na sua página de vendas

Para que os parâmetros UTM, SRC e SCK cheguem corretamente ao checkout da Ticto, é necessário adicionar um pequeno script na sua página de vendas. Ele captura os parâmetros da URL e os transfere automaticamente para o link do checkout no momento em que o cliente clica no botão de compra.

***

### Versão do script por plataforma

O script é o mesmo para todos os casos — o que muda é **o formato** esperado por cada plataforma.

{% hint style="info" %}
💡 Comece pela versão indicada para a sua plataforma. Se não funcionar, tente a outra versão. Caso nenhuma funcione, a plataforma pode exigir uma adaptação específica — nesse caso, recomendamos consultar um **desenvolvedor** para adequar o script à ferramenta utilizada. 
{% endhint %}

{% hint style="warning" %}
⚠️ Em ambas as versões, substitua `https://payment.ticto.app/O3893D2XX` pela URL real do seu checkout Ticto antes de salvar.
{% endhint %}

***

#### Versão 1 — Sem a tag `<script>` (Great Pages e similares)

Use esta versão em plataformas que possuem um **campo nativo de JavaScript**, onde o código é inserido diretamente sem tags HTML.

javascript:

```javascript
(function() {
  const utmParamQueryString = new URLSearchParams(window.location.search);
  if (utmParamQueryString.toString()) {
    var navLinks = document.querySelectorAll('a');
    navLinks.forEach(function(item) {
      if (item.href.indexOf('https://payment.ticto.app/O3893D2XX') !== -1) {
        if (item.href.indexOf('?') === -1) {
          item.href += '?' + utmParamQueryString.toString();
        } else {
          item.href += '&' + utmParamQueryString.toString();
        }
      }
    });
  }
})();
```

***

#### Versão 2 — Com a tag `<script>` (WordPress e similares)

Use esta versão em plataformas que aceitam **HTML no campo de scripts**, como campos de Footer ou Custom Code.

{% hint style="info" %}
Para wordpress é comum utlizar plugins para inserção do script, como o Pixelyoursite.
{% endhint %}

html

```html
<script>
  (function() {
    const utmParamQueryString = new URLSearchParams(window.location.search);
    if (utmParamQueryString.toString()) {
      var navLinks = document.querySelectorAll('a');
      navLinks.forEach(function(item) {
        if (item.href.indexOf('https://payment.ticto.app/O3893D2XX') !== -1) {
          if (item.href.indexOf('?') === -1) {
            item.href += '?' + utmParamQueryString.toString();
          } else {
            item.href += '&' + utmParamQueryString.toString();
          }
        }
      });
    }
  })();
</script>
```

***

#### Referência rápida por plataforma

| Plataforma                    | Versão recomendada | Onde colar                                     |
| ----------------------------- | ------------------ | ---------------------------------------------- |
| **Great Pages**               | Sem `<script>`     | Engrenagem → JavaScript e CSS → aba JavaScript |
| **WordPress + PixelYourSite** | Com `<script>`     | Seção PixelYourSite → Footer (any device type) |
| **Elementor**                 | Com `<script>`     | Configurações da página → Custom Code → Footer |
| **Wix**                       | Com `<script>`     | Configurações → Custom Code                    |
| **Webflow**                   | Com `<script>`     | Page Settings → Custom Code → Footer           |
| **Unbounce**                  | Com `<script>`     | Page Properties → Head/Footer                  |

***

### Great Pages

{% stepper %}
{% step %}
Acesse o editor da sua página no Great Pages.

{% endstep %}

{% step %}
Clique na engrenagem (⚙️) no canto superior direito.

<div data-with-frame="true"><figure><img src="/files/UJQPtA34QOQMzW5TuL9z" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Acesse JavaScript e CSS.

<div data-with-frame="true"><figure><img src="/files/yVB9zhjHlOXBHGFb0mSK" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
**`Cole a Versão 1 (sem <script>) na aba JavaScript.` e salve.**

<div data-with-frame="true"><figure><img src="/files/qqSSCVqG70mBIB03T2Bf" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
No botão da página que direciona para o checkout, informe o link da oferta.

<div data-with-frame="true"><figure><img src="/files/XQ9A36coia9R24SdUkr2" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/YtcnBrxtXZZeya1pnMbX" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Salve e publique a página.

{% endstep %}
{% endstepper %}

***

### WordPress com PixelYourSite

#### Pré-requisitos

Acesso administrativo ao WordPress e o plugin **PixelYourSite** instalado e ativo.

***

{% stepper %}
{% step %}
Instalar o plugin PixelYourSite

No menu lateral do WordPress, acesse **Plugins → Adicionar Novo**, pesquise por **PixelYourSite**, clique em **Instalar Agora** e depois em **Ativar**.

{% endstep %}

{% step %}
Acessar a página a ser editada

Dentro do editor da página, role para baixo até encontrar a seção do **PixelYourSite** e clique para expandir as opções.

<div data-with-frame="true"><figure><img src="/files/KC1eVJELzp0qzg1dxTsM" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Localizar a seção do PixelYourSite

<div data-with-frame="true"><figure><img src="/files/fp6IJ3UlthBgewDJmfKj" alt=""><figcaption></figcaption></figure></div>

{% endstep %}

{% step %}
**Inserir o script no Foote**

Na seção **Head & Footer Scripts**, localize o campo **Footer (any device type)** e cole a **Versão 2** (com `<script>`).

<figure><img src="/files/JIJAticwlfbebTobMBFA" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Configurar o botão de checkout

No botão da página que direciona para o checkout, informe o link da oferta e publique a página.

<div data-with-frame="true"><figure><img src="/files/26xsMZydIeZmTtKeD48d" alt=""><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

***

### Como testar a configuração

{% stepper %}
{% step %}
Gere uma URL com parâmetros UTM usando o [Campaign URL Builder do Google.](https://ga-dev-tools.google/campaign-url-builder/)

<div data-with-frame="true"><figure><img src="/files/yPwKOVUIFGn9BCk9SCuj" alt=""><figcaption></figcaption></figure></div>

{% endstep %}

{% step %}
Ainda no construtor de urls, acesse o copie e acesse através do navegador.

{% hint style="info" %}
A url gerada pelo contrutor, pode ser usanda em campanhas de anúncios e divulgação.
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/kOZxFpOnhJPaeVJSVVcl" alt=""><figcaption></figcaption></figure></div>

{% endstep %}

{% step %}
Passe o mouse sobre o botão de checkout — verifique na barra de status do navegador se os parâmetros UTM estão sendo adicionados ao link.

<div data-with-frame="true"><figure><img src="/files/kAIVOSGH1b40LGsdvYD5" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Ao clicar no botão da pagina de vendas, verifique na barra de status do navegador se os parâmetros UTM estão sendo adicionados corretamente ao link.

<div data-with-frame="true"><figure><img src="/files/U0Q1hNA5rSvsPU17YDbe" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Realize uma compra teste e confirme se os parâmetros chegaram nos detalhes da venda, na aba Rastreamento.

<div data-with-frame="true"><figure><img src="/files/OyFwYJwa410GXWTbVIGA" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
&#x20;Você também pode acompanhar um consolidado das vendas aprovadas por tag em **Relatórios → Smart Source Report**.&#x20;
{% endhint %}

{% hint style="info" %}
É possivel ver nos detalhes de cada venda o  rastreamento realizado.
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/7Ku7RQMzU6MtqqKUl0wr" alt=""><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

***

### Como funciona o script

O script verifica se a URL atual da página contém parâmetros UTM, SRC ou SCK. Se sim, ele percorre todos os links da página e, naqueles que apontam para o checkout da Ticto, adiciona automaticamente esses parâmetros:

* Usa `?` se o link ainda não tiver nenhum parâmetro.
* Usa `&` se o link já tiver outros parâmetros.

Dessa forma, nenhuma informação de origem do tráfego se perde durante o redirecionamento para o checkout.