refactor: change google analytics loading

AlbericTrancart · Oct 26, 2023 · 40d084c · 40d084c · vercel · Oct 26, 2023
1 parent 1a2185c
commit 40d084c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 17 deletions.
diff --git a/app/(main)/Analytics.tsx b/app/(main)/Analytics.tsx
@@ -0,0 +1,5 @@
+'use client';
+
+import { GoogleAnalytics } from 'nextjs-google-analytics';
+
+export const Analytics = () => <GoogleAnalytics trackPageViews />;
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
@@ -1,4 +1,3 @@
-import Script from 'next/script';
 import { IBM_Plex_Sans } from 'next/font/google';
 import type { Metadata } from 'next';
 import { Header } from 'components/Header';
@@ -7,6 +6,7 @@ import './global.scss';
 import 'prismjs/themes/prism-solarizedlight.css';
 import { generateTitleMetadata, PAGES } from 'services/pages';
 import styles from './MainLayout.module.scss';
+import { Analytics } from './Analytics';
 
 export const ibmPlexSans = IBM_Plex_Sans({
   subsets: ['latin'],
@@ -33,8 +33,6 @@ interface Props {
   children: React.ReactNode;
 }
 
-const ANALYTICS_ID = process.env.NEXT_PUBLIC_ANALYTICS_ID;
-
 const Layout = ({ children }: Props) => (
   <html lang="en" className={ibmPlexSans.variable}>
     <body>
@@ -44,18 +42,7 @@ const Layout = ({ children }: Props) => (
 
       <Footer />
 
-      {ANALYTICS_ID !== undefined && ANALYTICS_ID !== '' && (
-        <>
-          <Script id="google-analytics">
-            {`
-          window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-          ga('create', '${ANALYTICS_ID}', 'auto');
-          ga('send', 'pageview');
-          `}
-          </Script>
-          <Script src="https://www.google-analytics.com/analytics.js" />
-        </>
-      )}
+      <Analytics />
     </body>
   </html>
 );

diff --git a/app/(main)/learn/basics/selectors-specificity/page.tsx b/app/(main)/learn/basics/selectors-specificity/page.tsx
@@ -7,6 +7,7 @@ import { Link } from 'components/Link';
 import { NextKataButton } from 'components/NextKataButton';
 import { PAGES } from 'services/pages';
 import { Editor } from 'components/Editor';
+import { Summary } from 'components/Summary';
 import { KataQuestions } from 'components/KataQuestions';
 import SpecificityExamples from './specificity-examples.svg';
 import simpleSelectorsImage from './simple-selectors.png';
@@ -599,7 +600,7 @@ const Kata: NextPage = () => (
 
       <NextKataButton href={PAGES.CSSUnitsVariables.url()} />
 
-      {/* <Summary src="/learn/basics/selectors-specificity/css-selectors-specificity-summary.png" /> */}
+      <Summary src="/learn/basics/selectors-specificity/css-selectors-specificity-summary.png" />
     </section>
   </>
 );

diff --git a/components/Skill/index.tsx b/components/Skill/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { event } from 'nextjs-google-analytics';
 import { useEffect, useState } from 'react';
 import { Link } from 'components/Link';
 import { Checkbox } from 'components/Checkbox';
@@ -42,6 +43,8 @@ export const Skill = ({ className, skillId, showKataLink }: Props) => {
     } catch {
       console.warn('There was an issue with local storage!');
     }
+
+    event('toggle_skill', { checked });
   };
 
   const skill = SKILLS[skillId];

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "copy-text-to-clipboard": "^3.0.0",
     "lodash": "^4.17.19",
     "next": "^13.5.4",
+    "nextjs-google-analytics": "^2.3.3",
     "prismjs": "^1.21.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

diff --git a/yarn.lock b/yarn.lock
@@ -2746,7 +2746,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -3638,6 +3638,13 @@ next@^13.5.4:
     "@next/swc-win32-ia32-msvc" "13.5.4"
     "@next/swc-win32-x64-msvc" "13.5.4"
 
+nextjs-google-analytics@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/nextjs-google-analytics/-/nextjs-google-analytics-2.3.3.tgz#8393804b89915b22d94e0fabb786bdd4012cb888"
+  integrity sha512-Y6sI6A7wt5dji8hYBnVkOh9LTyImSLFZXx3FpyQgVW7W4b4qEFHjH2u3fhDJsrRZeLlUGM8/RuHD/mhHc2Axfg==
+  optionalDependencies:
+    fsevents "^2.3.2"
+
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"