Replace Hotjar with GA buttons

Author: gaearon

beta/.env.development

@@ -1,2 +0,0 @@
-NEXT_PUBLIC_HJ_SITE_ID = 2411683
-NEXT_PUBLIC_HJ_SITE_V = 6

beta/.env.production

@@ -1,3 +1 @@
-NEXT_PUBLIC_HJ_SITE_ID = 2411651
-NEXT_PUBLIC_HJ_SITE_V = 6
 NEXT_PUBLIC_GA_TRACKING_ID = 'G-3918VS75Y6'

beta/src/components/Layout/Sidebar/Sidebar.tsx

@@ -25,17 +25,6 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
     routeTree = (routeTree as any).routes[0];
   }
 
-  function handleFeedback() {
-    const nodes: any = document.querySelectorAll(
-      '#_hj_feedback_container button'
-    );
-    if (nodes.length > 0) {
-      nodes[nodes.length - 1].click();
-    } else {
-      window.location.href =
-        'https://github.com/reactjs/reactjs.org/issues/3308';
-    }
-  }
   const feedbackIcon = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -80,12 +69,28 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
           <SidebarRouteTree routeTree={routeTree} />
         )}
       </nav>
-      <div className="px-5 py-3 sticky bottom-0 lg:px-5 w-full hidden lg:flex items-center bg-gradient-to-t from-wash dark:from-wash-dark">
-        <Button
-          className="w-full text-center justify-center"
-          onClick={handleFeedback}>
-          {feedbackIcon} Feedback
-        </Button>
+      <div className="px-5 py-3 sticky bottom-0 lg:px-5 w-full hidden lg:flex bg-gradient-to-t from-wash dark:from-wash-dark">
+        <p>Is this page useful?</p>
+        <button
+          onClick={() => {
+            gtag('event', 'feedback', {
+              event_category: 'button',
+              event_label: window.location.pathname,
+              value: 1,
+            });
+          }}>
+          Yes
+        </button>
+        <button
+          onClick={() => {
+            gtag('event', 'feedback', {
+              event_category: 'button',
+              event_label: window.location.pathname,
+              value: 0,
+            });
+          }}>
+          No
+        </button>
       </div>
     </aside>
   );

beta/src/pages/_app.tsx

@@ -12,11 +12,6 @@ import '../styles/sandpack.css';
 import '@codesandbox/sandpack-react/dist/index.css';
 import Script from 'next/script';
 
-import {hotjar} from 'utils/hotjar';
-if (typeof window !== 'undefined') {
-  hotjar(process.env.NEXT_PUBLIC_HJ_SITE_ID, process.env.NEXT_PUBLIC_HJ_SITE_V);
-}
-
 const EmptyAppShell: React.FC = ({children}) => <>{children}</>;
 
 export default function MyApp({Component, pageProps}: AppProps) {
@@ -31,23 +26,21 @@ export default function MyApp({Component, pageProps}: AppProps) {
     <AppShell>
       <Component {...pageProps} />
       {process.env.NODE_ENV === 'production' && (
-        <>
-          <Script
-            strategy="lazyOnload"
-            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
-          />
-          <Script id="google-analytics" strategy="lazyOnload">
-            {`
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}', {
-              page_path: window.location.pathname,
-            });
-        `}
-          </Script>
-        </>
+        <Script
+          strategy="lazyOnload"
+          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
+        />
       )}
+      <Script id="google-analytics" strategy="lazyOnload">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}', {
+            page_path: window.location.pathname,
+          });
+        `}
+      </Script>
     </AppShell>
   );
 }