From 769c7759ab1ae68955a6919a15620882506ce99d Mon Sep 17 00:00:00 2001
From: igorbrasileiro <brasileiro456@gmail.com>
Date: Fri, 19 May 2023 16:18:21 -0300
Subject: [PATCH 01/10] Work for pdp

---
 .../VTEXPortalDataLayerCompatibility.tsx      | 149 ++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 components/VTEXPortalDataLayerCompatibility.tsx

diff --git a/components/VTEXPortalDataLayerCompatibility.tsx b/components/VTEXPortalDataLayerCompatibility.tsx
new file mode 100644
index 00000000..e9768ab7
--- /dev/null
+++ b/components/VTEXPortalDataLayerCompatibility.tsx
@@ -0,0 +1,149 @@
+import { Product } from "deco-sites/std/commerce/types.ts";
+import { Head } from "$fresh/runtime.ts";
+
+// deno-lint-ignore no-explicit-any
+function addVTEXPortalDataSnippet(accountName: any) {
+  const structuredDataScripts =
+    document.querySelectorAll('script[type="application/ld+json"]') || [];
+  // deno-lint-ignore no-explicit-any
+  const structuredDatas: Record<string, any>[] = [];
+  // deno-lint-ignore no-explicit-any
+  structuredDataScripts.forEach((v: any) => {
+    structuredDatas.push(JSON.parse(v.text));
+  });
+  const isProductPage = structuredDatas.some((s) => s["@type"] === "Product");
+
+  // deno-lint-ignore no-explicit-any
+  const props: Record<string, any> = {
+    pageCategory: "Home",
+    pageDepartment: null,
+    pageUrl: window.location.href,
+    pageTitle: document.title,
+    skuStockOutFromShelf: [],
+    skuStockOutFromProductDetail: [],
+    accountName: `${accountName}`,
+    pageFacets: [],
+    shelfProductIds: [],
+  };
+  // categoryName: "",
+  // categoryId: "",
+
+  if (isProductPage) {
+    props.pageCategory = "Product";
+    // const productSD = structuredDatas.find((
+    //   s,
+    // ) => (s["@type"] === "Product")) || {};
+    //
+    // props.pageDepartment = productSD.additionalProperty.find((p) =>
+    //   p.name === "category"
+    // ).value;
+    // props["productId"] = productSD.productID;
+    // props["productReferenceId"] = new URL(window.location.href).pathname.split(
+    //   "/",
+    // )[1].split("-").pop(); // Isso não é verdade exemplo: https://fashion.deco.site/camisa-masculina-rock/p?skuId=92
+    // props["productEans"] = [
+    //   productSD.gtin,
+    // ];
+    // props["skuStocks"] = {
+    //   [productSD.sku]: productSD.offers?.offers?.[0]?.inventoryLevel.value,
+    // };
+    //
+    // props["productName"] = productSD.name;
+    // props["productBrandName"] = productSD.brand;
+    // props["productDepartmentName"] = props.pageDepartment;
+    // props["productCategoryName"] = props.additionalProperty.findLast((v) =>
+    //   v.name === "category"
+    // )?.value;
+    //
+    // const offer = productSD.offers;
+    // props["productListPriceFrom"] = offer.lowPrice;
+    // props["productListPriceTo"] = offer.highPrice;
+    // props["productPriceFrom"] = offer.lowPrice;
+    // props["productPriceTo"] = offer.highPrice;
+    //
+    // props["productBrandId"] = 930833574;
+    // props["productDepartmentId"] = 4010494;
+    // props["productCategoryId"] = 4010502;
+    // props["sellerId"] = "1";
+    // props["sellerIds"] = "1";
+    const scriptEl: HTMLScriptElement | null = document.querySelector(
+      'script[data-id="vtex-portal-compat"]',
+    );
+    console.log("scruot", scriptEl?.dataset);
+    if (scriptEl) {
+      Object.assign(props, JSON.parse(scriptEl.dataset.datalayer || "{}"));
+    }
+  }
+
+  if (!isProductPage) {
+    const breadcrumbSD = structuredDatas.find((
+      s,
+    ) => (s["@type"] === "BreadcrumbList"));
+    props.pageDepartment = breadcrumbSD?.itemListElement?.[0]?.name || ""; // what to do here?;
+    if (props.pageDepartment) {
+      props.pageCategory = "Category";
+    }
+  }
+
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push(props);
+}
+
+export function AddVTEXPortalData({ accountName }: { accountName: string }) {
+  return (
+    <script
+      id="datalayer-portal-compat"
+      dangerouslySetInnerHTML={{
+        __html: `(${addVTEXPortalDataSnippet.toString()})('${accountName}')`,
+      }}
+    />
+  );
+}
+
+export function ProductDetailsTemplate({ product }: { product: Product }) {
+  const departament = product.additionalProperty?.find((p) =>
+    p.name === "category"
+  );
+  const category = product.additionalProperty?.findLast((p) =>
+    p.name === "category"
+  );
+
+  const offers = product.offers?.offers;
+  const lowestOffer = offers?.[0]?.priceSpecification;
+  const highestOffer = offers?.[offers.length - 1]?.priceSpecification;
+  const template = {
+    productId: product.isVariantOf?.productGroupID,
+    productReferenceId: product.isVariantOf?.model,
+    productEans: product.isVariantOf?.hasVariant.map((s) => s.gtin) || [],
+    skuStock: product.isVariantOf?.hasVariant.reduce((result, sku) => {
+      if (sku.offers?.offers?.[0]?.inventoryLevel.value) {
+        // @ts-expect-error nao faz sentido
+        result[sku.id!] = sku.offers?.offers?.[0]?.inventoryLevel.value;
+      }
+      return result;
+    }, {} as Record<string, number>),
+    productName: product.isVariantOf?.name,
+    brand: product.brand,
+    brandId: product.brand,
+    productDepartmentId: departament?.propertyID,
+    productDepartmentName: departament?.value,
+    productCategoryId: category?.propertyID,
+    productCategoryName: category?.value,
+    productListPriceFrom: lowestOffer?.[0]?.price,
+    productListPriceTo: highestOffer?.[0]?.price,
+    productPriceFrom: lowestOffer?.[1]?.price,
+    productPriceTo: highestOffer?.[1]?.price,
+    sellerId: offers?.map(({ seller }) => seller)?.[0],
+    sellerIds: offers?.map(({ seller }) => seller),
+  };
+
+  return (
+    <Head>
+      <script
+        data-id="vtex-portal-compat"
+        data-datalayer={JSON.stringify(template)}
+      >
+      </script>
+    </Head>
+  );
+}

