Instalação do SDK

Cole o snippet abaixo no HTML do seu site antes do </body>.

Snippet de Instalação

<script src="http://localhost:3000/tracker.js"></script>
<script>
  TrackerSDK.init({
    projectId: 'cmn40ibxa00000kp6lem3kcjt',
    endpoint: 'http://localhost:3000/api/track'
  });
</script>

Rastreamento de "Fale Agora" no WhatsApp

SDK v2.1

O problema

Quando vários produtos têm o mesmo botão "Fale Agora" apontando para o WhatsApp, todos os eventos ficam com text: "Fale Agora" — impossível saber qual produto gerou a conversão.

Antes

<!-- ❌ Antes: impossível distinguir qual produto -->
<div class="produto-card">
  <h2>Plano Pro</h2>
  <a href="https://wa.me/5511999999999">Fale Agora</a>
</div>

<div class="produto-card">
  <h2>Plano Básico</h2>
  <a href="https://wa.me/5511999999999">Fale Agora</a>
</div>

Depois — adicione data-track-product no card

<!-- ✅ Depois: basta adicionar data-track-* no card ou no link -->
<div class="produto-card" data-track-product="Plano Pro" data-track-category="whatsapp">
  <h2>Plano Pro</h2>
  <a href="https://wa.me/5511999999999">Fale Agora</a>
</div>

<div class="produto-card" data-track-product="Plano Básico" data-track-category="whatsapp">
  <h2>Plano Básico</h2>
  <a href="https://wa.me/5511999999999">Fale Agora</a>
</div>

Eventos gerados automaticamente

// O SDK dispara automaticamente dois eventos ao clicar:

// 1. auto_click — com o produto no payload
{
  eventName: "auto_click",
  properties: {
    text: "Fale Agora",
    product: "Plano Pro",       // ← vem do data-track-product
    category: "whatsapp",       // ← vem do data-track-category
    whatsappNumber: "5511999999999",
    tagName: "A",
    clickX: 342, clickY: 180
  }
}

// 2. whatsapp_click — evento dedicado para conversões WhatsApp
{
  eventName: "whatsapp_click",
  properties: {
    text: "Fale Agora",
    product: "Plano Pro",
    whatsappNumber: "5511999999999",
    href: "https://wa.me/5511999999999"
  }
}

O SDK lê data-track-* do elemento clicado e de todos os seus ancestrais. Basta colocar o atributo no card pai — não precisa repetir em cada botão.

Atributos `data-track-*`

data-track-product

Nome do produto ou serviço

Ex: "Plano Pro"

data-track-category

Categoria da ação

Ex: "whatsapp" | "cta" | "hero"

data-track-label

Label customizado para o evento

Ex: "oferta-black-friday"

data-track-value

Valor numérico da conversão

Ex: "197.00"

data-track-[qualquer]

Qualquer propriedade extra

Ex: "data-track-plano=mensal"

Alternativa: `tracker.track()` manual

<!-- Alternativa: chamar tracker.track() manualmente -->
<a
  href="https://wa.me/5511999999999"
  onclick="tracker.track('whatsapp_click', { product: 'Plano Pro', plan: 'mensal' })"
>
  Fale Agora
</a>

<script>
  const tracker = TrackerSDK.init({
    projectId: 'cmn40ibxa00000kp6lem3kcjt',
    endpoint: 'http://localhost:3000/api/track'
  });
</script>

Use quando precisar passar propriedades dinâmicas que não estão no DOM, como preço atual, variante A/B ou ID do produto no seu banco de dados.

Funcionalidades do SDK v2.1

Page Views

Rastreamento automático ao carregar a página

Auto Click + data-track-*

Novo

Captura contexto do produto via atributos HTML

WhatsApp Click

Novo

Evento dedicado para links wa.me com número e produto

Scroll Depth

Dispara nos marcos 25%, 50%, 75%, 100%

Form Tracking

Detecta início e envio de formulários

Testes A/B

tracker.getVariant('testId') integrado

Informações do Projeto

Nome:Headfy

Project ID:cmn40ibxa00000kp6lem3kcjt

Domínio:https://cms-app.headfy.com.br/