Use reusable analytics client (#2005)

Author: visnup

docs/.vitepress/theme/index.ts

@@ -17,60 +17,16 @@ export default {
   }
 };
 
-function enableAnalytics(router) {
+async function enableAnalytics(router) {
   if (typeof location === "undefined" || location.origin !== "https://observablehq.com") return;
-
+  const {pageLoad, routeChanged} = await import("https://events.observablehq.com/client.js");
   let pageLoaded;
-  let queue: any[] | null = [];
-  let user;
-
   watch(router.route, () => {
     if (pageLoaded) {
-      emit({
-        type: "routeChanged",
-        event_version: 2,
-        data: {},
-        tags: {}
-      });
+      routeChanged();
     } else {
-      emit({
-        type: "pageLoad",
-        event_version: 1,
-        data: {referrer: document.referrer.replace(/\?.*/, "")},
-        tags: {}
-      });
+      pageLoad();
       pageLoaded = true;
     }
   });
-
-  fetch("https://api.observablehq.com/user", {credentials: "include"})
-    .then((response) => (response.ok ? response.json() : null))
-    .then(
-      (u) => (user = u),
-      () => (user = null)
-    )
-    .then(() => (sendEvents(queue), (queue = null)));
-
-  function emit(event) {
-    event.time = new Date().toISOString();
-    event.location = `${location.origin}${location.pathname}${location.search}`; // drop hash
-    if (queue) queue.push(event);
-    else sendEvents([event]);
-  }
-
-  function sendEvents(events) {
-    if (!events.length) return;
-    navigator.sendBeacon(
-      "https://events.observablehq.com/beacon-events",
-      JSON.stringify({
-        events: events.map((event) => ({
-          ...event,
-          release: null,
-          user_id: user?.id ?? null,
-          user_agent: navigator.userAgent
-        })),
-        send_time: new Date().toISOString()
-      })
-    );
-  }
-}
+}