From 32ba0ad549297d1259300e8d750dbb9d64b5a843 Mon Sep 17 00:00:00 2001
From: igorbrasileiro <brasileiro456@gmail.com>
Date: Fri, 19 May 2023 16:30:54 -0300
Subject: [PATCH 02/10] Deal with home, category pages and landing

---
 .../VTEXPortalDataLayerCompatibility.tsx      | 60 +++++--------------
 1 file changed, 16 insertions(+), 44 deletions(-)

diff --git a/components/VTEXPortalDataLayerCompatibility.tsx b/components/VTEXPortalDataLayerCompatibility.tsx
index e9768ab7..5b09be3b 100644
--- a/components/VTEXPortalDataLayerCompatibility.tsx
+++ b/components/VTEXPortalDataLayerCompatibility.tsx
@@ -25,63 +25,31 @@ function addVTEXPortalDataSnippet(accountName: any) {
     pageFacets: [],
     shelfProductIds: [],
   };
-  // categoryName: "",
-  // categoryId: "",
 
   if (isProductPage) {
     props.pageCategory = "Product";
-    // const productSD = structuredDatas.find((
-    //   s,
-    // ) => (s["@type"] === "Product")) || {};
-    //
-    // props.pageDepartment = productSD.additionalProperty.find((p) =>
-    //   p.name === "category"
-    // ).value;
-    // props["productId"] = productSD.productID;
-    // props["productReferenceId"] = new URL(window.location.href).pathname.split(
-    //   "/",
-    // )[1].split("-").pop(); // Isso não é verdade exemplo: https://fashion.deco.site/camisa-masculina-rock/p?skuId=92
-    // props["productEans"] = [
-    //   productSD.gtin,
-    // ];
-    // props["skuStocks"] = {
-    //   [productSD.sku]: productSD.offers?.offers?.[0]?.inventoryLevel.value,
-    // };
-    //
-    // props["productName"] = productSD.name;
-    // props["productBrandName"] = productSD.brand;
-    // props["productDepartmentName"] = props.pageDepartment;
-    // props["productCategoryName"] = props.additionalProperty.findLast((v) =>
-    //   v.name === "category"
-    // )?.value;
-    //
-    // const offer = productSD.offers;
-    // props["productListPriceFrom"] = offer.lowPrice;
-    // props["productListPriceTo"] = offer.highPrice;
-    // props["productPriceFrom"] = offer.lowPrice;
-    // props["productPriceTo"] = offer.highPrice;
-    //
-    // props["productBrandId"] = 930833574;
-    // props["productDepartmentId"] = 4010494;
-    // props["productCategoryId"] = 4010502;
-    // props["sellerId"] = "1";
-    // props["sellerIds"] = "1";
     const scriptEl: HTMLScriptElement | null = document.querySelector(
       'script[data-id="vtex-portal-compat"]',
     );
-    console.log("scruot", scriptEl?.dataset);
     if (scriptEl) {
       Object.assign(props, JSON.parse(scriptEl.dataset.datalayer || "{}"));
     }
   }
 
