feat: use ga and clarity

package.json

@@ -12,10 +12,10 @@
     "url": "git+https://github.com/sunnylife42/docs.git"
   },
   "license": "CC BY-NC 4.0",
-  "homepage": "https://sunnylife.love/docs",
+  "homepage": "https://sunnylife42.com/",
   "dependencies": {
+    "@next/third-parties": "^14.2.3",
     "next": "^13.1.6",
-    "next-plausible": "^3.7.2",
     "nextra": "latest",
     "nextra-theme-docs": "latest",
     "react": "^18.2.0",

pages/_app.tsx

@@ -2,11 +2,13 @@ import type { AppProps } from 'next/app';
 import type Viewer from 'viewerjs';
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import PlausibleProvider from 'next-plausible';
+import Script from 'next/script';
+import { GoogleTagManager } from '@next/third-parties/google';
 import 'viewerjs/dist/viewer.css';
 import '../styles/global.css';
 
 let viewer: Viewer;
+const isProduction = process.env.NODE_ENV === 'production';
 
 const initViewer = () => {
   const el = document.getElementById('main');
@@ -51,13 +53,21 @@ function App({ Component, pageProps }: AppProps) {
   }, [events]);
 
   return (
-    <PlausibleProvider
-      selfHosted
-      domain="sunnylife42.com"
-      customDomain="https://analytics.cyc.app"
-    >
+    <>
       <Component {...pageProps} />
-    </PlausibleProvider>
+      {isProduction && (
+        <>
+          <GoogleTagManager gtmId="G-BT21DSH0MG" />
+          <Script id="ms-clarity">
+            {`(function(c,l,a,r,i,t,y){
+          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+          })(window, document, "clarity", "script", "m9402dwuco");`}
+          </Script>
+        </>
+      )}
+    </>
   );
 }