From bce0d508217b9b10b5324acbb20afbf63130286c Mon Sep 17 00:00:00 2001
From: gimenes <tlgimenes@gmail.com>
Date: Mon, 6 Nov 2023 14:00:03 -0300
Subject: [PATCH 1/2] improve cart events

---
 components/Analytics.tsx                      | 14 +++---
 components/product/AddToCartButton/common.tsx | 34 +++----------
 components/product/AddToCartButton/linx.tsx   | 13 +++--
 .../product/AddToCartButton/shopify.tsx       | 10 ++--
 components/product/AddToCartButton/vnda.tsx   | 13 +++--
 components/product/AddToCartButton/vtex.tsx   | 11 +++--
 components/product/AddToCartButton/wake.tsx   | 11 +++--
 components/product/ProductInfo.tsx            | 48 ++++++++++++++-----
 components/product/ProductShelf.tsx           |  3 +-
 components/product/ProductShelfTabbed.tsx     |  5 +-
 deno.json                                     |  2 +-
 dev.ts                                        |  4 ++
 sdk/analytics.tsx                             |  4 +-
 13 files changed, 95 insertions(+), 77 deletions(-)

diff --git a/components/Analytics.tsx b/components/Analytics.tsx
index 1b2a4854..32b99853 100644
--- a/components/Analytics.tsx
+++ b/components/Analytics.tsx
@@ -6,15 +6,15 @@ const snippet = (id: string, event: AnalyticsEvent) => {
   const element = document.getElementById(id);
 
   if (!element) {
-    console.warn(
+    return 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),
-    );
   }
+
+  element.addEventListener("click", () => {
+    console.log(JSON.stringify(event, null, 2));
+    window.DECO.events.dispatch(event);
+  });
 };
 
 /**
@@ -30,5 +30,5 @@ export const SendEventOnClick = <E extends AnalyticsEvent>({ event, id }: {
  * This behavior is usefull for view_* events.
  */
 export const SendEventOnLoad = <E extends AnalyticsEvent>(
-  { event }: { event: E },
+  { event }: { event: E; id?: string },
 ) => <script defer src={scriptAsDataURI(sendEvent, event)} />;
diff --git a/components/product/AddToCartButton/common.tsx b/components/product/AddToCartButton/common.tsx
index 8ac226fe..bd9268b0 100644
--- a/components/product/AddToCartButton/common.tsx
+++ b/components/product/AddToCartButton/common.tsx
@@ -1,28 +1,16 @@
 import Button from "$store/components/ui/Button.tsx";
 import { sendEvent } from "$store/sdk/analytics.tsx";
 import { useUI } from "$store/sdk/useUI.ts";
+import { AddToCartParams } from "apps/commerce/types.ts";
 import { useState } from "preact/hooks";
 
 export interface Props {
   /** @description: sku name */
-  name: string;
-  productID: string;
-  productGroupID: string;
-  price: number;
-  discount: number;
-  url: string;
+  eventParams: AddToCartParams;
   onAddItem: () => Promise<void>;
 }
 