-  if (!isProductPage) {
-    const breadcrumbSD = structuredDatas.find((
-      s,
-    ) => (s["@type"] === "BreadcrumbList"));
-    props.pageDepartment = breadcrumbSD?.itemListElement?.[0]?.name || ""; // what to do here?;
+  const breadcrumbSD = structuredDatas.find((
+    s,
+  ) => (s["@type"] === "BreadcrumbList"));
+  if (breadcrumbSD) {
+    const department = breadcrumbSD?.itemListElement?.[0];
+    props.pageDepartment = department?.name || null;
     if (props.pageDepartment) {
       props.pageCategory = "Category";
+      const category = breadcrumbSD?.itemListElement
+        ?.[breadcrumbSD?.itemListElement.length - 1];
+      props.categoryName = category?.name;
+    } else {
+      props.pageCategory = new URL(window.location.href).pathname.split("/")
+        .filter(Boolean).join(" ");
     }
   }
 
@@ -147,3 +115,7 @@ export function ProductDetailsTemplate({ product }: { product: Product }) {
     </Head>
   );
 }
+
+// How to use:
+// 1. add the AddVTEXPortalData at routes/_app.tsx before <props.Component />
+// 2. add the ProductDetailsTemplate at ProductDetails.tsx for routes /:slug/p

From 18fe3506adb365b85fbc8d480a0216a0d1cae69e Mon Sep 17 00:00:00 2001
From: igorbrasileiro <brasileiro456@gmail.com>
Date: Fri, 19 May 2023 16:59:30 -0300
Subject: [PATCH 03/10] Add product shelf ids

---
 .../VTEXPortalDataLayerCompatibility.tsx      | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/components/VTEXPortalDataLayerCompatibility.tsx b/components/VTEXPortalDataLayerCompatibility.tsx
index 5b09be3b..553921c5 100644
--- a/components/VTEXPortalDataLayerCompatibility.tsx
+++ b/components/VTEXPortalDataLayerCompatibility.tsx
@@ -1,5 +1,4 @@
-import { Product } from "deco-sites/std/commerce/types.ts";
-import { Head } from "$fresh/runtime.ts";
+import { Product, ProductGroup } from "deco-sites/std/commerce/types.ts";
 
 // deno-lint-ignore no-explicit-any
 function addVTEXPortalDataSnippet(accountName: any) {
@@ -53,6 +52,12 @@ function addVTEXPortalDataSnippet(accountName: any) {
     }
   }
 
