cloudcommerce 0.33.1 → 0.33.3

package/packages/storefront/src/lib/state/shopping-cart.ts

@@ -1,9 +1,11 @@
 import type { Products, CartSet, SearchItem } from '@cloudcommerce/api/types';
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
+import mitt from 'mitt';
 import useStorage from '@@sf/state/use-storage';
 import addItem from '@@sf/state/shopping-cart/add-cart-item';
 import parseProduct from '@@sf/state/shopping-cart/parse-product';
 
+type CartItem = CartSet['items'][0];
 const storageKey = 'ecomShoppingCart';
 const emptyCart = {
   items: [],
@@ -64,7 +66,7 @@ const shoppingCart = computed({
   },
 });
 
-const addCartItem = (newItem: CartSet['items'][0]) => {
+const addCartItem = (newItem: CartItem) => {
   const cartObj = shoppingCart.value;
   const upsertedItem = addItem(cartObj, newItem);
   if (upsertedItem) {
@@ -97,3 +99,34 @@ export {
   parseProduct,
   addProductToCart,
 };
+
+type CartEvent = {
+  addCartItem: CartItem,
+  removeCartItem: CartItem,
+};
+const cartEmitter = mitt<CartEvent>();
+const cloneItems = () => shoppingCart.value.items.map((item) => ({ ...item }));
+let oldItems = cloneItems();
+watch(shoppingCart, ({ items }) => {
+  ['addCartItem' as const, 'removeCartItem' as const].forEach((evName) => {
+    const isAdd = evName === 'addCartItem';
+    const baseItems = isAdd ? items : oldItems;
+    const compareItems = isAdd ? oldItems : items;
+    baseItems.forEach((baseItem) => {
+      if (!baseItem.quantity) return;
+      const compareItem = compareItems.find(({ _id }) => _id === baseItem._id);
+      if (compareItem && baseItem.quantity > compareItem.quantity) {
+        cartEmitter.emit(evName, {
+          ...baseItem,
+          quantity: baseItem.quantity - (compareItem?.quantity || 0),
+        });
+      }
+    });
+  });
+  oldItems = cloneItems();
+});
+
+export const cartEvents = {
+  on: cartEmitter.on,
+  off: cartEmitter.off,
+};

package/packages/storefront/src/lib/state/use-analytics.ts

@@ -1,6 +1,8 @@
 import type { Products, Carts, SearchItem } from '@cloudcommerce/types';
+import { watchOnce } from '@vueuse/core';
 import { price as getPrice, name as getName } from '@ecomplus/utils';
-import { customer } from '@@sf/state/customer-session';
+import { customer, isLogged } from '@@sf/state/customer-session';
+import { cartEvents } from '@@sf/state/shopping-cart';
 import utm from '@@sf/scripts/session-utm';
 
 export const trackingIds: {
@@ -13,93 +15,53 @@ export const trackingIds: {
   session_id?: string,
 } = {};
 
-export const getAnalyticsContext = () => {
-  return {
-    ...trackingIds,
-    user_id: customer.value._id,
-    utm,
-  };
+// `page_view` params not typed
+// https://developers.google.com/tag-platform/gtagjs/reference/events#page_view
+type PageViewParams = {
+  page_location: string,
+  client_id?: string,
+  language: string,
+  page_encoding?: string,
+  page_title: string,
+  user_agent: string,
 };
-
 const pageViewState = {} as {
   resolve: ((...args: any[]) => void) | null | undefined,
   waiting: Promise<unknown> | undefined,
+  params: PageViewParams | undefined,
+};
+const resetPageViewPromise = () => {
+  if (pageViewState.resolve) return;
+  pageViewState.waiting = new Promise((resolve) => {
+    pageViewState.resolve = resolve;
+  });
 };
 if (!import.meta.env.SSR) {
-  const resetPageViewPromise = () => {
-    if (pageViewState.resolve) return;
-    pageViewState.waiting = new Promise((resolve) => {
-      pageViewState.resolve = resolve;
-    });
-  };
   resetPageViewPromise();
-  document.addEventListener('astro:beforeload', resetPageViewPromise);
-  const {
-    gtag,
-    GTAG_TAG_ID,
-    GA_TRACKING_ID,
-  } = window as { [k:string]: any, gtag?: Gtag.Gtag };
-  const tagId = GTAG_TAG_ID || GA_TRACKING_ID;
-  if (tagId && typeof gtag === 'function') {
-    ['client_id', 'session_id', 'gclid'].forEach((key) => {
-      gtag('get', tagId, key, (id) => {
-        trackingIds[key === 'gclid' ? key : `g_${key}`] = id;
-      });
-    });
-  }
-  const url = new URL(window.location.toString());
-  ['gclid', 'fbclid'].forEach((key) => {
-    const id = trackingIds[key] || url.searchParams.get(key);
-    if (id) {
-      trackingIds[key] = id;
-      sessionStorage.setItem(`analytics_${key}`, id);
-    } else {
-      trackingIds[key] = sessionStorage.getItem(`analytics_${key}`) || undefined;
-    }
-  });
-  const cookieNames = ['_fbp'];
-  if (!trackingIds.fbclid) cookieNames.push('_fbc');
-  if (!trackingIds.g_client_id) cookieNames.push('_ga');
-  cookieNames.forEach((cookieName) => {
-    document.cookie.split(';').forEach((cookie) => {
-      const [key, value] = cookie.split('=');
-      if (key.trim() === cookieName && value) {
-        switch (cookieName) {
-          case '_fbp': trackingIds.fbp = value; break;
-          case '_fbc': trackingIds.fbclid = value; break;
-          case '_ga': trackingIds.g_client_id = value.substring(6); break;
-          default:
-        }
-      }
-    });
-  });
-  ['client_id', 'session_id'].forEach((key) => {
-    const storage = key === 'client_id' ? localStorage : sessionStorage;
-    const storedValue = storage.getItem(`analytics_${key}`);
-    if (storedValue) {
-      trackingIds[key] = storedValue;
-    } else {
-      trackingIds[key] = trackingIds[`g_${key}`]
-        || `${Math.ceil(Math.random() * 1000000)}.${Math.ceil(Math.random() * 1000000)}`;
-    }
-    storage.setItem(`analytics_${key}`, trackingIds[key]);
-  });
 }
 
-// `page_view` params not typed
-// https://developers.google.com/tag-platform/gtagjs/reference/events#page_view
-type PageViewParams = {
-  page_location?: string,
-  client_id?: string,
-  language?: string,
-  page_encoding?: string,
-  page_title?: string,
-  user_agent?: string,
+export const getPageViewParams = () => {
+  return {
+    page_location: window.location.toString(),
+    language: globalThis.$storefront.settings.lang || 'pt_br',
+    page_title: document.title,
+    user_agent: navigator.userAgent,
+  };
+};
+
+export const getAnalyticsContext = () => {
+  return {
+    ...(pageViewState.params || getPageViewParams()),
+    ...trackingIds,
+    user_id: customer.value._id,
+    utm,
+  };
 };
 
 export const GTAG_EVENT_TYPE = 'GtagEvent';
 
 export type GtagEventMessage = typeof trackingIds &
+  PageViewParams &
   { utm: typeof utm } &
   {
     type: typeof GTAG_EVENT_TYPE,
@@ -118,7 +80,7 @@ let defaultItemsList = '';
 
 export const emitGtagEvent = async <N extends Gtag.EventNames = 'view_item'>(
   name: N,
-  _params: N extends 'page_view' ? PageViewParams : Gtag.EventParams = {},
+  _params: N extends 'page_view' ? PageViewParams : Gtag.EventParams,
 ) => {
   if (import.meta.env.SSR) return;
   const params = _params as Gtag.EventParams;
@@ -148,6 +110,7 @@ export const emitGtagEvent = async <N extends Gtag.EventNames = 'view_item'>(
       }
     }
     if (pageViewState.resolve) {
+      pageViewState.params = (_params as PageViewParams);
       pageViewState.resolve();
       pageViewState.resolve = null;
     }
@@ -156,6 +119,14 @@ export const emitGtagEvent = async <N extends Gtag.EventNames = 'view_item'>(
     if (name === 'view_item') {
       params.items?.forEach((item) => {
         if (item.index !== undefined) return;
+        if (!item.item_list_id && !item.item_list_name) {
+          const { apiContext } = window.$storefront;
+          // @ts-ignore
+          if (apiContext?.doc._id === item.object_id) {
+            item.item_list_id = 'product-page';
+            item.item_list_name = 'Product page';
+          }
+        }
         const listKey = item.item_list_id
           || item.item_list_name
           || defaultItemsList;
@@ -207,6 +178,9 @@ export const getGtagItem = (product: Partial<Products> | SearchItem | CartItem)
     item_name: name,
     item_id: product.sku,
     price: Math.round(getPrice(product) * 100) / 100,
+    // https://developers.google.com/analytics/devguides/collection/ga4/item-scoped-ecommerce#add_an_item-scoped_custom_parameter
+    // @ts-ignore
+    object_id: product._id,
   };
   if (variants && variants.length) {
     item.item_variant = variants.join(' / ');
@@ -240,3 +214,70 @@ export const getGtagItem = (product: Partial<Products> | SearchItem | CartItem)
   }
   return item;
 };
+
+export const useAnalytics = () => {
+  document.addEventListener('astro:beforeload', resetPageViewPromise);
+  if (isLogged.value) {
+    emitGtagEvent('login', {});
+  } else {
+    watchOnce(isLogged, () => emitGtagEvent('login', {}));
+  }
+  cartEvents.on('*', (evName, cartItem) => {
+    emitGtagEvent(
+      evName === 'addCartItem' ? 'add_to_cart' : 'remove_from_cart',
+      { items: [getGtagItem(cartItem)] },
+    );
+  });
+  const {
+    gtag,
+    GTAG_TAG_ID,
+    GA_TRACKING_ID,
+  } = window as { [k:string]: any, gtag?: Gtag.Gtag };
+  const tagId = GTAG_TAG_ID || GA_TRACKING_ID;
+  if (tagId && typeof gtag === 'function') {
+    ['client_id', 'session_id', 'gclid'].forEach((key) => {
+      gtag('get', tagId, key, (id) => {
+        trackingIds[key === 'gclid' ? key : `g_${key}`] = id;
+      });
+    });
+  }
+  const url = new URL(window.location.toString());
+  ['gclid', 'fbclid'].forEach((key) => {
+    const id = trackingIds[key] || url.searchParams.get(key);
+    if (id) {
+      trackingIds[key] = id;
+      sessionStorage.setItem(`analytics_${key}`, id);
+    } else {
+      trackingIds[key] = sessionStorage.getItem(`analytics_${key}`) || undefined;
+    }
+  });
+  const cookieNames = ['_fbp'];
+  if (!trackingIds.fbclid) cookieNames.push('_fbc');
+  if (!trackingIds.g_client_id) cookieNames.push('_ga');
+  cookieNames.forEach((cookieName) => {
+    document.cookie.split(';').forEach((cookie) => {
+      const [key, value] = cookie.split('=');
+      if (key.trim() === cookieName && value) {
+        switch (cookieName) {
+          case '_fbp': trackingIds.fbp = value; break;
+          case '_fbc': trackingIds.fbclid = value; break;
+          case '_ga': trackingIds.g_client_id = value.substring(6); break;
+          default:
+        }
+      }
+    });
+  });
+  ['client_id', 'session_id'].forEach((key) => {
+    const storage = key === 'client_id' ? localStorage : sessionStorage;
+    const storedValue = storage.getItem(`analytics_${key}`);
+    if (storedValue) {
+      trackingIds[key] = storedValue;
+    } else {
+      trackingIds[key] = trackingIds[`g_${key}`]
+        || `${Math.ceil(Math.random() * 1000000)}.${Math.ceil(Math.random() * 1000000)}`;
+    }
+    storage.setItem(`analytics_${key}`, trackingIds[key]);
+  });
+};
+
+export default useAnalytics;

package/packages/test-base/package.json

@@ -2,7 +2,7 @@
   "name": "@cloudcommerce/test-base",
   "private": true,
   "type": "module",
-  "version": "0.33.1",
+  "version": "0.33.3",
   "description": "E-Com Plus Cloud Commerce basic setup for testing",
   "main": "lib/index.js",
   "repository": {

package/packages/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/types",
   "type": "module",
-  "version": "0.33.1",
+  "version": "0.33.3",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {