Add analytics on Run button and stackblitz button, and SPA transitions (#338)

PavelVanecek · web-flow · commit 107d3e7033ba · 2025-06-26T07:08:56.000-07:00
diff --git a/index.html b/index.html
@@ -47,15 +47,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-QSPTT7WK79"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'G-QSPTT7WK79');
-    </script>
     <script type="module" src="/src/app.js"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "monaco-editor": "^0.52.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
     "react-monaco-editor": "^0.58.0",
     "react-router": "^7.6.2",
diff --git a/src/components/Shared/StackBlitzLink.tsx b/src/components/Shared/StackBlitzLink.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import stackblitzSdk, { ProjectDependencies } from '@stackblitz/sdk';
 import { TargetBlankLink } from './TargetBlankLink.tsx';
+import { sendEvent } from '../analytics.ts';
 
 type StackBlitzLinkProps = {
   /**
@@ -51,6 +52,11 @@ export function StackBlitzLink({ code, title, children }: StackBlitzLinkProps) {
       href="#stackblitz-open-project"
       onClick={(e) => {
         e.preventDefault();
+        sendEvent({
+          category: 'StackBlitz',
+          action: 'Open Project',
+          label: title,
+        });
         /*
          * https://developer.stackblitz.com/guides/integration/create-with-sdk#creating-a-new-project
          */
diff --git a/src/components/analytics.ts b/src/components/analytics.ts
@@ -0,0 +1,22 @@
+import ReactGA from 'react-ga4';
+import { useLocation } from 'react-router';
+import { useEffect } from 'react';
+
+ReactGA.initialize('G-QSPTT7WK79');
+
+export function PageTracker() {
+  const location = useLocation();
+
+  useEffect(() => {
+    ReactGA.send({
+      hitType: 'pageview',
+      page: location.pathname + location.search,
+    });
+  }, [location.pathname, location.search]);
+
+  return null;
+}
+
+export function sendEvent(ev: { category: string; action: string; label?: string; value?: number }) {
+  ReactGA.event(ev);
+}
diff --git a/src/containers/Root.tsx b/src/containers/Root.tsx
@@ -1,11 +1,13 @@
 import { PureComponent } from 'react';
 import { BrowserRouter } from 'react-router';
 import Routes from '../routes';
+import { PageTracker } from '../components/analytics.ts';
 
 class Root extends PureComponent {
   render() {
     return (
       <BrowserRouter>
+        <PageTracker />
         <Routes />
       </BrowserRouter>
     );
diff --git a/src/views/ExamplesView.tsx b/src/views/ExamplesView.tsx
@@ -15,6 +15,7 @@ import fetchFile from '../utils/fetchUtils.ts';
 import 'simple-line-icons/scss/simple-line-icons.scss';
 import { RouteComponentProps, withRouter } from '../routes/withRouter.tsx';
 import { StackBlitzLink } from '../components/Shared/StackBlitzLink.tsx';
+import { sendEvent } from '../components/analytics.ts';
 
 // @ts-ignore
 const cates = Object.keys(Examples).sort((a, b) => Examples[a].order - Examples[b].order);
@@ -156,6 +157,11 @@ class ExamplesView extends PureComponent<ExamplesViewProps, ExamplesViewState> {
 
   handleRunCode = () => {
     if (this.editorRef.current) {
+      sendEvent({
+        category: 'Examples',
+        action: 'Run Code',
+        label: this.getPage(),
+      });
       this.setState({
         // @ts-ignore
         exampleCode: this.editorRef.current.getValue(),