+  document.querySelectorAll("[data-product-id]").forEach(
+    (el) => {
+      props.shelfProductIds.push((el as HTMLDivElement).dataset.productId);
+    },
+  );
+
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push(props);
 }
@@ -106,16 +111,28 @@ export function ProductDetailsTemplate({ product }: { product: Product }) {
   };
 
   return (
-    <Head>
-      <script
-        data-id="vtex-portal-compat"
-        data-datalayer={JSON.stringify(template)}
-      >
-      </script>
-    </Head>
+    <script
+      data-id="vtex-portal-compat"
+      data-datalayer={JSON.stringify(template)}
+    >
+    </script>
+  );
+}
+
+interface ProductShelfIdsProps {
+  product: Product;
+}
+export function ProductCardId({ product }: ProductShelfIdsProps) {
+  if (!product.isVariantOf?.productGroupID) return null;
+  return (
+    <div
+      data-product-id={product.isVariantOf?.productGroupID}
+      style={{ display: "none" }}
+    />
   );
 }
 
 // How to use:
-// 1. add the AddVTEXPortalData at routes/_app.tsx before <props.Component />
+// 1. add the AddVTEXPortalData at routes/_app.tsx after <props.Component />
 // 2. add the ProductDetailsTemplate at ProductDetails.tsx for routes /:slug/p
+// 3. add ProductShelfIds at product shelves

From f1630b2f660df782ee1ebb4d9bf6c4e768c975a0 Mon Sep 17 00:00:00 2001
From: igorbrasileiro <brasileiro456@gmail.com>
Date: Fri, 19 May 2023 18:24:32 -0300
Subject: [PATCH 04/10] Add skuJson section

---
 .../VTEXPortalDataLayerCompatibility.tsx      | 16 +++++++-
 sections/VTEXPortalDataLayerCompatibility.tsx | 38 +++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 sections/VTEXPortalDataLayerCompatibility.tsx

diff --git a/components/VTEXPortalDataLayerCompatibility.tsx b/components/VTEXPortalDataLayerCompatibility.tsx
index 553921c5..6e33c975 100644
--- a/components/VTEXPortalDataLayerCompatibility.tsx
+++ b/components/VTEXPortalDataLayerCompatibility.tsx
@@ -1,4 +1,4 @@
-import { Product, ProductGroup } from "deco-sites/std/commerce/types.ts";
+import { Product } from "deco-sites/std/commerce/types.ts";
 
 // deno-lint-ignore no-explicit-any
 function addVTEXPortalDataSnippet(accountName: any) {
@@ -132,7 +132,21 @@ export function ProductCardId({ product }: ProductShelfIdsProps) {
   );
 }
 
+export interface ProductSKUJsonProps {
+  product: unknown;
+}
+export function ProductSKUJson({ product }: ProductSKUJsonProps) {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `var skuJson = ${JSON.stringify(product)}`,
+      }}
+    />
+  );
+}
+
 // How to use:
 // 1. add the AddVTEXPortalData at routes/_app.tsx after <props.Component />
 // 2. add the ProductDetailsTemplate at ProductDetails.tsx for routes /:slug/p
 // 3. add ProductShelfIds at product shelves
