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.

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

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

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

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.

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.

<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 do seu dashboard. Exemplo: rastrear início de checkout:

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

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.

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

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

<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:

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

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

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

<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

<script>
    sAnalytics('track', 'meu_evento', { propriedade: 'valor' });
</script>

Tag de identify Gatilho: evento de login

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

Getting Started

Dashboard

Painel

Tracking.js

CDP (Data Platform)

Analytics Lab (Funções)

Estrutura de Dados

Instalação

Eventos automáticos

Eventos personalizados - `track`

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

Uso no Google Tag Manager

​Instalação

​Eventos automáticos

​Eventos personalizados - track

​Identificação de usuários - identify

​Uso no Google Tag Manager

Instalação

Eventos automáticos

Eventos personalizados - `track`

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

Uso no Google Tag Manager