# 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FdPqGM0XrpKrNoKcL88Pb%2Fimage.png?alt=media&#x26;token=22826578-2a1c-4f50-86c4-50db196ce6db" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Acesse JavaScript e CSS.

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2F2pOYseHaQXtACwM3tgjY%2Fimage.png?alt=media&#x26;token=ddc18f8c-4b1b-41a0-82c6-8410f78f4674" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FqtGDdES4ddCRjEOQaTIw%2Fimage.png?alt=media&#x26;token=6b39c491-0d1b-4c7a-9119-727c679f5e4b" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2Fw0ulZhrjVYhejAI7mTbg%2Fimage.png?alt=media&#x26;token=eff9e9b1-5198-4ed3-af6f-927ca665bbd9" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2F1UGXWtZy7EKTe9uWMa9V%2Fimage.png?alt=media&#x26;token=34c855dd-3835-4935-97c8-574041e4e564" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FWeO9wkbSh9ObdE4iKhQR%2Fimage.png?alt=media&#x26;token=eac6435b-711d-4735-b763-b53d513c9ae8" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

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

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FAgzjUtRCEGIS3RMBcEhx%2Fimage.png?alt=media&#x26;token=b844017f-b7ba-4fc2-84f3-311286e09d89" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2Fj7RTiN6C1cUNXjfGbIpI%2Fimage.png?alt=media&#x26;token=cf10a117-1570-4507-acf8-08498f24127e" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FpsBHgsdhymBHSpxYPday%2Fimage.png?alt=media&#x26;token=7d5fd776-0e59-4805-aea3-5c515b6ba53e" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FFjYMczvse4lz434Xtaq2%2Fimage.png?alt=media&#x26;token=da8065ae-4791-4526-bc2c-ef3321c9ef86" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FTINpT50IJhxEbiSkoBlM%2Fimage.png?alt=media&#x26;token=14c701c2-5b2e-49b8-9b02-22d82f5f5d80" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2F4NW75wxPMRVFFjWxywO6%2Fimage.png?alt=media&#x26;token=8ff96d67-e62b-407a-9356-e9e5e4955d5e" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2Fz5BMjYPnouq9X3HpxpWR%2Fimage.png?alt=media&#x26;token=01ac39fb-9e4c-4c9d-9928-4956ff8382bb" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FlTgDr2FsLGtfe6f38JVJ%2Fimage.png?alt=media&#x26;token=640ab14d-f7a3-4eeb-b23d-981ebbfc2cdb" 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="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FF6f3YYOflrav5YtIyuCT%2Fimage.png?alt=media&#x26;token=d1bac836-e0d4-4a6c-b246-4a0ec8c19dec" 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.