+// 4. Add ProductSKUJsonProps section to PDP
diff --git a/sections/VTEXPortalDataLayerCompatibility.tsx b/sections/VTEXPortalDataLayerCompatibility.tsx
new file mode 100644
index 00000000..5fa5a55e
--- /dev/null
+++ b/sections/VTEXPortalDataLayerCompatibility.tsx
@@ -0,0 +1,38 @@
+import {
+  ProductSKUJson,
+  ProductSKUJsonProps as Props,
+} from "deco-sites/std/components/VTEXPortalDataLayerCompatibility.tsx";
+import type { RequestURLParam } from "deco-sites/std/functions/requestToParam.ts";
+import { paths } from "deco-sites/std/packs/vtex/utils/paths.ts";
+import type { Context } from "deco-sites/std/packs/vtex/accounts/vtex.ts";
+import { getSegment } from "deco-sites/std/packs/vtex/utils/segment.ts";
+import { toSegmentParams } from "deco-sites/std/packs/vtex/utils/legacy.ts";
+import { fetchAPI } from "deco-sites/std/utils/fetchVTEX.ts";
+import type { LegacyProduct } from "deco-sites/std/packs/vtex/types.ts";
+import { withSegmentCookie } from "deco-sites/std/packs/vtex/utils/segment.ts";
+
+export default function VTEXPortalDataLayerCompatibility({ product }: Props) {
+  return <ProductSKUJson product={product} />;
+}
+
+export interface LoaderProps {
+  slug: RequestURLParam;
+}
+
+export async function loader(props: LoaderProps, req: Request, ctx: Context) {
+  const { configVTEX: config } = ctx;
+  const { slug } = props;
+  const segment = getSegment(req);
+  const params = toSegmentParams(segment);
+  const search = paths(config!).api.catalog_system.pub.products.search;
+
+  const [product] = await fetchAPI<LegacyProduct[]>(
+    `${search.term(`${slug}/p`)}?${params}`,
+    {
+      withProxyCache: true,
+      headers: withSegmentCookie(segment),
+    },
+  );
+
+  return { product };
+}

From 77b79f30188c1777fa355fd9f7c2d8fd129f5918 Mon Sep 17 00:00:00 2001
From: igorbrasileiro <brasileiro456@gmail.com>
Date: Fri, 19 May 2023 18:29:26 -0300
Subject: [PATCH 05/10] Fix doc

---
 components/VTEXPortalDataLayerCompatibility.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/VTEXPortalDataLayerCompatibility.tsx b/components/VTEXPortalDataLayerCompatibility.tsx
