Avoid multiple plausibles (#1010)

deco-cx · Feb 18, 2025 · 3e4fa5f · 3e4fa5f
1 parent 7d6ecee
commit 3e4fa5f
Showing 1 changed file with 61 additions and 50 deletions.
diff --git a/analytics/components/DecoAnalytics.tsx b/analytics/components/DecoAnalytics.tsx
@@ -9,66 +9,77 @@ export interface Props {
 }
 declare global {
   interface Window {
+    plausibleInitialized: boolean;
     plausible: (name: string, params: {
       props: Record<string, string | boolean>;
     }) => void;
   }
 }
 // This function should be self contained, because it is stringified!
-const snippet = () => {
-  // Flags and additional dimentions
-  const props: Record<string, string> = {};
-  const trackPageview = () =>
-    globalThis.window.plausible?.("pageview", { props });
-  // Attach pushState and popState listeners
-  const originalPushState = history.pushState;
-  if (originalPushState) {
-    history.pushState = function () {
-      // @ts-ignore monkey patch
-      originalPushState.apply(this, arguments);
-      trackPageview();
-    };
-    addEventListener("popstate", trackPageview);
-  }
-  // 2000 bytes limit
-  const truncate = (str: string) => `${str}`.slice(0, 990);
-  // setup plausible script and unsubscribe
-  globalThis.window.DECO.events.subscribe((event) => {
-    if (!event || event.name !== "deco") {
-      return;
+const snippet = (() => {
+  globalThis.window.plausibleInitialized = false;
+  return () => {
+    if (globalThis.window.plausibleInitialized) return;
+    globalThis.window.plausibleInitialized = true;
+
+    // Flags and additional dimensions
+    const props: Record<string, string> = {};
+    const trackPageview = () =>
+      globalThis.window.plausible?.("pageview", { props });
+
+    // Attach pushState and popState listeners
+    const originalPushState = history.pushState;
+    if (originalPushState) {
+      history.pushState = function () {
+        // @ts-ignore monkey patch
+        originalPushState.apply(this, arguments);
+        trackPageview();
+      };
+      addEventListener("popstate", trackPageview);
     }
-    if (event.params) {
-      const { flags, page } = event.params;
-      if (Array.isArray(flags)) {
-        for (const flag of flags) {
-          props[flag.name] = truncate(flag.value.toString());
+
+    // 2000 bytes limit
+    const truncate = (str: string) => `${str}`.slice(0, 990);
+
+    // setup plausible script and unsubscribe
+    globalThis.window.DECO.events.subscribe((event) => {
+      if (!event || event.name !== "deco") {
+        return;
+      }
+      if (event.params) {
+        const { flags, page } = event.params;
+        if (Array.isArray(flags)) {
+          for (const flag of flags) {
+            props[flag.name] = truncate(flag.value.toString());
+          }
         }
+        props["pageId"] = truncate(`${page.id}`);
       }
-      props["pageId"] = truncate(`${page.id}`);
-    }
-    trackPageview();
-  })();
-  globalThis.window.DECO.events.subscribe((event) => {
-    if (!event) {
-      return;
-    }
-    const { name, params } = event;
-    if (!name || !params || name === "deco") {
-      return;
-    }
-    const values = { ...props };
-    for (const key in params) {
-      // @ts-expect-error somehow typescript bugs
-      const value = params[key];
-      if (value !== null && value !== undefined) {
-        values[key] = truncate(
-          typeof value !== "object" ? value : JSON.stringify(value),
-        );
+      trackPageview();
+    })();
+
+    globalThis.window.DECO.events.subscribe((event) => {
+      if (!event) {
+        return;
       }
-    }
-    globalThis.window.plausible?.(name, { props: values });
-  });
-};
+      const { name, params } = event;
+      if (!name || !params || name === "deco") {
+        return;
+      }
+      const values = { ...props };
+      for (const key in params) {
+        // @ts-expect-error somehow typescript bugs
+        const value = params[key];
+        if (value !== null && value !== undefined) {
+          values[key] = truncate(
+            typeof value !== "object" ? value : JSON.stringify(value),
+          );
+        }
+      }
+      globalThis.window.plausible?.(name, { props: values });
+    });
+  };
+})();
 function Component({ exclude, domain }: Props) {
   return (
     <Head>