Переглянути джерело

move GoogleAnalytics to _document

AykutSarac 3 роки тому
батько
коміт
7558a33a82

+ 4 - 3
src/components/GoogleAnalytics/index.tsx

@@ -1,13 +1,14 @@
 import Script from "next/script";
 import React from "react";
-import * as gtag from "src/utils/gtag";
+
+const GA_TRACKING_ID = "G-JKZEHMJBMH";
 
 export const GoogleAnalytics: React.FC = () => {
   return (
     <>
       <Script
         strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
       />
       <Script
         id="gtag-init"
@@ -17,7 +18,7 @@ export const GoogleAnalytics: React.FC = () => {
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-            gtag('config', '${gtag.GA_TRACKING_ID}', {
+            gtag('config', '${GA_TRACKING_ID}', {
               page_path: window.location.pathname,
             });
           `,

+ 0 - 17
src/pages/_app.tsx

@@ -5,27 +5,10 @@ import { ThemeProvider } from "styled-components";
 import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme } from "src/constants/theme";
 import { Toaster } from "react-hot-toast";
-import { useRouter } from "next/router";
-import * as gtag from "src/utils/gtag";
-import { GoogleAnalytics } from "src/components/GoogleAnalytics";
-
-const isDevelopment = process.env.NODE_ENV === "development";
 
 function JsonVisio({ Component, pageProps }: AppProps) {
-  const router = useRouter();
-  React.useEffect(() => {
-    const handleRouteChange = (url: string) => {
-      gtag.pageview(url);
-    };
-    router.events.on("routeChangeComplete", handleRouteChange);
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-    };
-  }, [router.events]);
-
   return (
     <>
-      {!isDevelopment && <GoogleAnalytics />}
       <ThemeProvider theme={darkTheme}>
         <GlobalStyle />
         <Component {...pageProps} />

+ 4 - 0
src/pages/_document.tsx

@@ -5,9 +5,12 @@ import Document, {
   NextScript,
   DocumentContext,
 } from "next/document";
+import { GoogleAnalytics } from "src/components/GoogleAnalytics";
 import { SeoTags } from "src/components/SeoTags";
 import { ServerStyleSheet } from "styled-components";
 
+const isDevelopment = process.env.NODE_ENV === "development";
+
 class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const sheet = new ServerStyleSheet();
@@ -39,6 +42,7 @@ class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
+          {!isDevelopment && <GoogleAnalytics />}
           <SeoTags
             description="Simple visualization tool for your JSON data. No forced structure, paste your JSON and view it instantly."
             title="JSON Visio"

+ 0 - 18
src/utils/gtag.ts

@@ -1,18 +0,0 @@
-// @ts-nocheck
-export const GA_TRACKING_ID = "G-JKZEHMJBMH";
-
-// 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 }) => {
-  window.gtag("event", action, {
-    event_category: category,
-    event_label: label,
-    value: value,
-  });
-};