Merge pull request #15 from deco-sites/33770/traqueamento

components/Analytics.tsx

@@ -0,0 +1,30 @@
+import { sendEvent } from "site/sdk/analytics.ts";
+import type { AnalyticsEvent } from "apps/commerce/types.ts";
+import type ExtendedAnalyticsEvent from "site/components/analytics.d.ts";
+
+const SendEventOnClick = <E extends ExtendedAnalyticsEvent>(
+  { event, id }: { event: E; id: string },
+) => (
+  <script
+    type="module"
+    dangerouslySetInnerHTML={{
+      __html:
+        `addEventListener("load", () => {const element = document.getElementById("${id}"); element && element.addEventListener("click", () => (${sendEvent})(${
+          JSON.stringify(event)
+        }));})`,
+    }}
+  />
+);
+
+const SendEventOnLoad = <E extends AnalyticsEvent>({ event }: { event: E }) => (
+  <script
+    type="module"
+    dangerouslySetInnerHTML={{
+      __html: `addEventListener("load", () => (${sendEvent})(${
+        JSON.stringify(event)
+      }))`,
+    }}
+  />
+);
+
+export { SendEventOnClick, SendEventOnLoad };

components/analytics.d.ts

@@ -0,0 +1,41 @@
+import { Device } from "@deco/deco/utils";
+import { AnalyticsEvent } from "apps/commerce/types.ts";
+
+type Common = {
+  params: {
+    device: Device;
+    url: string;
+  }
+};
+
+type MenuClick = Common & {
+  name: 'menu_click';
+  params: {
+    name: string;
+  }
+};
+
+type SubmenuClick = Common & {
+  name: 'submenu_click';
+};
+
+type MainBannerClick = Common & {
+  name: 'banner_principal_click';
+  params: {
+    index: number;
+  }
+};
+
+type MiniBannerClick = Common & {
+  name: 'mini_banner_click';
+};
+
+type ExtendedAnalyticsEvent =
+  AnalyticsEvent
+  | MenuClick
+  | SubmenuClick
+  | MainBannerClick
+  | MiniBannerClick
+;
+
+export default ExtendedAnalyticsEvent;

components/header/MenuMobile.tsx

@@ -1,37 +1,63 @@
+import { useId } from "site/sdk/useId.ts";
 import { LinksProps } from "../../sections/Header/Header.tsx";
 import { IconArrowRightDrawer } from "../Icons/IconArrowRightDrawer.tsx";
 import Drawer from "../ui/Drawer/index.tsx";
-import { Items } from "./Menu.types.ts";
 import { MenuMobileDetails } from "./MenuMobileDetails.tsx";
 import { SignInMobile } from "./SignIn.tsx";
+import { Items } from "./Menu.types.ts";
+import { SendEventOnClick } from "site/components/Analytics.tsx";
+import { useDevice } from "@deco/deco/hooks";
 
 interface Props {
   navItems: Items[] | null | undefined;
   otherLinks: LinksProps[] | null | undefined;
 }
 
 export function MenuMobile({ navItems, otherLinks }: Props) {
+  const device = useDevice();
+
   const RenderOtherLinks = () => {
     if (otherLinks) {
       return (
         <nav class="mt-[30px] flex flex-col gap-5">
-          {otherLinks.map((item) => (
-            <a
-              href={item.href}
-              class="block text-accent text-xs leading-[18px]"
-            >
-              {item.title}
-            </a>
-          ))}
+          {otherLinks.map((item) => {
+            const itemID = useId();
+
+            return (
+              <>
+                <a
+                  href={item.href}
+                  class="block text-accent text-xs leading-[18px]"
+                  id={itemID}
+                >
+                  {item.title}
+                </a>
+
+                <SendEventOnClick
+                  id={itemID}
+                  event={{
+                    name: 'menu_click',
+                    params: {
+                      name: item.title,
+                      url: item.href,
+                      device
+                    }
+                  }}
+                />
+              </>
+            );
+          })}
         </nav>
       );
     }
+
     return null;
   };
 
   return (
     <div class="px-6 bg-base-100">
-      <SignInMobile />
+      <SignInMobile/>
+
       {navItems?.map((item) => (
         <div class="py-4 border-b border-secondary border-dashed">
           {item.submenu?.length
@@ -46,11 +72,12 @@ export function MenuMobile({ navItems, otherLinks }: Props) {
                       class="max-w-[calc(100vw_-_20px)]"
                     >
                       <div class="overflow-y-auto bg-base-100">
-                        <MenuMobileDetails submenu={item.submenu} />
+                        <MenuMobileDetails submenu={item.submenu}/>
                       </div>
                     </Drawer.Aside>
                   }
                 />
+
                 <p class="flex justify-between items-center h-full">
                   <label
                     for={item.menuItem}
@@ -60,7 +87,7 @@ export function MenuMobile({ navItems, otherLinks }: Props) {
                     {item.menuItem}
                   </label>
 
-                  <IconArrowRightDrawer />
+                  <IconArrowRightDrawer/>
                 </p>
               </>
             )
@@ -71,7 +98,8 @@ export function MenuMobile({ navItems, otherLinks }: Props) {
             )}
         </div>
       ))}
-      <RenderOtherLinks />
+
+      <RenderOtherLinks/>
     </div>
   );
 }

