Merge pull request #53 from deco-sites/feat/analytics

fix events

components/Analytics.tsx

@@ -1,35 +1,34 @@
 import { sendEvent } from "$store/sdk/analytics.tsx";
 import type { AnalyticsEvent } from "apps/commerce/types.ts";
+import { scriptAsDataURI } from "apps/utils/dataURI.ts";
+
+const snippet = (id: string, event: AnalyticsEvent) => {
+  const element = document.getElementById(id);
+
+  if (!element) {
+    console.warn(
+      `Could not find element ${id}. Click event will not be send. This will cause loss in analytics`,
+    );
+  } else {
+    element.addEventListener(
+      "click",
+      () => window.DECO.events.dispatch(event),
+    );
+  }
+};
 
 /**
  * This function is usefull for sending events on click. Works with both Server and Islands components
  */
 export const SendEventOnClick = <E extends AnalyticsEvent>({ event, id }: {
   event: E;
   id: string;
-}) => (
-  <script
-    type="module"
-    dangerouslySetInnerHTML={{
-      __html:
-        `document.getElementById("${id}").addEventListener("click", () => (${sendEvent})(${
-          JSON.stringify(event)
-        }));`,
-    }}
-  />
-);
+}) => <script defer src={scriptAsDataURI(snippet, id, event)} />;
 
 /**
  * This componente should be used when want to send event for rendered componentes.
  * This behavior is usefull for view_* events.
  */
 export const SendEventOnLoad = <E extends AnalyticsEvent>(
   { event }: { event: E },
-) => (
-  <script
-    type="module"
-    dangerouslySetInnerHTML={{
-      __html: `(${sendEvent})(${JSON.stringify(event)});`,
-    }}
-  />
-);
+) => <script defer src={scriptAsDataURI(sendEvent, event)} />;

deno.json

@@ -1,8 +1,8 @@
 {
   "imports": {
     "$store/": "./",
-    "deco/": "https://denopkg.com/deco-cx/[email protected].1/",
-    "apps/": "https://denopkg.com/deco-cx/[email protected].2/",
+    "deco/": "https://denopkg.com/deco-cx/[email protected].3/",
+    "apps/": "https://denopkg.com/deco-cx/[email protected].14/",
     "$fresh/": "https://denopkg.com/denoland/fresh@7ad4610e3a42aba42638cbc1041b96ee58a9b29e/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",