ninetwo-user-tracking 1.0.7 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -123
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,122 +1,4 @@
|
|
|
1
|
-
Perfeito. Vamos evoluir o componente `TrackView` para suportar essa lógica de **"Read Confirmation"** (Confirmação de Leitura).
|
|
2
1
|
|
|
3
|
-
A lógica será:
|
|
4
|
-
|
|
5
|
-
1. Quando o elemento entra na tela: Dispara o evento de **View** (imediato) e inicia um **Timer** de 5 segundos.
|
|
6
|
-
2. Se o usuário sair da tela antes dos 5s: O timer é cancelado.
|
|
7
|
-
3. Se o usuário ficar 5s: Dispara o evento `read_confirmation`.
|
|
8
|
-
|
|
9
|
-
### 1. Código Atualizado: `src/components/TrackView.tsx`
|
|
10
|
-
|
|
11
|
-
Substitua o arquivo atual por este novo código. Adicionei uma prop opcional `readTime` (padrão 5000ms) caso você queira customizar esse tempo no futuro.
|
|
12
|
-
|
|
13
|
-
```tsx
|
|
14
|
-
'use client';
|
|
15
|
-
|
|
16
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
17
|
-
import { pushToDataLayer } from '../utils/gtm';
|
|
18
|
-
|
|
19
|
-
interface TrackViewProps {
|
|
20
|
-
children: React.ReactNode;
|
|
21
|
-
eventName: string;
|
|
22
|
-
category?: string;
|
|
23
|
-
label?: string;
|
|
24
|
-
threshold?: number;
|
|
25
|
-
readTime?: number; // Tempo em ms para confirmar leitura (Default: 5000)
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export const TrackView: React.FC<TrackViewProps> = ({
|
|
29
|
-
children,
|
|
30
|
-
eventName,
|
|
31
|
-
category,
|
|
32
|
-
label,
|
|
33
|
-
threshold = 0.5,
|
|
34
|
-
readTime = 5000
|
|
35
|
-
}) => {
|
|
36
|
-
const ref = useRef<HTMLDivElement>(null);
|
|
37
|
-
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
|
38
|
-
|
|
39
|
-
// Estados para garantir que dispare apenas uma vez por carregamento de página
|
|
40
|
-
const [hasTriggeredView, setHasTriggeredView] = useState(false);
|
|
41
|
-
const [hasTriggeredRead, setHasTriggeredRead] = useState(false);
|
|
42
|
-
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
if (!ref.current) return;
|
|
45
|
-
|
|
46
|
-
// Se ambos já foram disparados, desliga o observer para economizar recurso
|
|
47
|
-
if (hasTriggeredView && hasTriggeredRead) return;
|
|
48
|
-
|
|
49
|
-
const observer = new IntersectionObserver(
|
|
50
|
-
([entry]) => {
|
|
51
|
-
if (entry.isIntersecting) {
|
|
52
|
-
// 1. Disparo imediato de Visualização (VIEW)
|
|
53
|
-
if (!hasTriggeredView) {
|
|
54
|
-
pushToDataLayer({
|
|
55
|
-
event: eventName,
|
|
56
|
-
category,
|
|
57
|
-
label,
|
|
58
|
-
type: 'view',
|
|
59
|
-
});
|
|
60
|
-
setHasTriggeredView(true);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
// 2. Inicia contagem para Confirmação de Leitura (READ CONFIRMATION)
|
|
64
|
-
if (!hasTriggeredRead && !timerRef.current) {
|
|
65
|
-
timerRef.current = setTimeout(() => {
|
|
66
|
-
pushToDataLayer({
|
|
67
|
-
event: `${eventName}`, // Sufixo solicitado
|
|
68
|
-
category,
|
|
69
|
-
label,
|
|
70
|
-
type: 'read_confirmation', // Tipo diferenciado
|
|
71
|
-
});
|
|
72
|
-
setHasTriggeredRead(true);
|
|
73
|
-
}, readTime);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
} else {
|
|
77
|
-
// Se o usuário saiu da tela antes do tempo, cancela a confirmação
|
|
78
|
-
if (timerRef.current) {
|
|
79
|
-
clearTimeout(timerRef.current);
|
|
80
|
-
timerRef.current = null;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
},
|
|
84
|
-
{ threshold }
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
observer.observe(ref.current);
|
|
88
|
-
|
|
89
|
-
return () => {
|
|
90
|
-
observer.disconnect();
|
|
91
|
-
if (timerRef.current) clearTimeout(timerRef.current);
|
|
92
|
-
};
|
|
93
|
-
}, [hasTriggeredView, hasTriggeredRead, eventName, category, label, threshold, readTime]);
|
|
94
|
-
|
|
95
|
-
return <div ref={ref} style={{ display: 'contents' }}>{children}</div>;
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
---
|
|
101
|
-
|
|
102
|
-
### 2. Atualizar o Build
|
|
103
|
-
|
|
104
|
-
Como alteramos a lógica do componente, não esqueça de rodar o build novamente na pasta do pacote:
|
|
105
|
-
|
|
106
|
-
```bash
|
|
107
|
-
npm run build
|
|
108
|
-
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
---
|
|
112
|
-
|
|
113
|
-
### 3. Documentação Atualizada (README.md)
|
|
114
|
-
|
|
115
|
-
Aqui está o **README.md** completo e atualizado com a nova funcionalidade de Confirmação de Leitura documentada.
|
|
116
|
-
|
|
117
|
-
Pode clicar em "Copy" e substituir o seu arquivo atual.
|
|
118
|
-
|
|
119
|
-
```markdown
|
|
120
2
|
# NineTwo User Tracking
|
|
121
3
|
|
|
122
4
|
Pacote de abstração de Analytics para React e Next.js.
|
|
@@ -135,11 +17,7 @@ Facilita a implementação do **Google Tag Manager (GTM)** utilizando **Delegaç
|
|
|
135
17
|
|
|
136
18
|
## 📦 Instalação
|
|
137
19
|
|
|
138
|
-
|
|
139
|
-
npm install ninetwo_user_tracking
|
|
140
|
-
|
|
141
|
-
```
|
|
142
|
-
|
|
20
|
+
npm install ninetwo-user-tracking
|
|
143
21
|
---
|
|
144
22
|
|
|
145
23
|
## 🚀 Configuração (Next.js 13+ App Router)
|