From 813490c19425b5e6ef3f998f5770afb70f0403d3 Mon Sep 17 00:00:00 2001 From: Sakura Knoll Date: Fri, 29 Apr 2022 07:22:02 +0900 Subject: [PATCH] Add GA --- src/lib/gtag.tsx | 76 ++++++++++++++++++++++++++++++++++++++++++++++ src/pages/_app.tsx | 4 +++ 2 files changed, 80 insertions(+) create mode 100644 src/lib/gtag.tsx diff --git a/src/lib/gtag.tsx b/src/lib/gtag.tsx new file mode 100644 index 00000000..b6656851 --- /dev/null +++ b/src/lib/gtag.tsx @@ -0,0 +1,76 @@ +import { NextRouter } from 'next/router' +import Script from 'next/script' +import { useEffect } from 'react' + +export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID + +declare global { + interface Window { + gtag: any + } +} + +// https://developers.google.com/analytics/devguides/collection/gtagjs/pages +export const pageview = (url: string) => { + window.gtag('config', GA_TRACKING_ID, { + page_path: url, + }) +} + +// https://developers.google.com/analytics/devguides/collection/gtagjs/events +export const event = ({ + action, + category, + label, + value, +}: { + action: string + category: string + label: string + value: string +}) => { + window.gtag('event', action, { + event_category: category, + event_label: label, + value: value, + }) +} + +export function useGtagPageViewReport(router: NextRouter) { + useEffect(() => { + const handleRouteChange = (url: string) => { + pageview(url) + } + router.events.on('routeChangeComplete', handleRouteChange) + router.events.on('hashChangeComplete', handleRouteChange) + return () => { + router.events.off('routeChangeComplete', handleRouteChange) + router.events.off('hashChangeComplete', handleRouteChange) + } + }, [router]) +} + +export const GtagScript = () => { + return ( + <> +