index 6e33c975..f32ee50b 100644
--- a/components/VTEXPortalDataLayerCompatibility.tsx
+++ b/components/VTEXPortalDataLayerCompatibility.tsx
@@ -149,4 +149,4 @@ export function ProductSKUJson({ product }: ProductSKUJsonProps) {
 // 1. add the AddVTEXPortalData at routes/_app.tsx after <props.Component />
 // 2. add the ProductDetailsTemplate at ProductDetails.tsx for routes /:slug/p
 // 3. add ProductShelfIds at product shelves
-// 4. Add ProductSKUJsonProps section to PDP
+// 4. Add VTEXPortalDataLayerCompatibility section to PDP

From 1a620ec1ff7c338c8e0bd1cee0d2c569d7079ec7 Mon Sep 17 00:00:00 2001
From: igorbrasileiro <brasileiro456@gmail.com>
Date: Mon, 22 May 2023 11:58:08 -0300
Subject: [PATCH 06/10] Fix VTEXPortalDataLayerCompat

---
 components/VTEXPortalDataLayerCompatibility.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/VTEXPortalDataLayerCompatibility.tsx b/components/VTEXPortalDataLayerCompatibility.tsx
index f32ee50b..a3a34ee5 100644
--- a/components/VTEXPortalDataLayerCompatibility.tsx
+++ b/components/VTEXPortalDataLayerCompatibility.tsx
@@ -42,9 +42,10 @@ function addVTEXPortalDataSnippet(accountName: any) {
     const department = breadcrumbSD?.itemListElement?.[0];
     props.pageDepartment = department?.name || null;
     if (props.pageDepartment) {
-      props.pageCategory = "Category";
+      !isProductPage && (props.pageCategory = "Category");
       const category = breadcrumbSD?.itemListElement
         ?.[breadcrumbSD?.itemListElement.length - 1];
+      // TODO: Corrigir na pDP
       props.categoryName = category?.name;
     } else {
       props.pageCategory = new URL(window.location.href).pathname.split("/")
@@ -59,7 +60,7 @@ function addVTEXPortalDataSnippet(accountName: any) {
   );
 
   window.dataLayer = window.dataLayer || [];
-  window.dataLayer.push(props);
+  window.dataLayer.unshift(props);
 }
 
 export function AddVTEXPortalData({ accountName }: { accountName: string }) {

From c68f5abf8e6dbc468e666c947b3697cffffddb4f Mon Sep 17 00:00:00 2001
From: igorbrasileiro <brasileiro456@gmail.com>
Date: Mon, 22 May 2023 11:58:27 -0300
Subject: [PATCH 07/10] Add autogen

---
 live.gen.ts      | 10 ++++++----
 schemas.gen.json | 40 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/live.gen.ts b/live.gen.ts
index 3e440985..ed50054c 100644
--- a/live.gen.ts
+++ b/live.gen.ts
@@ -59,8 +59,9 @@ import * as $$$$$$$$4 from "./sections/configOCC.global.tsx";
 import * as $$$$$$$$5 from "./sections/Analytics.tsx";
 import * as $$$$$$$$6 from "./sections/configShopify.global.tsx";
 import * as $$$$$$$$7 from "./sections/configVNDA.global.tsx";
-import * as $$$$$$$$8 from "./sections/configVTEX.global.tsx";
-import * as $$$$$$$$9 from "./sections/SEOPDP.tsx";
+import * as $$$$$$$$8 from "./sections/VTEXPortalDataLayerCompatibility.tsx";
+import * as $$$$$$$$9 from "./sections/configVTEX.global.tsx";
+import * as $$$$$$$$10 from "./sections/SEOPDP.tsx";
 import * as $$$$$$$$$$$0 from "./actions/vtex/notifyme.ts";
 import * as $$$$$$$$$$$1 from "./actions/vtex/cart/updateCoupons.ts";
 import * as $$$$$$$$$$$2 from "./actions/vtex/cart/updateAttachment.ts";
@@ -191,11 +192,12 @@ const manifest = {
     "deco-sites/std/sections/configOCC.global.tsx": $$$$$$$$4,
     "deco-sites/std/sections/configShopify.global.tsx": $$$$$$$$6,
     "deco-sites/std/sections/configVNDA.global.tsx": $$$$$$$$7,
-    "deco-sites/std/sections/configVTEX.global.tsx": $$$$$$$$8,
+    "deco-sites/std/sections/configVTEX.global.tsx": $$$$$$$$9,
     "deco-sites/std/sections/configYourViews.global.tsx": $$$$$$$$0,
     "deco-sites/std/sections/SEO.tsx": $$$$$$$$2,
-    "deco-sites/std/sections/SEOPDP.tsx": $$$$$$$$9,
+    "deco-sites/std/sections/SEOPDP.tsx": $$$$$$$$10,
     "deco-sites/std/sections/SEOPLP.tsx": $$$$$$$$3,
+    "deco-sites/std/sections/VTEXPortalDataLayerCompatibility.tsx": $$$$$$$$8,
   },
   "actions": {
     "$live/actions/workflows/cancel.ts": i1$$$$$$$0,
diff --git a/schemas.gen.json b/schemas.gen.json
index 66f816b8..af04ef92 100644
--- a/schemas.gen.json
+++ b/schemas.gen.json
@@ -79,6 +79,7 @@
               "deco-sites/std/sections/SEO.tsx",
               "deco-sites/std/sections/SEOPDP.tsx",
               "deco-sites/std/sections/SEOPLP.tsx",
+              "deco-sites/std/sections/VTEXPortalDataLayerCompatibility.tsx",
               "$live/matchers/MatchAlways.ts",
               "$live/matchers/MatchDate.ts",
               "$live/matchers/MatchEnvironment.ts",
@@ -7063,6 +7064,19 @@
       ],
       "title": "deco-sites/std/components/seo/SEOPLP.tsx@Props"
     },
+    "ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvVlRFWFBvcnRhbERhdGFMYXllckNvbXBhdGliaWxpdHkudHN4@LoaderProps": {
+      "type": "object",
+      "properties": {
+        "slug": {
+          "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvZnVuY3Rpb25zL3JlcXVlc3RUb1BhcmFtLnRz@RequestURLParam",
+          "title": "Slug"
+        }
+      },
+      "required": [
+        "slug"
+      ],
+      "title": "deco-sites/std/sections/VTEXPortalDataLayerCompatibility.tsx@LoaderProps"
+    },
     "ZGVjby1jeC9saXZlL21hdGNoZXJzL01hdGNoRGF0ZS50cw==@Props": {
       "type": "object",
       "properties": {
@@ -9226,6 +9240,27 @@
         }
       }
     },
+    "ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvVlRFWFBvcnRhbERhdGFMYXllckNvbXBhdGliaWxpdHkudHN4": {
+      "title": "deco-sites/std/sections/VTEXPortalDataLayerCompatibility.tsx",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvVlRFWFBvcnRhbERhdGFMYXllckNvbXBhdGliaWxpdHkudHN4@LoaderProps"
+        }
+      ],
+      "required": [
+        "__resolveType"
+      ],
+      "properties": {
+        "__resolveType": {
+          "type": "string",
+          "enum": [
+            "deco-sites/std/sections/VTEXPortalDataLayerCompatibility.tsx"
+          ],
+          "default": "deco-sites/std/sections/VTEXPortalDataLayerCompatibility.tsx"
+        }
+      }
+    },
     "JGxpdmUvbWF0Y2hlcnMvTWF0Y2hBbHdheXMudHM=": {
       "title": "$live/matchers/MatchAlways.ts",
       "type": "object",
@@ -10132,6 +10167,9 @@
         },
         {
           "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvU0VPUExQLnRzeA=="
+        },
+        {
+          "$ref": "#/definitions/ZGVjby1zaXRlcy9zdGQvc2VjdGlvbnMvVlRFWFBvcnRhbERhdGFMYXllckNvbXBhdGliaWxpdHkudHN4"
         }
       ]
     },
