@arthurreira/analytics 0.2.2 → 0.4.0
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/dist/client.js +57 -2
- package/dist/index.js +19 -1
- package/package.json +1 -1
package/dist/client.js
CHANGED
|
@@ -15,13 +15,31 @@ var BASE_FIELDS = (sessionId, eventType, path) => ({
|
|
|
15
15
|
page_url: typeof window !== "undefined" ? window.location.href : ""
|
|
16
16
|
});
|
|
17
17
|
async function createSession(apiUrl, apiKey, visitorId) {
|
|
18
|
+
const sessionData = { visitor_id: visitorId };
|
|
19
|
+
if (typeof window !== "undefined") {
|
|
20
|
+
const nav = navigator;
|
|
21
|
+
sessionData.language = navigator.language || null;
|
|
22
|
+
sessionData.screen_width = screen.width || null;
|
|
23
|
+
sessionData.screen_height = screen.height || null;
|
|
24
|
+
sessionData.viewport_width = window.innerWidth || null;
|
|
25
|
+
sessionData.viewport_height = window.innerHeight || null;
|
|
26
|
+
sessionData.referrer = document.referrer || null;
|
|
27
|
+
sessionData.landing_page = window.location.pathname || null;
|
|
28
|
+
sessionData.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || null;
|
|
29
|
+
const params = new URLSearchParams(window.location.search);
|
|
30
|
+
sessionData.utm_source = params.get("utm_source");
|
|
31
|
+
sessionData.utm_medium = params.get("utm_medium");
|
|
32
|
+
sessionData.utm_campaign = params.get("utm_campaign");
|
|
33
|
+
sessionData.utm_term = params.get("utm_term");
|
|
34
|
+
sessionData.utm_content = params.get("utm_content");
|
|
35
|
+
}
|
|
18
36
|
const response = await fetch(`${apiUrl}/sessions`, {
|
|
19
37
|
method: "POST",
|
|
20
38
|
headers: {
|
|
21
39
|
"Authorization": `Bearer ${apiKey}`,
|
|
22
40
|
"Content-Type": "application/json"
|
|
23
41
|
},
|
|
24
|
-
body: JSON.stringify(
|
|
42
|
+
body: JSON.stringify(sessionData)
|
|
25
43
|
});
|
|
26
44
|
const data = await response.json();
|
|
27
45
|
return data.id;
|
|
@@ -136,14 +154,51 @@ function useAnalytics(apiUrl, apiKey) {
|
|
|
136
154
|
|
|
137
155
|
// src/components/Analytics.tsx
|
|
138
156
|
function Analytics({ apiKey, apiUrl }) {
|
|
139
|
-
const { trackPageview: trackPageview2 } = useAnalytics(apiUrl, apiKey);
|
|
157
|
+
const { trackPageview: trackPageview2, trackClick: trackClick2, trackScroll: trackScroll2, trackCopy: trackCopy2, trackError: trackError2 } = useAnalytics(apiUrl, apiKey);
|
|
140
158
|
const lastTracked = useRef2(null);
|
|
159
|
+
const lastScrollDepth = useRef2(0);
|
|
141
160
|
const pathname = typeof window !== "undefined" ? window.location.pathname : "";
|
|
142
161
|
useEffect2(() => {
|
|
143
162
|
if (lastTracked.current === pathname) return;
|
|
144
163
|
lastTracked.current = pathname;
|
|
145
164
|
trackPageview2(pathname);
|
|
146
165
|
}, [pathname, trackPageview2]);
|
|
166
|
+
useEffect2(() => {
|
|
167
|
+
if (typeof window === "undefined") return;
|
|
168
|
+
const handler = (e) => trackClick2(e, e.target);
|
|
169
|
+
window.addEventListener("click", handler);
|
|
170
|
+
return () => window.removeEventListener("click", handler);
|
|
171
|
+
}, [trackClick2]);
|
|
172
|
+
useEffect2(() => {
|
|
173
|
+
if (typeof window === "undefined") return;
|
|
174
|
+
const handler = () => {
|
|
175
|
+
const scrolled = window.scrollY;
|
|
176
|
+
const total = document.documentElement.scrollHeight - window.innerHeight;
|
|
177
|
+
if (total <= 0) return;
|
|
178
|
+
const depth = Math.round(scrolled / total * 100);
|
|
179
|
+
const milestones = [25, 50, 75, 100];
|
|
180
|
+
for (const m of milestones) {
|
|
181
|
+
if (depth >= m && lastScrollDepth.current < m) {
|
|
182
|
+
lastScrollDepth.current = m;
|
|
183
|
+
trackScroll2(m);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
window.addEventListener("scroll", handler, { passive: true });
|
|
188
|
+
return () => window.removeEventListener("scroll", handler);
|
|
189
|
+
}, [trackScroll2]);
|
|
190
|
+
useEffect2(() => {
|
|
191
|
+
if (typeof window === "undefined") return;
|
|
192
|
+
const handler = () => trackCopy2();
|
|
193
|
+
window.addEventListener("copy", handler);
|
|
194
|
+
return () => window.removeEventListener("copy", handler);
|
|
195
|
+
}, [trackCopy2]);
|
|
196
|
+
useEffect2(() => {
|
|
197
|
+
if (typeof window === "undefined") return;
|
|
198
|
+
const handler = (e) => trackError2(new Error(e.message));
|
|
199
|
+
window.addEventListener("error", handler);
|
|
200
|
+
return () => window.removeEventListener("error", handler);
|
|
201
|
+
}, [trackError2]);
|
|
147
202
|
return null;
|
|
148
203
|
}
|
|
149
204
|
export {
|
package/dist/index.js
CHANGED
|
@@ -6,13 +6,31 @@ var BASE_FIELDS = (sessionId, eventType, path) => ({
|
|
|
6
6
|
page_url: typeof window !== "undefined" ? window.location.href : ""
|
|
7
7
|
});
|
|
8
8
|
async function createSession(apiUrl, apiKey, visitorId) {
|
|
9
|
+
const sessionData = { visitor_id: visitorId };
|
|
10
|
+
if (typeof window !== "undefined") {
|
|
11
|
+
const nav = navigator;
|
|
12
|
+
sessionData.language = navigator.language || null;
|
|
13
|
+
sessionData.screen_width = screen.width || null;
|
|
14
|
+
sessionData.screen_height = screen.height || null;
|
|
15
|
+
sessionData.viewport_width = window.innerWidth || null;
|
|
16
|
+
sessionData.viewport_height = window.innerHeight || null;
|
|
17
|
+
sessionData.referrer = document.referrer || null;
|
|
18
|
+
sessionData.landing_page = window.location.pathname || null;
|
|
19
|
+
sessionData.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || null;
|
|
20
|
+
const params = new URLSearchParams(window.location.search);
|
|
21
|
+
sessionData.utm_source = params.get("utm_source");
|
|
22
|
+
sessionData.utm_medium = params.get("utm_medium");
|
|
23
|
+
sessionData.utm_campaign = params.get("utm_campaign");
|
|
24
|
+
sessionData.utm_term = params.get("utm_term");
|
|
25
|
+
sessionData.utm_content = params.get("utm_content");
|
|
26
|
+
}
|
|
9
27
|
const response = await fetch(`${apiUrl}/sessions`, {
|
|
10
28
|
method: "POST",
|
|
11
29
|
headers: {
|
|
12
30
|
"Authorization": `Bearer ${apiKey}`,
|
|
13
31
|
"Content-Type": "application/json"
|
|
14
32
|
},
|
|
15
|
-
body: JSON.stringify(
|
|
33
|
+
body: JSON.stringify(sessionData)
|
|
16
34
|
});
|
|
17
35
|
const data = await response.json();
|
|
18
36
|
return data.id;
|
package/package.json
CHANGED