/
analytics.tsx
115 lines (98 loc) · 3.24 KB
/
analytics.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
"use client";
import Cookies from "js-cookie";
import { useEffect } from "react";
import { v4 } from "uuid";
type Props = {
publicationId: string;
postId: string;
};
export const GA_TRACKING_ID = "G-72XG3F8LNJ"; // This is Hashnode's GA tracking ID
export default function Analytics({ publicationId, postId }: Props) {
useEffect(() => {
if (!publicationId || !postId) return;
const _sendViewsToHashnodeInternalAnalytics = async () => {
const event: Record<string, string | number | object> = {
event_type: "pageview",
time: new Date().getTime(),
event_properties: {
hostname: window.location.hostname,
url: window.location.pathname,
eventType: "pageview",
publicationId: publicationId,
dateAdded: new Date().getTime(),
referrer: window.document.referrer,
},
};
let deviceId = Cookies.get("__amplitudeDeviceID");
if (!deviceId) {
deviceId = v4();
Cookies.set("__amplitudeDeviceID", deviceId, {
expires: 365 * 2,
});
}
event["device_id"] = deviceId;
await fetch(`/ping/data-event`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ events: [event] }),
});
};
const _sendViewsToHashnodeAnalyticsDashboard = async () => {
const LOCATION = window.location;
const NAVIGATOR = window.navigator;
const currentFullURL = LOCATION.protocol + "//" + LOCATION.hostname + LOCATION.pathname + LOCATION.search + LOCATION.hash;
const query = new URL(currentFullURL).searchParams;
const utm_id = query.get("utm_id");
const utm_campaign = query.get("utm_campaign");
const utm_source = query.get("utm_source");
const utm_medium = query.get("utm_medium");
const utm_term = query.get("utm_term");
const utm_content = query.get("utm_content");
let referrer = document.referrer || "";
if (referrer.indexOf(window.location.hostname) !== -1) {
referrer = "";
}
const data = {
publicationId,
postId,
timestamp: Date.now(),
url: currentFullURL,
referrer: referrer,
title: document.title,
charset: document.characterSet || document.charset,
lang: NAVIGATOR.language,
userAgent: NAVIGATOR.userAgent,
historyLength: window.history.length,
timezoneOffset: new Date().getTimezoneOffset(),
utm_id,
utm_campaign,
utm_source,
utm_medium,
utm_term,
utm_content,
};
fetch(`/ping/view`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ data }),
});
};
const _sendPageViewsToHashnodeGoogleAnalytics = () => {
// @ts-ignore
if (!window.gtag) return;
// @ts-ignore
window.gtag("config", GA_TRACKING_ID, {
transport_url: "https://ping.hashnode.com",
first_party_collection: true,
});
};
_sendPageViewsToHashnodeGoogleAnalytics();
_sendViewsToHashnodeInternalAnalytics();
_sendViewsToHashnodeAnalyticsDashboard();
}, [postId, publicationId]);
return null;
}