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

# Instalando e usando o Tracking.js

O **tracking.js** é o principal item da stack do Synapside Analytics.

Ele é responsavel por capturar eventos em sites e produtos, de forma automática ou manual para eventos personalizados.

<Frame>
  <img src="https://mintcdn.com/inapplet/W0zbSgsI93a2Mjw-/images/image-10.png?fit=max&auto=format&n=W0zbSgsI93a2Mjw-&q=85&s=633ecdc24ff8b16ef94ff3ba741903e5" alt="Image" width="1205" height="903" data-path="images/image-10.png" />
</Frame>

## Instalação

Para instalar o tracking.js em seu site, adicione o snippet abaixo no HTML, de preferência no `<head>` ou através de gerenciadores de tag como o Google Tag Manager (GTM).

```javascript highlight={2} theme={null}
<script>
    window.sAnalytics_project = 'project_{project_id}';
    window.sAnalytics = window.sAnalytics || function () {
        (window.sAnalytics.q = window.sAnalytics.q || []).push(arguments);
    };
</script>
<script src="https://receiver.analytics.synapside.com/dist/sAnalytics_v1.build.js" async></script>
```

<Note>
  Substitua `project_{project_id}` pelo código do seu projeto, disponível no dashboard do Synapside Analytics.
</Note>

O snippet define a função `sAnalytics` antes mesmo do script carregar. Assim, qualquer chamada feita logo após a instalação é enfileirada e executada automaticamente assim que o SDK inicializar.

Em ferramentas como GTM, use eventos de **Exibição de página** como gatilho da TAG.

***

```mermaid placement="bottom-left" actions={false} theme={null}
graph LR
  JS["tracking.js"] --> aut & n6["Identify"]
  aut --> sa["S.Analytics API"]
  n5["Track"] --> sa
  n6 --> sa
  JS --> n5

 subgraph aut["Automatic"]
    n1["Session"]
    n2["Pageview"]
    n3["Click"]
    n4["Identify"]
  end
```

## Eventos automáticos

Após a instalação, o tracking.js passa a capturar os seguintes eventos sem nenhuma configuração adicional:

| Evento          | Quando é disparado                     |
| --------------- | -------------------------------------- |
| `session_start` | Primeira visita da sessão              |
| `pageview`      | Carregamento de cada página            |
| `click`         | Clique em elementos `<a>` e `<button>` |
| `form_submit`   | Envio de qualquer formulário           |

***

## Eventos personalizados - `track`

Use `sAnalytics('track', ...)` para registrar qualquer ação relevante no seu produto.

```javascript theme={null}
<script>
    sAnalytics('track', 'nome_do_evento', {
        propriedade: 'valor',
        outra_propriedade: 'outro_valor'
    });
</script>
```

O segundo argumento é o nome do evento e o terceiro é um objeto com propriedades adicionais. Ambos aparecerão na aba [**Eventos**](/dashboard/eventos) do seu dashboard.

**Exemplo: rastrear início de checkout:**

```javascript theme={null}
<script>
    sAnalytics('track', 'checkout_iniciado', {
        plano: 'pro',
        valor: 99.90,
        moeda: 'BRL'
    });
</script>
```

<Tip>
  Você pode chamar `sAnalytics('track', ...)` a qualquer momento após a instalação do snippet, antes ou depois do SDK carregar. Os eventos são enfileirados automaticamente.
</Tip>

***

## Identificação de usuários - `identify`

Use `sAnalytics('identify', ...)` para associar um usuário identificado (após login, por exemplo) à sessão atual.

```javascript theme={null}
<script>
    sAnalytics('identify', {
        type: 'email',
        value: 'usuario@exemplo.com'
    });
</script>
```

**Parâmetros:**

| Campo   | Tipo     | Descrição                                                |
| ------- | -------- | -------------------------------------------------------- |
| `type`  | `string` | Tipo do identificador: `email`, `phone`, `user_id`, etc. |
| `value` | `string` | Valor do identificador                                   |
| `data`  | `object` | *(Opcional)* Propriedades adicionais do usuário          |

**Exemplo: identificar após login com dados extras:**

```javascript theme={null}
<script>
    sAnalytics('identify', {
        type: 'email',
        value: 'usuario@exemplo.com',
        data: {
            nome: 'João Silva',
            plano: 'pro'
        }
    });
</script>
```

<Note>
  O `identify` vincula todos os eventos futuros (e retroativamente os da sessão atual) ao usuário identificado no dashboard.
</Note>

***

## Uso no Google Tag Manager

No GTM, cada chamada pode ser configurada em tags separadas:

**Tag de instalação**: gatilho: *Exibição de página - Todas as páginas*

```javascript highlight={2} theme={null}
<script>
    window.sAnalytics_project = 'project_{project_id}';
    window.sAnalytics = window.sAnalytics || function () {
        (window.sAnalytics.q = window.sAnalytics.q || []).push(arguments);
    };
</script>
<script src="https://receiver.analytics.synapside.com/dist/sAnalytics_v1.build.js" async></script>
```

**Tag de evento personalizado**

Gatilho: qualquer evento GTM

```javascript theme={null}
<script>
    sAnalytics('track', 'meu_evento', { propriedade: 'valor' });
</script>
```

**Tag de identify**

Gatilho: evento de login

```javascript theme={null}
<script>
    sAnalytics('identify', {
        type: 'email',
        value: '{{variavel_email_usuario}}'
    });
</script>
```

As tags podem disparar em qualquer ordem, o SDK garante que nenhum evento seja perdido.
