feat(www): replace mixpanel with google analytics

www/.env.local.example

@@ -4,3 +4,4 @@ AUTH0_ISSUER_BASE_URL='https://shuttle-dev.eu.auth0.com'
 AUTH0_CLIENT_ID='lqssAVaLct5r4yxFaVSde8I91Xl39bKn'
 AUTH0_CLIENT_SECRET='grab client secret from auth0 dashboard'
 SHUTTLE_API_BASE_URL=https://api.shuttle.rs
+NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

www/components/ApiKeyModal.tsx

@@ -4,7 +4,6 @@ import { XIcon } from "@heroicons/react/outline";
 import { createStateContext } from "react-use";
 import { useUser } from "@auth0/nextjs-auth0";
 import Code from "./Code";
-import mixpanel from "mixpanel-browser";
 import { DISCORD_URL } from "../lib/constants";
 import ExternalLink from "./ExternalLink";
 

www/components/Code.tsx

@@ -2,15 +2,19 @@ import { faClipboard } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ReactTooltip from "react-tooltip";
 import NoSsr from "./NoSsr";
-import mixpanel from "mixpanel-browser";
-
+import { gtagEvent } from "../lib/gtag";
 type CodeProps = {
   readonly id: string;
   readonly code: string;
 };
 
-const copyToClipboard = (code) => {
-  mixpanel.track("Copied Code");
+const copyToClipboard = (code: string, id: string) => {
+  gtagEvent({
+    action: "copy_install_script",
+    category: "Code",
+    label: "Copied Install Script",
+    value: id,
+  });
 
   navigator.clipboard.writeText(code);
 };
@@ -42,7 +46,7 @@ export default function Code({ code, id }: CodeProps) {
           id={id}
           place="top"
           effect="float"
-          afterShow={() => copyToClipboard(code)}
+          afterShow={() => copyToClipboard(code, id)}
         >
           <b>Copied to clipboard!</b>
         </ReactTooltip>

www/components/CodeBlock.tsx

@@ -22,14 +22,20 @@ interface Props {
   readonly language: string;
   readonly code: string;
   readonly showLineNumbers?: boolean;
+  readonly name: string;
 }
 
-export default function CodeBlock({ code, language, showLineNumbers }: Props) {
+export default function CodeBlock({
+  code,
+  language,
+  showLineNumbers,
+  name,
+}: Props) {
   useWindowSize();
 
   return (
     <div className="relative my-2 rounded bg-[#282C34] p-4 shadow-lg">
-      <Copy code={code}></Copy>
+      <Copy code={code} name={name}></Copy>
 
       <HeightMagic>
         <SyntaxHighlighter

www/components/CodeSnippets.tsx

@@ -79,6 +79,7 @@ export default function CodeSnippets() {
             </div>
           </div>
           <CodeBlock
+            name={tabs[activeTab].name}
             language={tabs[activeTab].language}
             showLineNumbers={tabs[activeTab].showLineNumbers}
             code={tabs[activeTab].code}

www/components/Copy.tsx

@@ -1,12 +1,14 @@
 import { ClipboardCheckIcon, ClipboardIcon } from "@heroicons/react/outline";
 import { useEffect, useState } from "react";
 import { useCopyToClipboard, useWindowSize } from "react-use";
+import { gtagEvent } from "../lib/gtag";
 
 interface Props {
   readonly code: string;
+  readonly name?: string;
 }
 
-export default function Copy({ code }: Props) {
+export default function Copy({ code, name }: Props) {
   const [copyToClipboardState, copyToClipboard] = useCopyToClipboard();
   const [copied, setCopied] = useState(false);
 
@@ -23,6 +25,12 @@ export default function Copy({ code }: Props) {
       type="button"
       className="absolute right-2 top-2 inline-flex items-center rounded border border-transparent bg-dark-800 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-dark-700"
       onClick={() => {
+        gtagEvent({
+          action: "copy_example_code",
+          category: "Code",
+          label: "Copied Code",
+          value: name,
+        });
         copyToClipboard(code);
         setCopied(true);
       }}

www/components/ExternalLink.tsx

@@ -1,23 +1,14 @@
-import mixpanel from "mixpanel-browser";
-
-interface Props {
-  readonly mixpanelEvent?: string;
-}
-
 export default function ExternalLink({
   ref,
   href,
   target,
   rel,
-  mixpanelEvent,
   ...props
-}: JSX.IntrinsicElements["a"] & Props): JSX.Element {
+}: JSX.IntrinsicElements["a"]): JSX.Element {
   return (
     <a
       {...props}
-      ref={(el) => {
-        el && mixpanel.track_links(el, mixpanelEvent ?? `Clicked Link`);
-      }}
+      // todo: add custom event for ext links? they are automatically tracked
       target={target ?? "_blank"}
       rel={rel ?? "noopener noreferrer"}
       href={href}

www/components/Footer.tsx

@@ -114,7 +114,6 @@ export default function Footer() {
               key={index}
               href={community.href}
               className="inline-block rounded border border-current py-3 px-5 text-base font-medium text-slate-600 hover:text-slate-900 dark:text-gray-200 hover:dark:text-white"
-              mixpanelEvent={community.name}
             >
               <FontAwesomeIcon
                 className="-ml-1 mr-3 text-current transition"

www/components/Header.tsx

@@ -4,7 +4,6 @@ import { SHUTTLE_DOCS_URL } from "../lib/constants";
 import ExternalLink from "./ExternalLink";
 import ThemeSwitch from "./ThemeSwitch";
 import NoSsr from "./NoSsr";
-import mixpanel from "mixpanel-browser";
 import LoginButton from "./LoginButton";
 
 const navigation = [
@@ -23,7 +22,7 @@ export default function Header() {
       <nav className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8" aria-label="Top">
         <div className="flex w-full items-center justify-between py-3">
           <div className="flex items-center">
-            <InternalLink href="/" mixpanelEvent="Shuttle Home">
+            <InternalLink href="/">
               <div className="relative m-auto flex">
                 <img
                   className="h-8 w-auto"
@@ -42,7 +41,6 @@ export default function Header() {
                     key={link.name}
                     href={link.href}
                     className="text-base font-medium text-slate-600 hover:text-slate-900 dark:text-gray-200 hover:dark:text-white"
-                    mixpanelEvent={link.name}
                   >
                     {link.name}
                   </InternalLink>
@@ -51,7 +49,6 @@ export default function Header() {
                     key={link.name}
                     href={link.href}
                     className="text-base font-medium text-slate-600 hover:text-slate-900 dark:text-gray-200 hover:dark:text-white"
-                    mixpanelEvent={link.name}
                   >
                     {link.name}
                   </ExternalLink>
@@ -74,8 +71,6 @@ export default function Header() {
                 key={link.name}
                 href={link.href}
                 className="text-base font-medium dark:text-gray-200 hover:dark:text-white"
-                onClick={() => void mixpanel.track(link.name)}
-                mixpanelEvent={link.name}
               >
                 {link.name}
               </InternalLink>
@@ -84,7 +79,6 @@ export default function Header() {
                 key={link.name}
                 href={link.href}
                 className="text-base font-medium dark:text-gray-200 hover:dark:text-white"
-                mixpanelEvent={link.name}
               >
                 {link.name}
               </ExternalLink>

www/components/Hero.tsx

@@ -58,15 +58,13 @@ export default function Hero() {
                 className="rounded bg-brand-900 py-3 px-8 font-bold text-white transition hover:bg-brand-700"
                 href={SHUTTLE_DOCS_URL}
                 target="_self"
-                mixpanelEvent="Get Started"
               >
                 Get Started
               </ExternalLink>
 
               <ExternalLink
                 className="rounded bg-brand-purple1 py-3 px-8 font-bold text-white transition hover:brightness-125"
                 href={DISCORD_URL}
-                mixpanelEvent="Join Discord"
               >
                 Join Discord
               </ExternalLink>

www/components/InternalLink.tsx

@@ -1,10 +1,5 @@
 import Link, { LinkProps } from "next/link";
 import { useRouter } from "next/router";
-import mixpanel from "mixpanel-browser";
-
-interface Props {
-  readonly mixpanelEvent?: string;
-}
 
 export default function InternalLink({
   href,
@@ -15,9 +10,8 @@ export default function InternalLink({
   passHref,
   prefetch,
   locale,
-  mixpanelEvent,
   ...props
-}: JSX.IntrinsicElements["a"] & LinkProps & Props): JSX.Element {
+}: JSX.IntrinsicElements["a"] & LinkProps): JSX.Element {
   const router = useRouter();
 
   if (!href) {
@@ -38,8 +32,6 @@ export default function InternalLink({
       <a
         {...props}
         onClick={(e) => {
-          mixpanelEvent && mixpanel.track(mixpanelEvent);
-
           if (router.pathname === href) {
             e.preventDefault();
 

www/components/LoginButton.tsx

@@ -1,6 +1,6 @@
 import { useApiKeyModalState } from "./ApiKeyModal";
 import { useUser } from "@auth0/nextjs-auth0";
-import mixpanel from "mixpanel-browser";
+import { gtagEvent } from "../lib/gtag";
 
 export default function LoginButton() {
   const { user, error, isLoading } = useUser();
@@ -15,7 +15,13 @@ export default function LoginButton() {
       <button
         className={className}
         onClick={() => {
-          mixpanel.track(label);
+          gtagEvent({
+            action: "login_click",
+            category: "Login",
+            label: "Existing Session Login",
+            // todo: track api-key?
+            // value: api-key,
+          });
 
           setOpen(true);
         }}
@@ -27,10 +33,16 @@ export default function LoginButton() {
 
   return (
     <a
-      className={className}
       href="/login"
-      ref={(el) => {
-        el && mixpanel.track_links(el, label);
+      className={className}
+      onClick={() => {
+        gtagEvent({
+          action: "new_login_click",
+          category: "Login",
+          label: "New Session Login",
+          // todo: track api-key?
+          // value: api-key,
+        });
       }}
     >
       {label}

www/lib/constants.ts

@@ -9,7 +9,7 @@ export const SITE_URL = "https://shuttle.rs/";
 
 export const TWITTER_HANDLE = "@shuttle_dev";
 
-export const MIXPANEL_TOKEN = "ea13713300ea92e06107f27762512e57";
+export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
 
 export const GITHUB_URL = "https://github.com/getsynth/shuttle";
 export const DISCORD_URL = "https://discord.gg/shuttle";

www/lib/gtag.ts

@@ -0,0 +1,36 @@
+import { NextRouter } from "next/router";
+import { GA_MEASUREMENT_ID } from "./constants";
+
+// https://developers.google.com/analytics/devguides/collection/ga4/event-parameters?client_type=gtag#set-up-every-event
+export const pageview = (url: string) => {
+  window.gtag("config", GA_MEASUREMENT_ID, {
+    page_path: url,
+  });
+};
+
+interface GtagEvent {
+  action: string;
+  category: string;
+  label: string;
+  value?: string;
+}
+// https://developers.google.com/analytics/devguides/collection/ga4/events?client_type=gtag
+export const gtagEvent = ({ action, category, label, value }: GtagEvent) => {
+  window.gtag("event", action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};
+
+export const setupGoogleAnalytics = (router: NextRouter) => {
+  const handleRouteChange = (url: string) => {
+    pageview(url);
+  };
+  router.events.on("routeChangeComplete", handleRouteChange);
+  router.events.on("hashChangeComplete", handleRouteChange);
+  return () => {
+    router.events.off("routeChangeComplete", handleRouteChange);
+    router.events.off("hashChangeComplete", handleRouteChange);
+  };
+};

www/package.json

@@ -26,7 +26,6 @@
     "classnames": "^2.3.1",
     "gray-matter": "^4.0.3",
     "markdown-toc": "^1.2.0",
-    "mixpanel-browser": "^2.45.0",
     "next": "^12.1.0",
     "next-mdx-remote": "^4.0.2",
     "next-seo": "^5.1.0",
@@ -44,6 +43,7 @@
     "ts-node": "^10.7.0"
   },
   "devDependencies": {
+    "@types/gtag.js": "^0.0.11",
     "@types/node": "^17.0.21",
     "@types/react": "^17.0.2",
     "autoprefixer": "^10.4.4",