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

## 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.

***

### 📚 Índice

* [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)

***

### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.ticto.com.br/sou-produtor/trackeamento/como-fazer-trackeamento-perfeito-utilizando-utm-src-e-sck-na-ticto.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.