@@ -10332,4 +10370,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

From 578f376c176107ca714cad3732622902c3008199 Mon Sep 17 00:00:00 2001
From: igorbrasileiro <brasileiro456@gmail.com>
Date: Mon, 22 May 2023 12:51:31 -0300
Subject: [PATCH 08/10] Add productView event

---
 components/VTEXPortalDataLayerCompatibility.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/VTEXPortalDataLayerCompatibility.tsx b/components/VTEXPortalDataLayerCompatibility.tsx
index a3a34ee5..0025a86c 100644
--- a/components/VTEXPortalDataLayerCompatibility.tsx
+++ b/components/VTEXPortalDataLayerCompatibility.tsx
@@ -115,8 +115,11 @@ export function ProductDetailsTemplate({ product }: { product: Product }) {
     <script
       data-id="vtex-portal-compat"
       data-datalayer={JSON.stringify(template)}
-    >
-    </script>
+      dangerouslySetInnerHTML={{
+        __html:
+          `window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "productView" })`,
+      }}
+    />
   );
 }
 

From 4e044cfab1f0f038ba0bac27e8e0fe8adf7d2329 Mon Sep 17 00:00:00 2001
From: igorbrasileiro <brasileiro456@gmail.com>
Date: Mon, 22 May 2023 14:00:24 -0300
Subject: [PATCH 09/10] Add custom events

---
 components/VTEXPortalDataLayerCompatibility.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/VTEXPortalDataLayerCompatibility.tsx b/components/VTEXPortalDataLayerCompatibility.tsx
