Funciona em todo lugar onde tem JavaScript. Snippet em HTML puro, pacote npm, ou via REST se você prefere fazer no backend.
Substitua pk_xxxxxxxxxxxxxxxxxxxx pela sua publishable key (vem na Conta após cadastro).
Cole no <head> de todas as páginas.
<script src="https://cdn.dsplayground.com.br/sdk/v0/sdk.umd.js"></script>
<script>
window.DSPlayground.iniciarAnalytics({
publishableKey: 'pk_xxxxxxxxxxxxxxxxxxxx',
websocketUrl: 'https://api.dsplayground.com.br',
});
</script>Pacote npm. Inicialize uma vez no entrypoint.
# 1) instalar
npm i @danpqdan/dsplayground-analytics-sdk
# 2) src/main.tsx (ou index.tsx)
import { iniciarAnalytics } from '@danpqdan/dsplayground-analytics-sdk';
iniciarAnalytics({
publishableKey: 'pk_xxxxxxxxxxxxxxxxxxxx',
websocketUrl: 'https://api.dsplayground.com.br',
});Em App Router, use Client Component. Em Pages Router, em _app.tsx.
// app/providers.tsx
'use client';
import { useEffect } from 'react';
import { iniciarAnalytics } from '@danpqdan/dsplayground-analytics-sdk';
export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
iniciarAnalytics({
publishableKey: 'pk_xxxxxxxxxxxxxxxxxxxx',
websocketUrl: 'https://api.dsplayground.com.br',
});
}, []);
return <>{children}</>;
}
// app/layout.tsx — envolva o {children} com <AnalyticsProvider>Astro carrega scripts em paralelo. Coloque no Layout.astro.
---
// src/layouts/Base.astro
---
<html>
<head>...</head>
<body>
<slot />
<script>
import { iniciarAnalytics } from '@danpqdan/dsplayground-analytics-sdk';
iniciarAnalytics({
publishableKey: 'pk_xxxxxxxxxxxxxxxxxxxx',
websocketUrl: 'https://api.dsplayground.com.br',
});
</script>
</body>
</html>Plugin "Insert Headers and Footers" → Cabeçalho. Ou tema → personalizar → código.
<script src="https://cdn.dsplayground.com.br/sdk/v0/sdk.umd.js"></script>
<script>
window.DSPlayground.iniciarAnalytics({
publishableKey: 'pk_xxxxxxxxxxxxxxxxxxxx',
websocketUrl: 'https://api.dsplayground.com.br',
});
</script>Online Store → Themes → Edit code → layout/theme.liquid. Antes de </head>.
<script src="https://cdn.dsplayground.com.br/sdk/v0/sdk.umd.js"></script>
<script>
window.DSPlayground.iniciarAnalytics({
publishableKey: 'pk_xxxxxxxxxxxxxxxxxxxx',
websocketUrl: 'https://api.dsplayground.com.br',
extras: { customer_id: '{{ customer.id | default: "" }}' },
});
</script>Liquid: passa o customer.id automaticamente quando logado.
Depois do iniciarAnalytics(), qualquer ação importante vira evento.
import { enviarEvento } from '@danpqdan/dsplayground-analytics-sdk';
// Venda concluída
enviarEvento('venda_concluida', {
produto_id: 'sku-123',
valor: 199.90,
moeda: 'BRL',
metodo_pagamento: 'pix',
});
// Formulário enviado
enviarEvento('lead_capturado', {
origem: 'newsletter-rodape',
campanha: 'lancamento-2026',
});
// Vídeo terminado
enviarEvento('video_concluido', {
video_id: 'apresentacao',
duracao_s: 142,
});Boas práticas: nomes em snake_case, valores em tipos primitivos. Não envie PII (email, CPF) como tag — explode cardinalidade e fere LGPD.
Pra integrações backend ou plataformas onde JS no browser não dá. Base URL: https://api.dsplayground.com.br
| Método | Endpoint | Descrição |
|---|---|---|
| POST | /auth/sdk-token | Emite JWT de curta duração pra autenticar evento. |
| POST | /eventos | Persiste evento (alternativa ao WebSocket). |
| GET | /cliente/auth/configuracoes | Lê config do cliente logado (cookie). |
| GET | /cliente/exportar/<dia> | Download CSV/LP do dia (302 → R2 signed URL). |
| GET | /health/app | Liveness probe. |
Documentação completa em desenvolvimento — abrir issue no GitHub se precisar de detalhe específico.
Crie a conta, pegue sua key e cole no seu site. Em uns minutos os eventos chegam.