-const useAddToCart = ({
-  price,
-  name,
-  discount,
-  productGroupID,
-  productID,
-  url,
-  onAddItem,
-}: Props) => {
+const useAddToCart = ({ eventParams, onAddItem }: Props) => {
   const [loading, setLoading] = useState(false);
   const { displayCart } = useUI();
 
@@ -37,17 +25,7 @@ const useAddToCart = ({
 
       sendEvent({
         name: "add_to_cart",
-        params: {
-          items: [{
-            quantity: 1,
-            price,
-            item_url: url,
-            item_name: name,
-            discount: discount,
-            item_id: productID,
-            item_variant: name,
-          }],
-        },
+        params: eventParams,
       });
 
       displayCart.value = true;
@@ -56,14 +34,14 @@ const useAddToCart = ({
     }
   };
 
-  return { onClick, loading };
+  return { onClick, loading, "data-deco": "add-to-cart" };
 };
 
 export default function AddToCartButton(props: Props) {
   const btnProps = useAddToCart(props);
 
   return (
-    <Button {...btnProps} data-deco="add-to-cart" class="btn-primary">
+    <Button {...btnProps} class="btn-primary">
       Adicionar à Sacola
     </Button>
   );
diff --git a/components/product/AddToCartButton/linx.tsx b/components/product/AddToCartButton/linx.tsx
index 692721d0..c613294f 100644
--- a/components/product/AddToCartButton/linx.tsx
+++ b/components/product/AddToCartButton/linx.tsx
@@ -1,18 +1,21 @@
 import { useCart } from "apps/linx/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-export type Props = Omit<BtnProps, "onAddItem" | "platform">;
+export type Props = Omit<BtnProps, "onAddItem"> & {
+  productID: string;
+  productGroupID: string;
+};
 
-function AddToCartButton(props: Props) {
+function AddToCartButton({ productGroupID, productID }: Props) {
   const { addItem } = useCart();
 
   return (
     <Button
-      {...props}
+      eventParams={eventParams}
       onAddItem={() =>
         addItem({
-          ProductID: props.productGroupID,
-          SkuID: props.productID,
+          ProductID: productGroupID,
+          SkuID: productID,
           Quantity: 1,
         })}
     />
diff --git a/components/product/AddToCartButton/shopify.tsx b/components/product/AddToCartButton/shopify.tsx
index 8260b210..badb7f27 100644
--- a/components/product/AddToCartButton/shopify.tsx
+++ b/components/product/AddToCartButton/shopify.tsx
@@ -1,18 +1,20 @@
 import { useCart } from "apps/shopify/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-export type Props = Omit<BtnProps, "onAddItem" | "platform">;
+export type Props = Omit<BtnProps, "onAddItem"> & {
+  productID: string;
+};
 
-function AddToCartButton(props: Props) {
+function AddToCartButton({ productID, eventParams }: Props) {
   const { addItems } = useCart();
   const onAddItem = () =>
     addItems({
       lines: {
-        merchandiseId: props.productID,
+        merchandiseId: productID,
       },
     });
 
-  return <Button onAddItem={onAddItem} {...props} />;
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
 }
 
 export default AddToCartButton;
diff --git a/components/product/AddToCartButton/vnda.tsx b/components/product/AddToCartButton/vnda.tsx
index 566abd13..4dc635f8 100644
--- a/components/product/AddToCartButton/vnda.tsx
+++ b/components/product/AddToCartButton/vnda.tsx
@@ -2,22 +2,25 @@ import { PropertyValue } from "apps/commerce/types.ts";
 import { useCart } from "apps/vnda/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-export interface Props extends Omit<BtnProps, "onAddItem" | "platform"> {
+export interface Props extends Omit<BtnProps, "onAddItem"> {
+  productID: string;
   additionalProperty: PropertyValue[];
 }
 
-function AddToCartButton(props: Props) {
+function AddToCartButton(
+  { productID, additionalProperty, eventParams }: Props,
+) {
   const { addItem } = useCart();
   const onAddItem = () =>
     addItem({
       quantity: 1,
-      itemId: props.productID,
+      itemId: productID,
       attributes: Object.fromEntries(
-        props.additionalProperty.map(({ name, value }) => [name, value]),
+        additionalProperty.map(({ name, value }) => [name, value]),
       ),
     });
 
-  return <Button onAddItem={onAddItem} {...props} />;
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
 }
 
 export default AddToCartButton;
diff --git a/components/product/AddToCartButton/vtex.tsx b/components/product/AddToCartButton/vtex.tsx
index 018e2f9f..5f44064f 100644
--- a/components/product/AddToCartButton/vtex.tsx
+++ b/components/product/AddToCartButton/vtex.tsx
@@ -1,22 +1,23 @@
 import { useCart } from "apps/vtex/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-export interface Props extends Omit<BtnProps, "onAddItem" | "platform"> {
+export interface Props extends Omit<BtnProps, "onAddItem"> {
   seller: string;
+  productID: string;
 }
 
-function AddToCartButton(props: Props) {
+function AddToCartButton({ seller, productID, eventParams }: Props) {
   const { addItems } = useCart();
   const onAddItem = () =>
     addItems({
       orderItems: [{
-        id: props.productID,
-        seller: props.seller,
+        id: productID,
+        seller: seller,
         quantity: 1,
       }],
     });
 
-  return <Button onAddItem={onAddItem} {...props} />;
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
 }
 
 export default AddToCartButton;
diff --git a/components/product/AddToCartButton/wake.tsx b/components/product/AddToCartButton/wake.tsx
index 2fd6d147..fcf8af39 100644
--- a/components/product/AddToCartButton/wake.tsx
+++ b/components/product/AddToCartButton/wake.tsx
@@ -1,19 +1,20 @@
 import { useCart } from "apps/wake/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-// deno-lint-ignore no-empty-interface
-export interface Props extends Omit<BtnProps, "onAddItem" | "platform"> {
+
+export interface Props extends Omit<BtnProps, "onAddItem"> {
+  productID: string;
 }
 
-function AddToCartButton(props: Props) {
+function AddToCartButton({ productID, eventParams }: Props) {
   const { addItem } = useCart();
   const onAddItem = () =>
     addItem({
-      productVariantId: Number(props.productID),
+      productVariantId: Number(productID),
       quantity: 1,
     });
 
-  return <Button onAddItem={onAddItem} {...props} />;
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
 }
 
 export default AddToCartButton;
diff --git a/components/product/ProductInfo.tsx b/components/product/ProductInfo.tsx
index bce4e0f9..96e8e4b3 100644
--- a/components/product/ProductInfo.tsx
+++ b/components/product/ProductInfo.tsx
@@ -46,6 +46,7 @@ function ProductInfo({ page, layout }: Props) {
     gtin,
     isVariantOf,
     additionalProperty = [],
+    brand,
   } = product;
   const description = product.description || isVariantOf?.description;
   const {
@@ -57,13 +58,26 @@ function ProductInfo({ page, layout }: Props) {
   } = useOffer(offers);
   const productGroupID = isVariantOf?.productGroupID ?? "";
   const discount = price && listPrice ? listPrice - price : 0;
+  const breadcrumb = {
+    ...breadcrumbList,
+    itemListElement: breadcrumbList?.itemListElement.slice(0, -1),
+    numberOfItems: breadcrumbList.numberOfItems - 1,
+  };
+
+  const eventItem = {
+    item_list_id: "product",
+    item_list_name: "Product",
+    ...mapProductToAnalyticsItem({
+      product,
+      breadcrumbList: breadcrumb,
+      price,
+      listPrice,
+    }),
+  };
 
   return (
     <div class="flex flex-col">
-      {/* Breadcrumb */}
-      <Breadcrumb
-        itemListElement={breadcrumbList?.itemListElement.slice(0, -1)}
-      />
+      <Breadcrumb itemListElement={breadcrumb.itemListElement} />
       {/* Code and name */}
       <div class="mt-4 sm:mt-8">
         <div>
@@ -111,8 +125,11 @@ function ProductInfo({ page, layout }: Props) {
               {platform === "vtex" && (
                 <>
                   <AddToCartButtonVTEX
+                    eventParams={{ items: [eventItem] }}
                     url={url || ""}
                     name={name}
+                    groupName={isVariantOf?.name ?? ""}
+                    brand={brand?.name ?? ""}
                     productID={productID}
                     productGroupID={productGroupID}
                     price={price}
@@ -128,8 +145,11 @@ function ProductInfo({ page, layout }: Props) {
               )}
               {platform === "wake" && (
                 <AddToCartButtonWake
+                  eventParams={{ items: [eventItem] }}
                   url={url || ""}
                   name={name}
+                  groupName={isVariantOf?.name ?? ""}
+                  brand={brand?.name ?? ""}
                   productID={productID}
                   productGroupID={productGroupID}
                   price={price}
@@ -138,8 +158,11 @@ function ProductInfo({ page, layout }: Props) {
               )}
               {platform === "linx" && (
                 <AddToCartButtonLinx
+                  eventParams={{ items: [eventItem] }}
                   url={url || ""}
                   name={name}
+                  groupName={isVariantOf?.name ?? ""}
+                  brand={brand?.name ?? ""}
                   productID={productID}
                   productGroupID={productGroupID}
                   price={price}
@@ -148,8 +171,11 @@ function ProductInfo({ page, layout }: Props) {
               )}
               {platform === "vnda" && (
                 <AddToCartButtonVNDA
+                  eventParams={{ items: [eventItem] }}
                   url={url || ""}
                   name={name}
+                  groupName={isVariantOf?.name ?? ""}
+                  brand={brand?.name ?? ""}
                   productID={productID}
                   productGroupID={productGroupID}
                   price={price}
@@ -159,8 +185,11 @@ function ProductInfo({ page, layout }: Props) {
               )}
               {platform === "shopify" && (
                 <AddToCartButtonShopify
+                  eventParams={{ items: [eventItem] }}
                   url={url || ""}
                   name={name}
+                  groupName={isVariantOf?.name ?? ""}
+                  brand={brand?.name ?? ""}
                   productID={productID}
                   productGroupID={productGroupID}
                   price={price}
@@ -202,14 +231,9 @@ function ProductInfo({ page, layout }: Props) {
         event={{
           name: "view_item",
           params: {
-            items: [
-              mapProductToAnalyticsItem({
-                product,
-                breadcrumbList,
-                price,
-                listPrice,
-              }),
-            ],
+            item_list_id: "product",
+            item_list_name: "Product",
+            items: [eventItem],
           },
         }}
       />
diff --git a/components/product/ProductShelf.tsx b/components/product/ProductShelf.tsx
index 2c42478a..89d2449c 100644
--- a/components/product/ProductShelf.tsx
+++ b/components/product/ProductShelf.tsx
@@ -85,8 +85,9 @@ function ProductShelf({
             name: "view_item_list",
             params: {
               item_list_name: title,
-              items: products.map((product) =>
+              items: products.map((product, index) =>
                 mapProductToAnalyticsItem({
+                  index,
                   product,
                   ...(useOffer(product.offers)),
                 })
diff --git a/components/product/ProductShelfTabbed.tsx b/components/product/ProductShelfTabbed.tsx
index 9f0da69d..a75ddfd8 100644
--- a/components/product/ProductShelfTabbed.tsx
+++ b/components/product/ProductShelfTabbed.tsx
@@ -29,7 +29,6 @@ export interface Props {
   };
   cardLayout?: cardLayout;
   tabIndex?: number;
-  id?: string;
 }
 
 function TabbedProductShelf({
@@ -39,7 +38,6 @@ function TabbedProductShelf({
   layout,
   cardLayout,
   tabIndex,
-  id: sectionId,
 }: Props) {
   const id = useId();
   const platform = usePlatform();
@@ -113,8 +111,9 @@ function TabbedProductShelf({
             name: "view_item_list",
             params: {
               item_list_name: title,
-              items: products.map((product) =>
+              items: products.map((product, index) =>
                 mapProductToAnalyticsItem({
+                  index,
                   product,
                   ...(useOffer(product.offers)),
                 })
diff --git a/deno.json b/deno.json
index 87235ca2..f7b489d0 100644
--- a/deno.json
+++ b/deno.json
@@ -2,7 +2,7 @@
   "imports": {
     "$store/": "./",
     "deco/": "https://denopkg.com/deco-cx/deco@1.45.7/",
-    "apps/": "https://denopkg.com/deco-cx/apps@0.20.1/",
+    "apps/": "https://denopkg.com/deco-cx/apps@0.21.1/",
     "$fresh/": "https://denopkg.com/denoland/fresh@7ad4610e3a42aba42638cbc1041b96ee58a9b29e/",
     "preact": "https://esm.sh/preact@10.15.1",
     "preact/": "https://esm.sh/preact@10.15.1/",
diff --git a/dev.ts b/dev.ts
index ca66c2d8..244fa45f 100755
--- a/dev.ts
+++ b/dev.ts
@@ -1,6 +1,10 @@
+import { setupGithooks } from "https://deno.land/x/githooks@0.0.4/githooks.ts";
+
 import dev from "$fresh/dev.ts";
 import config from "./fresh.config.ts";
 
+setupGithooks().catch(console.error);
+
 // Generate manifest and boot server
 await dev(import.meta.url, "./main.ts", config);
 
diff --git a/sdk/analytics.tsx b/sdk/analytics.tsx
index f10a2daa..5718bd04 100644
--- a/sdk/analytics.tsx
+++ b/sdk/analytics.tsx
@@ -1,4 +1,6 @@
 import type { AnalyticsEvent } from "apps/commerce/types.ts";
 
-export const sendEvent = <E extends AnalyticsEvent>(event: E) =>
+export const sendEvent = <E extends AnalyticsEvent>(event: E) => {
+  console.log(JSON.stringify(event, null, 2));
   window.DECO.events.dispatch(event);
+};

From b28910711fb212abb8ec78841481806f95c61670 Mon Sep 17 00:00:00 2001
From: gimenes <tlgimenes@gmail.com>
Date: Tue, 7 Nov 2023 10:46:11 -0300
Subject: [PATCH 2/2] improve analytics events

---
 components/Analytics.tsx                    | 77 ++++++++++++++-------
 components/header/Buttons/Cart/vtex.tsx     |  8 ++-
 components/minicart/common/CartItem.tsx     |  6 +-
 components/product/AddToCartButton/linx.tsx |  2 +-
 components/product/AddToCartButton/wake.tsx |  1 -
 components/product/ProductInfo.tsx          | 62 ++++-------------
 components/product/ProductShelf.tsx         |  5 +-
 components/product/ProductShelfTabbed.tsx   |  5 +-
 components/search/SearchResult.tsx          | 13 ++--
 components/search/Searchbar.tsx             |  1 +
 components/ui/BannerCarousel.tsx            | 38 +++++++---
 components/wishlist/WishlistButton.tsx      | 12 ++++
 deno.json                                   |  2 +-
 fresh.config.ts                             | 10 +--
 14 files changed, 135 insertions(+), 107 deletions(-)

diff --git a/components/Analytics.tsx b/components/Analytics.tsx
index 32b99853..5d12cb33 100644
--- a/components/Analytics.tsx
+++ b/components/Analytics.tsx
@@ -1,34 +1,63 @@
-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) {
-    return console.warn(
-      `Could not find element ${id}. Click event will not be send. This will cause loss in analytics`,
-    );
-  }
-
-  element.addEventListener("click", () => {
-    console.log(JSON.stringify(event, null, 2));
-    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 defer src={scriptAsDataURI(snippet, id, event)} />;
+}) => (
+  <script
+    defer
+    src={scriptAsDataURI(
+      (id: string, event: AnalyticsEvent) => {
+        const elem = document.getElementById(id);
 
-/**
- * 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; id?: string },
-) => <script defer src={scriptAsDataURI(sendEvent, event)} />;
+        if (!elem) {
+          return console.warn(
+            `Could not find element ${id}. Click event will not be send. This will cause loss in analytics`,
+          );
+        }
+
+        elem.addEventListener("click", () => {
+          window.DECO.events.dispatch(event);
+        });
+      },
+      id,
+      event,
+    )}
+  />
+);
+
+export const SendEventOnView = <E extends AnalyticsEvent>(
+  { event, id }: { event: E; id: string },
+) => (
+  <script
+    defer
+    src={scriptAsDataURI(
+      (id: string, event: E) => {
+        const elem = document.getElementById(id);
+
+        if (!elem) {
+          return console.warn(
+            `Could not find element ${id}. Click event will not be send. This will cause loss in analytics`,
+          );
+        }
+
+        const observer = new IntersectionObserver((items) => {
+          for (const item of items) {
+            if (!item.isIntersecting) continue;
+
+            window.DECO.events.dispatch(event);
+            observer.unobserve(elem);
+          }
+        });
+
+        observer.observe(elem);
+      },
+      id,
+      event,
+    )}
+  />
+);
diff --git a/components/header/Buttons/Cart/vtex.tsx b/components/header/Buttons/Cart/vtex.tsx
index f51a558d..d6893672 100644
--- a/components/header/Buttons/Cart/vtex.tsx
+++ b/components/header/Buttons/Cart/vtex.tsx
@@ -3,8 +3,12 @@ import Button from "./common.tsx";
 
 function CartButton() {
   const { loading, cart } = useCart();
-  const { totalizers = [], items = [], marketingData, storePreferencesData } =
-    cart.value ?? {};
+  const {
+    totalizers = [],
+    items = [],
+    marketingData,
+    storePreferencesData,
+  } = cart.value ?? {};
   const coupon = marketingData?.coupon ?? undefined;
   const currency = storePreferencesData?.currencyCode ?? "BRL";
   const total = totalizers.find((item) => item.id === "Items")?.value ?? 0;
diff --git a/components/minicart/common/CartItem.tsx b/components/minicart/common/CartItem.tsx
index 7b37f51b..c5203fb0 100644
--- a/components/minicart/common/CartItem.tsx
+++ b/components/minicart/common/CartItem.tsx
@@ -112,11 +112,11 @@ function CartItem(
             await onUpdateQuantity(quantity, index);
 
             if (analyticsItem) {
-              analyticsItem.quantity = diff;
-
               sendEvent({
                 name: diff < 0 ? "remove_from_cart" : "add_to_cart",
-                params: { items: [analyticsItem] },
+                params: {
+                  items: [{ ...analyticsItem, quantity: Math.abs(diff) }],
+                },
               });
             }
           })}
diff --git a/components/product/AddToCartButton/linx.tsx b/components/product/AddToCartButton/linx.tsx
index c613294f..dda8da90 100644
--- a/components/product/AddToCartButton/linx.tsx
+++ b/components/product/AddToCartButton/linx.tsx
@@ -6,7 +6,7 @@ export type Props = Omit<BtnProps, "onAddItem"> & {
   productGroupID: string;
 };
 
-function AddToCartButton({ productGroupID, productID }: Props) {
+function AddToCartButton({ productGroupID, productID, eventParams }: Props) {
   const { addItem } = useCart();
 
   return (
diff --git a/components/product/AddToCartButton/wake.tsx b/components/product/AddToCartButton/wake.tsx
index fcf8af39..725b9ace 100644
--- a/components/product/AddToCartButton/wake.tsx
+++ b/components/product/AddToCartButton/wake.tsx
@@ -1,7 +1,6 @@
 import { useCart } from "apps/wake/hooks/useCart.ts";
 import Button, { Props as BtnProps } from "./common.tsx";
 
-
 export interface Props extends Omit<BtnProps, "onAddItem"> {
   productID: string;
 }
diff --git a/components/product/ProductInfo.tsx b/components/product/ProductInfo.tsx
index 96e8e4b3..ddf3c0b5 100644
--- a/components/product/ProductInfo.tsx
+++ b/components/product/ProductInfo.tsx
@@ -1,4 +1,4 @@
-import { SendEventOnLoad } from "$store/components/Analytics.tsx";
+import { SendEventOnView } from "$store/components/Analytics.tsx";
 import Breadcrumb from "$store/components/ui/Breadcrumb.tsx";
 import AddToCartButtonLinx from "$store/islands/AddToCartButton/linx.tsx";
 import AddToCartButtonShopify from "$store/islands/AddToCartButton/shopify.tsx";
@@ -9,6 +9,7 @@ import OutOfStock from "$store/islands/OutOfStock.tsx";
 import ShippingSimulation from "$store/islands/ShippingSimulation.tsx";
 import WishlistButton from "$store/islands/WishlistButton.tsx";
 import { formatPrice } from "$store/sdk/format.ts";
+import { useId } from "$store/sdk/useId.ts";
 import { useOffer } from "$store/sdk/useOffer.ts";
 import { usePlatform } from "$store/sdk/usePlatform.tsx";
 import { ProductDetailsPage } from "apps/commerce/types.ts";
@@ -29,6 +30,7 @@ interface Props {
 
 function ProductInfo({ page, layout }: Props) {
   const platform = usePlatform();
+  const id = useId();
 
   if (page === null) {
     throw new Error("Missing Product Details Page Info");
@@ -39,14 +41,12 @@ function ProductInfo({ page, layout }: Props) {
     product,
   } = page;
   const {
-    url,
     productID,
     offers,
     name = "",
     gtin,
     isVariantOf,
     additionalProperty = [],
-    brand,
   } = product;
   const description = product.description || isVariantOf?.description;
   const {
@@ -57,26 +57,21 @@ function ProductInfo({ page, layout }: Props) {
     availability,
   } = useOffer(offers);
   const productGroupID = isVariantOf?.productGroupID ?? "";
-  const discount = price && listPrice ? listPrice - price : 0;
   const breadcrumb = {
     ...breadcrumbList,
     itemListElement: breadcrumbList?.itemListElement.slice(0, -1),
     numberOfItems: breadcrumbList.numberOfItems - 1,
   };
 
-  const eventItem = {
-    item_list_id: "product",
-    item_list_name: "Product",
-    ...mapProductToAnalyticsItem({
-      product,
-      breadcrumbList: breadcrumb,
-      price,
-      listPrice,
-    }),
-  };
+  const eventItem = mapProductToAnalyticsItem({
+    product,
+    breadcrumbList: breadcrumb,
+    price,
+    listPrice,
+  });
 
   return (
-    <div class="flex flex-col">
+    <div class="flex flex-col" id={id}>
       <Breadcrumb itemListElement={breadcrumb.itemListElement} />
       {/* Code and name */}
       <div class="mt-4 sm:mt-8">
@@ -126,14 +121,7 @@ function ProductInfo({ page, layout }: Props) {
                 <>
                   <AddToCartButtonVTEX
                     eventParams={{ items: [eventItem] }}
-                    url={url || ""}
-                    name={name}
-                    groupName={isVariantOf?.name ?? ""}
-                    brand={brand?.name ?? ""}
                     productID={productID}
-                    productGroupID={productGroupID}
-                    price={price}
-                    discount={discount}
                     seller={seller}
                   />
                   <WishlistButton
@@ -146,54 +134,27 @@ function ProductInfo({ page, layout }: Props) {
               {platform === "wake" && (
                 <AddToCartButtonWake
                   eventParams={{ items: [eventItem] }}
-                  url={url || ""}
-                  name={name}
-                  groupName={isVariantOf?.name ?? ""}
-                  brand={brand?.name ?? ""}
                   productID={productID}
-                  productGroupID={productGroupID}
-                  price={price}
-                  discount={discount}
                 />
               )}
               {platform === "linx" && (
                 <AddToCartButtonLinx
                   eventParams={{ items: [eventItem] }}
-                  url={url || ""}
-                  name={name}
-                  groupName={isVariantOf?.name ?? ""}
-                  brand={brand?.name ?? ""}
                   productID={productID}
                   productGroupID={productGroupID}
-                  price={price}
-                  discount={discount}
                 />
               )}
               {platform === "vnda" && (
                 <AddToCartButtonVNDA
                   eventParams={{ items: [eventItem] }}
-                  url={url || ""}
-                  name={name}
-                  groupName={isVariantOf?.name ?? ""}
-                  brand={brand?.name ?? ""}
                   productID={productID}
-                  productGroupID={productGroupID}
-                  price={price}
-                  discount={discount}
                   additionalProperty={additionalProperty}
                 />
               )}
               {platform === "shopify" && (
                 <AddToCartButtonShopify
                   eventParams={{ items: [eventItem] }}
-                  url={url || ""}
-                  name={name}
-                  groupName={isVariantOf?.name ?? ""}
-                  brand={brand?.name ?? ""}
                   productID={productID}
-                  productGroupID={productGroupID}
-                  price={price}
-                  discount={discount}
                 />
               )}
             </>
@@ -227,7 +188,8 @@ function ProductInfo({ page, layout }: Props) {
         </span>
       </div>
       {/* Analytics Event */}
-      <SendEventOnLoad
+      <SendEventOnView
+        id={id}
         event={{
           name: "view_item",
           params: {
diff --git a/components/product/ProductShelf.tsx b/components/product/ProductShelf.tsx
index 89d2449c..19f28b53 100644
--- a/components/product/ProductShelf.tsx
+++ b/components/product/ProductShelf.tsx
@@ -1,4 +1,4 @@
-import { SendEventOnLoad } from "$store/components/Analytics.tsx";
+import { SendEventOnView } from "$store/components/Analytics.tsx";
 import ProductCard, {
   Layout as cardLayout,
 } from "$store/components/product/ProductCard.tsx";
@@ -80,7 +80,8 @@ function ProductShelf({
           </div>
         </>
         <SliderJS rootId={id} />
-        <SendEventOnLoad
+        <SendEventOnView
+          id={id}
           event={{
             name: "view_item_list",
             params: {
diff --git a/components/product/ProductShelfTabbed.tsx b/components/product/ProductShelfTabbed.tsx
index a75ddfd8..6729a109 100644
--- a/components/product/ProductShelfTabbed.tsx
+++ b/components/product/ProductShelfTabbed.tsx
@@ -1,4 +1,4 @@
-import { SendEventOnLoad } from "$store/components/Analytics.tsx";
+import { SendEventOnView } from "$store/components/Analytics.tsx";
 import ProductCard, {
   Layout as cardLayout,
 } from "$store/components/product/ProductCard.tsx";
@@ -106,7 +106,8 @@ function TabbedProductShelf({
           </div>
         </>
         <SliderJS rootId={id} />
-        <SendEventOnLoad
+        <SendEventOnView
+          id={id}
           event={{
             name: "view_item_list",
             params: {
diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx
index 6740236e..4eca0ba1 100644
--- a/components/search/SearchResult.tsx
+++ b/components/search/SearchResult.tsx
@@ -1,8 +1,9 @@
-import { SendEventOnLoad } from "$store/components/Analytics.tsx";
+import { SendEventOnView } from "$store/components/Analytics.tsx";
 import { Layout as CardLayout } from "$store/components/product/ProductCard.tsx";
 import Filters from "$store/components/search/Filters.tsx";
 import Icon from "$store/components/ui/Icon.tsx";
 import SearchControls from "$store/islands/SearchControls.tsx";
+import { useId } from "$store/sdk/useId.ts";
 import { useOffer } from "$store/sdk/useOffer.ts";
 import type { ProductListingPage } from "apps/commerce/types.ts";
 import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
@@ -42,6 +43,7 @@ function Result({
   const { products, filters, breadcrumb, pageInfo, sortOptions } = page;
   const perPage = pageInfo.recordPerPage || products.length;
   const offset = pageInfo.currentPage * perPage;
+  const id = useId();
 
   return (
     <>
@@ -59,7 +61,7 @@ function Result({
               <Filters filters={filters} />
             </aside>
           )}
-          <div class="flex-grow">
+          <div class="flex-grow" id={id}>
             <ProductGallery
               products={products}
               offset={offset}
@@ -92,13 +94,14 @@ function Result({
           </div>
         </div>
       </div>
-      <SendEventOnLoad
+      <SendEventOnView
+        id={id}
         event={{
           name: "view_item_list",
           params: {
             // TODO: get category name from search or cms setting
-            item_list_name: "",
-            item_list_id: "",
+            item_list_name: breadcrumb.itemListElement?.at(-1)?.name,
+            item_list_id: breadcrumb.itemListElement?.at(-1)?.item,
             items: page.products?.map((product, index) =>
               mapProductToAnalyticsItem({
                 ...(useOffer(product.offers)),
diff --git a/components/search/Searchbar.tsx b/components/search/Searchbar.tsx
index e839c8e7..96dbbb55 100644
--- a/components/search/Searchbar.tsx
+++ b/components/search/Searchbar.tsx
@@ -168,6 +168,7 @@ function Searchbar({
                     product={product}
                     platform={platform}
                     index={index}
+                    itemListName="Suggeestions"
                   />
                 </Slider.Item>
               ))}
diff --git a/components/ui/BannerCarousel.tsx b/components/ui/BannerCarousel.tsx
index 650a3924..864fafe0 100644
--- a/components/ui/BannerCarousel.tsx
+++ b/components/ui/BannerCarousel.tsx
@@ -1,3 +1,7 @@
+import {
+  SendEventOnClick,
+  SendEventOnView,
+} from "$store/components/Analytics.tsx";
 import Button from "$store/components/ui/Button.tsx";
 import Icon from "$store/components/ui/Icon.tsx";
 import Slider from "$store/components/ui/Slider.tsx";
@@ -86,7 +90,9 @@ const DEFAULT_PROPS = {
   preload: true,
 };
 
-function BannerItem({ image, lcp }: { image: Banner; lcp?: boolean }) {
+function BannerItem(
+  { image, lcp, id }: { image: Banner; lcp?: boolean; id: string },
+) {
   const {
     alt,
     mobile,
@@ -96,6 +102,7 @@ function BannerItem({ image, lcp }: { image: Banner; lcp?: boolean }) {
 
   return (
     <a
+      id={id}
       href={action?.href ?? "#"}
       aria-label={action?.label}
       class="relative h-[600px] overflow-y-hidden w-full"
@@ -197,9 +204,8 @@ function Buttons() {
 }
 
 function BannerCarousel(props: Props) {
-  const { images, preload, interval } = { ...DEFAULT_PROPS, ...props };
-
   const id = useId();
+  const { images, preload, interval } = { ...DEFAULT_PROPS, ...props };
 
   return (
     <div
@@ -207,11 +213,27 @@ function BannerCarousel(props: Props) {
       class="grid grid-cols-[48px_1fr_48px] sm:grid-cols-[120px_1fr_120px] grid-rows-[1fr_48px_1fr_64px]"
     >
       <Slider class="carousel carousel-center w-full col-span-full row-span-full gap-6">
-        {images?.map((image, index) => (
-          <Slider.Item index={index} class="carousel-item w-full">
-            <BannerItem image={image} lcp={index === 0 && preload} />
-          </Slider.Item>
-        ))}
+        {images?.map((image, index) => {
+          const params = { promotion_name: image.alt };
+
+          return (
+            <Slider.Item index={index} class="carousel-item w-full">
+              <BannerItem
+                image={image}
+                lcp={index === 0 && preload}
+                id={`${id}::${index}`}
+              />
+              <SendEventOnClick
+                id={`${id}::${index}`}
+                event={{ name: "select_promotion", params }}
+              />
+              <SendEventOnView
+                id={`${id}::${index}`}
+                event={{ name: "view_promotion", params }}
+              />
+            </Slider.Item>
+          );
+        })}
       </Slider>
 
       <Buttons />
diff --git a/components/wishlist/WishlistButton.tsx b/components/wishlist/WishlistButton.tsx
index 9e537b75..452bdf3e 100644
--- a/components/wishlist/WishlistButton.tsx
+++ b/components/wishlist/WishlistButton.tsx
@@ -3,6 +3,7 @@ import Icon from "$store/components/ui/Icon.tsx";
 import Button from "$store/components/ui/Button.tsx";
 import { useWishlist } from "apps/vtex/hooks/useWishlist.ts";
 import { useUser } from "apps/vtex/hooks/useUser.ts";
+import { sendEvent } from "$store/sdk/analytics.tsx";
 
 export interface Props {
   productID: string;
@@ -53,6 +54,17 @@ function WishlistButton({
             await removeItem({ id: listItem.value!.id }!);
           } else if (productID && productGroupID) {
             await addItem({ sku: productID, productId: productGroupID });
+
+            sendEvent({
+              name: "add_to_wishlist",
+              params: {
+                items: [{
+                  item_id: productID,
+                  item_group_id: productGroupID,
+                  quantity: 1,
+                }],
+              },
+            });
           }
         } finally {
           fetching.value = false;
diff --git a/deno.json b/deno.json
index f7b489d0..13bf7aef 100644
--- a/deno.json
+++ b/deno.json
@@ -2,7 +2,7 @@
   "imports": {
     "$store/": "./",
     "deco/": "https://denopkg.com/deco-cx/deco@1.45.7/",
-    "apps/": "https://denopkg.com/deco-cx/apps@0.21.1/",
+    "apps/": "https://denopkg.com/deco-cx/apps@0.21.2/",
     "$fresh/": "https://denopkg.com/denoland/fresh@7ad4610e3a42aba42638cbc1041b96ee58a9b29e/",
     "preact": "https://esm.sh/preact@10.15.1",
     "preact/": "https://esm.sh/preact@10.15.1/",
diff --git a/fresh.config.ts b/fresh.config.ts
index 181992e1..dd0cba3d 100644
--- a/fresh.config.ts
+++ b/fresh.config.ts
@@ -1,13 +1,7 @@
 import { defineConfig } from "$fresh/server.ts";
 import plugins from "https://denopkg.com/deco-sites/std@1.22.0/plugins/mod.ts";
-import partytownPlugin from "partytown/mod.ts";
-import decoManifest from "./manifest.gen.ts";
+import manifest from "./manifest.gen.ts";
 
 export default defineConfig({
-  plugins: [
-    ...plugins({
-      manifest: decoManifest,
-    }),
-    partytownPlugin(),
-  ],
+  plugins: plugins({ manifest }),
 });