77 lines
1.8 KiB
TypeScript
77 lines
1.8 KiB
TypeScript
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 (
|
|
<>
|
|
<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,
|
|
});
|
|
`,
|
|
}}
|
|
/>
|
|
</>
|
|
)
|
|
}
|