Fix google analytics tracking

This commit is contained in:
Hazem Krimi
2022-02-17 13:03:17 +01:00
parent 08a003c2f0
commit 91773aac01
3 changed files with 13 additions and 12 deletions
+10 -2
View File
@@ -15,6 +15,7 @@ import Footer from '../components/Footer';
import NProgress from 'nprogress'; import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; import 'nprogress/nprogress.css';
import { pageview } from '../utils/gtag';
import { initStyles } from '../utils/styles'; import { initStyles } from '../utils/styles';
NProgress.configure({ showSpinner: false }); NProgress.configure({ showSpinner: false });
@@ -27,14 +28,21 @@ const App = ({ Component, pageProps }: AppProps) => {
NProgress.start(); NProgress.start();
}); });
router.events.on('routeChangeComplete', () => { router.events.on('routeChangeComplete', url => {
NProgress.done(); NProgress.done();
pageview(url);
}); });
router.events.on('routeChangeError', () => { router.events.on('routeChangeError', () => {
NProgress.done(); NProgress.done();
}); });
}, []);
return () => {
router.events.off('routeChangeComplete', url => {
pageview(url);
});
};
}, [router.events]);
return ( return (
<> <>
+3 -8
View File
@@ -1,5 +1,4 @@
import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'; import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
import { ServerStyleSheet } from 'styled-components'; import { ServerStyleSheet } from 'styled-components';
@@ -36,13 +35,9 @@ class Doc extends Document {
return ( return (
<Html> <Html>
<Head> <Head>
<Script <script src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_KEY}`} />
strategy='afterInteractive' <script
src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_KEY}`} id='analytics-init'
/>
<Script
id='google-analytics'
strategy='afterInteractive'
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: initAnalytics() __html: initAnalytics()
}} }}
-2
View File
@@ -1,6 +1,5 @@
export const GOOGLE_ANALYTICS_KEY = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY; export const GOOGLE_ANALYTICS_KEY = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY;
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: any) => { export const pageview = (url: any) => {
// @ts-ignore // @ts-ignore
window.gtag('config', GOOGLE_ANALYTICS_KEY, { window.gtag('config', GOOGLE_ANALYTICS_KEY, {
@@ -8,7 +7,6 @@ export const pageview = (url: any) => {
}); });
}; };
// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }: any) => { export const event = ({ action, category, label, value }: any) => {
// @ts-ignore // @ts-ignore
window.gtag('event', action, { window.gtag('event', action, {