/
analytics.tsx
44 lines (40 loc) · 1.17 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
import { useRouter } from "next/router";
import Script from "next/script";
import { useEffect, VFC } from "react";
export const GA_TRACKING_ID = "G-6B3JF8MB9J";
export const AnalyticsScript: VFC = () => {
return (
<>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
/>
<Script
id="gtag-init"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
</>
);
};
export function useGoogleAnalytics() {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url: URL) => {
window.gtag("config", GA_TRACKING_ID, {
page_path: url,
});
};
router.events.on("routeChangeComplete", handleRouteChange);
return () => router.events.off("routeChangeComplete", handleRouteChange);
}, [router.events]);
}