components/header/MenuMobileDetails.tsx

@@ -1,48 +1,91 @@
 import { IconArrowRightDropdown } from "../Icons/IconArrowRightDropdown.tsx";
+import { SendEventOnClick } from "site/components/Analytics.tsx";
+import { useId } from "site/sdk/useId.ts";
 import { Submenu } from "./Menu.types.ts";
+import { useDevice } from "@deco/deco/hooks";
 
 interface Props {
   submenu: Submenu[] | null | undefined;
 }
 
 export function MenuMobileDetails({ submenu }: Props) {
+  const device = useDevice();
+
   return (
     <div class="px-6">
-      {submenu?.map((item, index) => (
-        <details
-          key={index}
-          class="collapse rounded-none border-b border-secondary border-dashed group"
-        >
-          <summary class="text-xs text-accent py-4 font-bold !flex justify-between items-center">
-            {item.item[0]?.item || "Item"}
-            <IconArrowRightDropdown />
-          </summary>
-          <div>
-            {item.item.map((subItem) => {
-              if (subItem.highlight) return null;
-              return (
-                <a
-                  key={subItem.item}
-                  href={subItem.href}
-                  class={`block text-accent font-medium text-[13px] mb-5`}
-                >
-                  {subItem.item}
-                </a>
-              );
-            })}
-
-            {item.seeAll && (
-              <a
-                key={item.item[0]?.item}
-                href={item.item[0]?.href}
-                class={`block font-bold underline text-primary text-[13px] mb-4`}
-              >
-                Ver mais
-              </a>
-            )}
-          </div>
-        </details>
-      ))}
+      {submenu?.map((item, index) => {
+        const seeAllID = useId();
+
+        return (
+          <details
+            key={index}
+            class="collapse rounded-none border-b border-secondary border-dashed group"
+          >
+            <summary class="text-xs text-accent py-4 font-bold !flex justify-between items-center">
+              {item.item[0]?.item || "Item"}
+              <IconArrowRightDropdown/>
+            </summary>
+
+            <div>
+              {item.item.map((subItem) => {
+                if (subItem.highlight) return null;
+
+                const itemID = useId();
+
+                return (
+                  <>
+                    <a
+                      key={subItem.item}
+                      href={subItem.href}
+                      class={`block text-accent font-medium text-[13px] mb-5`}
+                      id={itemID}
+                    >
+                      {subItem.item}
+                    </a>
+
+                    <SendEventOnClick
+                      id={itemID}
+                      event={{
+                        name: 'submenu_click',
+                        params: {
+                          name: subItem.item,
+                          url: subItem.href,
+                          device
+                        }
+                      }}
+                    />
+                  </>
+                );
+              })}
+
+              {item.seeAll && (
+                <>
+                  <a
+                    key={item.item[0]?.item}
+                    href={item.item[0]?.href}
+                    class={`block font-bold underline text-primary text-[13px] mb-4`}
+                    id={seeAllID}
+                  >
+                    Ver mais
+                  </a>
+
+                  <SendEventOnClick
+                    id={seeAllID}
+                    event={{
+                      name: 'submenu_click',
+                      params: {
+                        name: 'Ver mais',
+                        url: item.item[0]?.href,
+                        device
+                      }
+                    }}
+                  />
+                </>
+              )}
+            </div>
+          </details>
+        );
+      })}
     </div>
   );
 }