NineTwo User Tracking

Pacote de abstração de Analytics para React e Next.js.
Facilita a implementação do Google Tag Manager (GTM) utilizando Delegação de Eventos para cliques (via atributos HTML) e Intersection Observer para visualizações e confirmação de leitura.

✨ Integrações

- 💉 RD Station: Implementação de eventos para o botão flutuante do whatsapp.
---

✨ Funcionalidades

- 🚀 Zero Boilerplate: Rastreamento declarativo via atributos data-nt-ut-*.
- 🖱️ Click Tracking Automático: Listener global que captura cliques.
- 👁️ View Tracking: Dispara evento ao visualizar elemento.
- 📖 Read Confirmation: Dispara evento secundário automaticamente após 5s de visualização contínua.
- 💉 GTM Injection: Injeção segura do script do GTM.
- ⚡ Next.js Ready: Compatível com App Router (Providers Pattern).

---

📦 Instalação

npm install ninetwo-user-tracking
---

🚀 Configuração (Next.js 13+ App Router)

$3

``tsx
'use client';

import { TrackingProvider } from 'ninetwo_user_tracking';

export function Providers({ children }: { children: React.ReactNode }) {
return (
gtmId="GTM-SEU-ID-AQUI"
debug={process.env.NODE_ENV === 'development'}
>
{children}

);
}

`

$3

`tsx
import { Providers } from "./providers";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (


{children}


);
}

`

---

🖱️ Rastreamento de Cliques (Click)

Adicione os atributos data-nt-ut-* ao elemento interativo.

`tsx
className="btn-primary"
data-nt-ut-event="add_to_cart"
data-nt-ut-category="ecommerce"
data-nt-ut-label="tenis_nike_v2"
data-nt-ut-type="click" // Opcional (default: click)
>
Comprar Agora


`

---

👁️ Rastreamento de Visualização e Leitura (View/Read)

Use o componente para monitorar impressões.
Novidade: Se o usuário permanecer com o elemento visível por 5 segundos (padrão), um segundo evento read_confirmation será disparado.

`tsx
import { TrackView } from 'ninetwo_user_tracking';

export default function BlogPost() {
return (
eventName="article_view"
category="blog"
label="como_aprender_react"
threshold={0.5} // 50% visível para disparar
readTime={5000} // (Opcional) Tempo em ms para confirmar leitura
>


`

$3

Neste exemplo acima, dois eventos serão enviados ao DataLayer:

1. Assim que aparecer:
* event: "article_view"
* type: "view"


2. Após 5 segundos visível:
* event: "article_view"
* type: "read_confirmation"


---

Aqui está a documentação exclusiva para o rastreamento de Submit de Formulários, pronta para copiar e colar.

---

📝 Rastreamento de Formulários (Submit)

O pacote detecta automaticamente o envio de formulários através de Event Delegation.
Isso significa que você deve adicionar os atributos de rastreamento diretamente na tag

`

$3

Quando o usuário envia este formulário, o seguinte objeto é enviado para o GTM:

`javascript
{
event: "newsletter_signup", // Valor de data-nt-ut-event
event_category: "leads", // Valor de data-nt-ut-category
event_label: "footer_form", // Valor de data-nt-ut-label
event_type: "submit", // Automático para tags