Merge pull request #318 from authzed/scripts-update

Scripts update

Author: samkim

.gitignore

@@ -1,8 +1,8 @@
-.docusaurus/*
 build/*
 node_modules/*
 .vercel
 .next
+.env*
 
 # Generated
 public/robots.txt

components/nextra/Search.tsx

@@ -27,6 +27,7 @@ import { useRouter } from 'next/router';
 import { Link } from 'nextra-theme-docs';
 import { useMounted } from 'nextra/hooks';
 import { InformationCircleIcon, SpinnerIcon } from 'nextra/icons';
+import { usePostHog } from 'posthog-js/react';
 import type { CompositionEvent, KeyboardEvent, ReactElement } from 'react';
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { Input } from './Input';
@@ -64,6 +65,7 @@ export function Search({
   const [focused, setFocused] = useState(false);
   //  Trigger the search after the Input is complete for languages like Chinese
   const [composition, setComposition] = useState(true);
+  const posthog = usePostHog();
 
   useEffect(() => {
     setActive(0);
@@ -101,6 +103,7 @@ export function Search({
   }, []);
 
   const finishSearch = useCallback(() => {
+    posthog?.capture('search', { query: input.current.value });
     input.current?.blur();
     onChange('');
     setShow(false);

components/scripts.tsx

@@ -1,13 +1,18 @@
 'use client';
 
 import inEU from '@segment/in-eu';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { Router } from 'next/router';
 import Script from 'next/script';
+import posthog from 'posthog-js';
 import { useEffect, useState } from 'react';
 
-export default function Scripts() {
+const isProd = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
+
+function Reo() {
+  const reoClientId = process.env.NEXT_PUBLIC_REO_CLIENT_ID;
   const [loadReo, setLoadReo] = useState(false);
   const [afterLoad, setAfterLoad] = useState(false);
-  const isProd = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
 
   useEffect(() => {
     if (window) {
@@ -19,18 +24,97 @@ export default function Scripts() {
     // @ts-ignore
     if (afterLoad && window.Reo) {
       // @ts-ignore
-      window.Reo.init({ clientID: 'bf9727b30a874e3' });
+      window.Reo.init({ clientID: reoClientId });
     }
   }, [afterLoad]);
 
   return (
     <div>
-      {isProd && loadReo && (
+      {reoClientId && isProd && loadReo && (
+        <Script
+          src={`https://static.reo.dev/${reoClientId}/reo.js`}
+          onLoad={() => setAfterLoad(true)}
+          defer
+        ></Script>
+      )}
+    </div>
+  );
+}
+
+function HubSpot() {
+  const hsId = process.env.NEXT_PUBLIC_HUBSPOT_ID;
+  const [loadHs, setLoadHs] = useState(false);
+  const [afterLoad, setAfterLoad] = useState(false);
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (window) {
+      setLoadHs(!inEU());
+    }
+  }, [loadHs]);
+
+  useEffect(() => {
+    // @ts-ignore
+    const hs = window?._hsq;
+    if (afterLoad && pathname && hs) {
+      let path = pathname;
+      if (searchParams && searchParams.toString()) {
+        path = path + `?${searchParams.toString()}`;
+      }
+      hs.push(['setPath', path]);
+      hs.push(['trackPageView']);
+    }
+  }, [afterLoad, pathname, searchParams]);
+
+  return (
+    <div>
+      {hsId && isProd && loadHs && (
         <Script
-          src="https://static.reo.dev/bf9727b30a874e3/reo.js"
+          id="hs-script-loader"
+          async
+          defer
+          src={`//js.hs-scripts.com/${hsId}.js`}
           onLoad={() => setAfterLoad(true)}
         ></Script>
       )}
     </div>
   );
 }
+
+function Posthog() {
+  useEffect(() => {
+    if (inEU() || !process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+      return;
+    }
+
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY ?? '', {
+      api_host: isProd ? '/ingest' : process.env.NEXT_PUBLIC_POSTHOG_HOST, // See Posthog rewrites in next config
+      ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      person_profiles: 'always',
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === 'development') posthog.debug();
+      },
+    });
+
+    const handleRouteChange = () => posthog?.capture('$pageview');
+
+    Router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      Router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, []);
+
+  return <></>;
+}
+
+export default function Scripts() {
+  return (
+    <div>
+      <Reo />
+      <HubSpot />
+      <Posthog />
+    </div>
+  );
+}

package.json

@@ -32,6 +32,7 @@
     "next-sitemap": "^4.2.3",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
+    "posthog-js": "^1.223.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-youtube": "^10.1.0",

pages/_app.mdx

@@ -1,3 +1,5 @@
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
 import { SpeedInsights } from "@vercel/speed-insights/next"
 
 import Layout from '@/components/layout';
@@ -7,7 +9,9 @@ export default function MyApp({ Component, pageProps }) {
   return (
     <Layout>
       <SpeedInsights/>
-      <Component {...pageProps} />
+      <PostHogProvider client={posthog}>
+        <Component {...pageProps} />
+      </PostHogProvider>
     </Layout>
   );
 }