Lego/analytics (#66)

## Summary
- Include Posthog (based on env. If no env. No Posthog)
- Include MetaPixel (based on env. If no env. No MetaPixel)

P.S.: All API-related changes are because of the latest version of API.
No changes were made.

.env.example

@@ -2,4 +2,7 @@ VITE_JSCL_API_URL='https://api.jsconf.dev/graphql'
 VITE_TOKEN_STORAGE_KEY='HS:token_storage_key'
 VITE_GOOGLE_MAPS_KEY='your_google_maps_key_here'
 VITE_SUPABASE_URL='your_supabase_url'
-VITE_SUPABASE_ANON_KEY='your_supabase_key'
+VITE_SUPABASE_ANON_KEY='your_supabase_key'
+VITE_POSTHOG_KEY='your_posthog_key'
+VITE_POSTHOG_URL='your_posthog_url'
+VITE_META_PIXEL='your_meta_pixel'

app/entry.client.tsx

@@ -5,14 +5,47 @@
  */
 
 import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
+import { posthog } from "posthog-js";
+import { startTransition, StrictMode, useEffect } from "react";
 import { hydrateRoot } from "react-dom/client";
 
+import { init } from "./utils/meta-pixel";
+
+function PosthogInit() {
+  useEffect(() => {
+    const posthogKey = (import.meta.env.VITE_POSTHOG_KEY ?? "") as string;
+    const posthogHost = (import.meta.env.VITE_POSTHOG_URL ?? "") as string;
+
+    if (posthogKey && posthogHost) {
+      posthog.init(posthogKey, {
+        api_host: posthogHost,
+        person_profiles: "identified_only",
+      });
+    }
+  }, []);
+
+  return null;
+}
+
+function MetaPixelInit() {
+  useEffect(() => {
+    const metaPixelId = (import.meta.env.VITE_META_PIXEL_ID ?? "") as string;
+
+    if (metaPixelId) {
+      init(metaPixelId);
+    }
+  }, []);
+
+  return null;
+}
+
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
       <RemixBrowser />
+      <PosthogInit />
+      <MetaPixelInit />
     </StrictMode>,
   );
 });

app/root.tsx

@@ -10,6 +10,7 @@ import {
 import { setDefaultOptions } from "date-fns";
 import { es } from "date-fns/locale";
 import { AnimatePresence, motion } from "framer-motion";
+import { useEffect } from "react";
 
 import "cal-sans";
 import "@fontsource-variable/inter";
@@ -19,6 +20,7 @@ import { Footer } from "~/components/Footer";
 import { Navbar } from "~/components/Navbar";
 import { Toaster } from "~/components/ui/sonner";
 import { getDefaultThemeKey } from "~/rootHelpers";
+import { pageview } from "~/utils/meta-pixel";
 import { AuthProvider } from "~/utils/supabase/AuthProvider";
 
 import "./tailwind.css";
@@ -87,6 +89,16 @@ export const meta: MetaFunction = () => {
   ];
 };
 
+function MetaPageviews() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    pageview();
+  }, [pathname]);
+
+  return null;
+}
+
 export default function App() {
   return (
     <AuthProvider>
@@ -107,6 +119,7 @@ export default function App() {
         </AnimatePresence>
         <Footer />
         <Toaster />
+        <MetaPageviews />
       </ApolloWrapper>
     </AuthProvider>
   );

app/utils/meta-pixel.js

@@ -0,0 +1,34 @@
+function initializeFacebookPixel(f, b, e, v, n, t, s) {
+  if (f.fbq) return;
+  n = f.fbq = function () {
+    n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
+  };
+  if (!f._fbq) f._fbq = n;
+  n.push = n;
+  n.loaded = !0;
+  n.version = "2.0";
+  n.queue = [];
+  t = b.createElement(e);
+  t.async = !0;
+  t.src = v;
+  s = b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t, s);
+}
+
+export const init = (pixelId) => {
+  initializeFacebookPixel(
+    window,
+    document,
+    "script",
+    "https://connect.facebook.net/en_US/fbevents.js",
+  );
+  if (window?.fbq) {
+    window.fbq("init", pixelId);
+  }
+};
+
+export const pageview = () => {
+  if (window?.fbq) {
+    window.fbq("track", "PageView");
+  }
+};

package.json

@@ -57,6 +57,7 @@
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.438.0",
     "next-themes": "^0.3.0",
+    "posthog-js": "^1.184.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.53.0",