react-ga4
react-ga4 copied to clipboard
codler
Why not to paste GA4 code directly into HTML?
You didn't explain in your README file, why you recommend to use react-ga4, not just paste it into index.html of the React app. Your README file should contain such an explanation.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PDPFZKZ3R6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-PDPFZKZ3R6');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Zon Social Network</title>
<!--base href="/" /-->
<link rel="icon" href="/favicon.ico" />
<link type="text/css" rel="stylesheet" href="/main.css" />
</head>
<body>
<div id="app"></div>
<!-- Ybug code start (https://ybug.io) -->
<script type='text/javascript'>
(function() {
window.ybug_settings = {"id":"r47mfh83w8m5091bscbk"};
var ybug = document.createElement('script'); ybug.type = 'text/javascript'; ybug.async = true;
ybug.src = 'https://widget.ybug.io/button/'+window.ybug_settings.id+'.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ybug, s);
})();
</script>
<!-- Ybug code end -->
</body>
</html>
Because it's better to do like this
const { pathname } = useLocation()
const oldPage = useRef(pathname)
const willMountReactGA = useRef(true)
useEffect(() => {
if (pathname !== oldPage.current) {
oldPage.current = pathname
try {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
})
} catch (error) {
// for older browser
window.scrollTo(0, 0)
}
if (process.env.NODE_ENV === 'production' && account.cookieConsent && !willMountReactGA.current) {
ReactGA.send({ hitType: 'pageview', page: pathname })
}
}
}, [pathname, account.cookieConsent])
useEffect(() => {
if (process.env.NODE_ENV === 'production') {
if (!willMountReactGA.current && ReactGA.isInitialized) {
if (account.cookieConsent) {
ReactGA.gtag('consent', 'update', {
analytics_storage: 'granted'
})
} else {
ReactGA.gtag('consent', 'update', {
analytics_storage: 'denied'
})
}
}
if (willMountReactGA.current) {
ReactGA.initialize([
{
trackingId: 'XXXXX',
gaOptions: { cookieDomain: 'your-site.com' },
gtagOptions: {
analytics_storage: account.cookieConsent ? 'granted' : 'denied'
}
}
])
willMountReactGA.current = false
}
}
}, [account.cookieConsent])
