new things

src/shared/amplitude/index.tsx

@@ -0,0 +1,49 @@
+import Script from 'next/script';
+
+function Amplitude() {
+  return (
+    <>
+      <Script
+        src="https://cdn.amplitude.com/libs/analytics-browser-2.11.1-min.js.gz"
+        strategy="beforeInteractive"
+      />
+      <Script
+        src="https://cdn.amplitude.com/libs/plugin-session-replay-browser-1.23.2-min.js.gz"
+        strategy="beforeInteractive"
+      />
+      <Script
+        id="amplitude-init"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            async function getOrCreateUserId() {
+              let userId = localStorage.getItem('anon_user_id');
+              if (!userId) {
+                try {
+                  const res = await fetch('/api/user-id', { method: 'POST' });
+                  const data = await res.json();
+                  userId = data.userId;
+                  localStorage.setItem('anon_user_id', userId);
+                } catch (e) {
+                  userId = 'user_fallback_' + Math.random().toString(36).slice(2);
+                  localStorage.setItem('anon_user_id', userId);
+                }
+              }
+              return userId;
+            }
+
+            getOrCreateUserId().then(userId => {
+              window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 }));
+              window.amplitude.init('618500dd065c8ab3935280689174de37', {
+                userId: userId,
+                autocapture: { elementInteractions: true }
+              });
+            });
+          `,
+        }}
+      />
+    </>
+  );
+}
+
+export default Amplitude;