index 0025a86c..c8ad71ef 100644
--- a/components/VTEXPortalDataLayerCompatibility.tsx
+++ b/components/VTEXPortalDataLayerCompatibility.tsx
@@ -2,6 +2,7 @@ import { Product } from "deco-sites/std/commerce/types.ts";
 
 // deno-lint-ignore no-explicit-any
 function addVTEXPortalDataSnippet(accountName: any) {
+  const url = new URL(window.location.href);
   const structuredDataScripts =
     document.querySelectorAll('script[type="application/ld+json"]') || [];
   // deno-lint-ignore no-explicit-any
@@ -61,6 +62,16 @@ function addVTEXPortalDataSnippet(accountName: any) {
 
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.unshift(props);
+
+  if (url.pathname === "/") {
+    window.dataLayer.push({ event: "homeView" });
+  } else if (props.pageCategory === "Product") {
+    window.dataLayer.push({ event: "productView" });
+  } else if (props.pageCategory === "Category") {
+    window.dataLayer.push({ event: "categoryView" });
+  } else {
+    window.dataLayer.push({ event: "otherView" });
+  }
 }
 
 export function AddVTEXPortalData({ accountName }: { accountName: string }) {
@@ -115,10 +126,6 @@ export function ProductDetailsTemplate({ product }: { product: Product }) {
     <script
       data-id="vtex-portal-compat"
       data-datalayer={JSON.stringify(template)}
-      dangerouslySetInnerHTML={{
-        __html:
-          `window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "productView" })`,
-      }}
     />
   );
 }

From 108f4a321b09258238e4f445e2b29ba9f6c9bd4e Mon Sep 17 00:00:00 2001
From: Lucis <luciannojunior@gmail.com>
Date: Mon, 22 May 2023 19:00:18 -0300
Subject: [PATCH 10/10] Always use imagekit for videos

---
 components/Image.tsx | 25 +++++++++++++++++--------
 components/Video.tsx | 11 +++++++++--
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/components/Image.tsx b/components/Image.tsx
index 40ae4b97..9ac75965 100644
--- a/components/Image.tsx
+++ b/components/Image.tsx
@@ -19,17 +19,26 @@ const imageKit = new ImageKit({
 
 const FACTORS = [1, 1.5, 2];
 
+export const getOptimizedMediaUrl = (
+  { originalSrc, width, height, factor }: {
+    originalSrc: string;
+    width: number;
+    height?: number;
+    factor: number;
+  },
+) =>
+  imageKit.url({
+    path: originalSrc,
+    transformation: [{
+      width: `${Math.trunc(factor * width)}`,
+      height: height ? `${Math.trunc(factor * height)}` : undefined,
+    }],
+  });
+
 export const getSrcSet = (src: string, width: number, height?: number) =>
   FACTORS
     .map((factor) =>
-      `${
-        imageKit.url({
-          path: src,
-          transformation: [{
-            width: `${Math.trunc(factor * width)}`,
-            height: height ? `${Math.trunc(factor * height)}` : undefined,
-          }],
-        })
+      `${getOptimizedMediaUrl({ originalSrc: src, width, height, factor })})
       } ${Math.trunc(factor * width)}w`
     )
     .join(", ");
diff --git a/components/Video.tsx b/components/Video.tsx
index 8e968fe3..a372dfc4 100644
--- a/components/Video.tsx
+++ b/components/Video.tsx
@@ -5,7 +5,7 @@
 import { forwardRef } from "preact/compat";
 import type { JSX } from "preact";
 
-import { getSrcSet } from "./Image.tsx";
+import { getOptimizedMediaUrl, getSrcSet } from "./Image.tsx";
 
 type Props =
   & Omit<JSX.IntrinsicElements["video"], "width" | "height" | "preload">
@@ -19,11 +19,18 @@ const Video = forwardRef<HTMLVideoElement, Props>((props, ref) => {
   const { loading = "lazy" } = props;
   const srcSet = getSrcSet(props.src, props.width, props.height);
 
+  const optimizedVideoSrc = getOptimizedMediaUrl({
+    originalSrc: props.src,
+    width: props.width,
+    height: props.height,
+    factor: 1,
+  });
+
   return (
     <video
       {...props}
       preload={undefined}
-      src={props.src}
+      src={optimizedVideoSrc}
       srcSet={srcSet}
       loading={loading}
       ref={ref}