@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/analytics/analytics.ts

@@ -0,0 +1,497 @@
+import { makeAutoObservable } from "mobx";
+import {
+  IkasProductDetail,
+  IkasOrderLineItem,
+  IkasCheckout,
+  IkasCategory,
+  IkasThemePageType,
+  IkasOrderTransaction,
+  IkasBrand,
+} from "../models";
+import { CheckoutStep } from "../components/checkout/model";
+import { FacebookPixel } from "./facebookPixel";
+import { GoogleTagManager } from "./googleTagManager";
+import { IkasCart } from "../models/data/cart";
+import { IkasEventSubscriber, IkasEventType } from "./events";
+import { IkasStorefrontConfig } from "../storefront";
+import _cloneDeep from "lodash/cloneDeep";
+import { tryForEach } from "../utils";
+import { IkasContactForm } from "../store/customer";
+import IkasAnalytics from "./ikas";
+
+const LS_BEGIN_CHECKOUT_KEY = "gtmBeginCheckout";
+
+export class Analytics {
+  static subscribers: IkasEventSubscriber[] = [];
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  static async getCustomerInfo() {
+    const { store } = IkasStorefrontConfig;
+    await store.customerStore.waitUntilInitialized();
+
+    const customer = store.customerStore.customer;
+
+    if (customer) {
+      return {
+        ...customer.basicInfo,
+        consentGranted: store.customerStore.customerConsentGranted,
+      };
+    }
+
+    return null;
+  }
+
+  static async pageView(pageType: IkasThemePageType) {
+    try {
+      const url = window.location.href;
+      const customerInfo = await Analytics.getCustomerInfo();
+
+      GoogleTagManager.pageView(url);
+      IkasAnalytics.pageView(pageType);
+
+      tryForEach(Analytics.subscribers, (s) => {
+        s.callback({
+          type: IkasEventType.PAGE_VIEW,
+          data: {
+            url,
+            pageType,
+            customer: customerInfo,
+          },
+        });
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static productView(productDetail: IkasProductDetail) {
+    try {
+      FacebookPixel.productView(productDetail);
+      GoogleTagManager.productView(productDetail);
+      IkasAnalytics.productView(productDetail);
+
+      if (Analytics.subscribers.length) {
+        const clone = _cloneDeep(productDetail);
+        const cloneProductDetail = new IkasProductDetail(
+          clone.product,
+          clone.selectedVariantValues
+        );
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.PRODUCT_VIEW,
+            data: {
+              productDetail: cloneProductDetail,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToCart(
+    item: IkasOrderLineItem,
+    quantity: number,
+    eventId: string,
+    cart: IkasCart
+  ) {
+    try {
+      FacebookPixel.addToCart(item, quantity, eventId);
+      GoogleTagManager.addToCart(item, quantity);
+      IkasAnalytics.addToCart(item, quantity, cart);
+
+      if (Analytics.subscribers.length) {
+        const cloneItem = _cloneDeep(item);
+        const cloneCart = new IkasCart(_cloneDeep(cart));
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.ADD_TO_CART,
+            data: {
+              item: cloneItem,
+              quantity,
+              cart: cloneCart,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static removeFromCart(
+    item: IkasProductDetail | IkasOrderLineItem,
+    quantity: number,
+    cart: IkasCart
+  ) {
+    try {
+      GoogleTagManager.removeFromCart(item, quantity);
+
+      if (Analytics.subscribers.length) {
+        const cloneItem = _cloneDeep(item);
+        const cloneCart = new IkasCart(_cloneDeep(cart));
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.REMOVE_FROM_CART,
+            data: {
+              item: cloneItem,
+              quantity,
+              cart: cloneCart,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static beginCheckout(checkout: IkasCheckout) {
+    try {
+      const beginCheckout = localStorage.getItem(LS_BEGIN_CHECKOUT_KEY);
+      if (beginCheckout && checkout.id === beginCheckout) return;
+      localStorage.setItem(LS_BEGIN_CHECKOUT_KEY, checkout.id!);
+
+      FacebookPixel.beginCheckout(checkout);
+      GoogleTagManager.beginCheckout(checkout);
+      IkasAnalytics.beginCheckout(checkout);
+
+      if (Analytics.subscribers.length) {
+        const cloneCheckout = new IkasCheckout(_cloneDeep(checkout));
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.BEGIN_CHECKOUT,
+            data: {
+              checkout: cloneCheckout,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static purchase(checkout: IkasCheckout, transaction: IkasOrderTransaction) {
+    try {
+      localStorage.removeItem(LS_BEGIN_CHECKOUT_KEY);
+
+      FacebookPixel.purchase(checkout, transaction.id || "");
+      GoogleTagManager.purchase(checkout, transaction.id || "");
+      IkasAnalytics.orderSuccess(checkout);
+
+      if (Analytics.subscribers.length) {
+        const cloneCheckout = new IkasCheckout(_cloneDeep(checkout));
+        const cloneTransaction = _cloneDeep(transaction);
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.COMPLETE_CHECKOUT,
+            data: {
+              checkout: cloneCheckout,
+              transaction: cloneTransaction,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static checkoutStep(checkout: IkasCheckout, step: CheckoutStep) {
+    try {
+      GoogleTagManager.checkoutStep(checkout, step);
+      IkasAnalytics.checkoutStep(checkout, step);
+
+      if (Analytics.subscribers.length) {
+        const cloneCheckout = new IkasCheckout(_cloneDeep(checkout));
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.CHECKOUT_STEP,
+            data: {
+              checkout: cloneCheckout,
+              step,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static disableHTML() {
+    try {
+      GoogleTagManager.disableHTML();
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToWishlist(productId: string) {
+    try {
+      FacebookPixel.addToWishlist(productId);
+
+      if (Analytics.subscribers.length) {
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.ADD_TO_WISHLIST,
+            data: {
+              productId,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static search(searchKeyword: string) {
+    try {
+      FacebookPixel.search(searchKeyword);
+      GoogleTagManager.search(searchKeyword);
+
+      if (Analytics.subscribers.length) {
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.SEARCH,
+            data: {
+              searchKeyword,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static completeRegistration(email: string, customerId?: string) {
+    try {
+      FacebookPixel.completeRegistration();
+      GoogleTagManager.completeRegistration();
+      IkasAnalytics.customerRegister();
+
+      if (Analytics.subscribers.length) {
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.CUSTOMER_REGISTER,
+            data: {
+              email,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static async customerLogin() {
+    try {
+      const customerInfo = await Analytics.getCustomerInfo();
+      if (!customerInfo || !customerInfo.email) return;
+
+      GoogleTagManager.customerLogin(customerInfo.email);
+      IkasAnalytics.customerLogin();
+
+      if (Analytics.subscribers.length) {
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.CUSTOMER_LOGIN,
+            data: {
+              customer: customerInfo,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static async customerLogout() {
+    try {
+      if (Analytics.subscribers.length) {
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.CUSTOMER_LOGOUT,
+            data: {},
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static async customerVisit() {
+    try {
+      const customerInfo = await Analytics.getCustomerInfo();
+      if (!customerInfo || !customerInfo.email) return;
+
+      GoogleTagManager.customerVisit(customerInfo.email);
+      IkasAnalytics.customerVisit();
+
+      if (Analytics.subscribers.length) {
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.CUSTOMER_VISIT,
+            data: {
+              customer: customerInfo,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewCart(cart: IkasCart | null | undefined) {
+    try {
+      if (cart) {
+        FacebookPixel.viewCart(cart);
+        IkasAnalytics.viewCart(cart);
+
+        if (Analytics.subscribers.length) {
+          const cloneCart = new IkasCart(_cloneDeep(cart));
+
+          tryForEach(Analytics.subscribers, (s) => {
+            s.callback({
+              type: IkasEventType.VIEW_CART,
+              data: {
+                cart: cloneCart,
+              },
+            });
+          });
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewCategory(categoryPath: string, category: IkasCategory) {
+    try {
+      FacebookPixel.viewCategory(categoryPath);
+      GoogleTagManager.viewCategory(category, categoryPath);
+      IkasAnalytics.viewCategory(category);
+
+      if (Analytics.subscribers.length) {
+        const cloneCategory = new IkasCategory(_cloneDeep(category));
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.VIEW_CATEGORY,
+            data: {
+              categoryPath,
+              category: cloneCategory,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewBrand(brand: IkasBrand) {
+    try {
+      IkasAnalytics.viewBrand(brand);
+
+      if (Analytics.subscribers.length) {
+        const cloneBrand = new IkasBrand(_cloneDeep(brand));
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.VIEW_BRAND,
+            data: {
+              brand: cloneBrand,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewSearchResults(
+    searchKeyword: string,
+    productDetails: IkasProductDetail[]
+  ) {
+    try {
+      if (Analytics.subscribers.length) {
+        const cloneProductDetails = _cloneDeep(productDetails).map(
+          (p) => new IkasProductDetail(p.product, p.selectedVariantValues)
+        );
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.VIEW_SEARCH_RESULTS,
+            data: {
+              searchKeyword,
+              productDetails: cloneProductDetails,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewListing(productDetails: IkasProductDetail[]) {
+    try {
+      if (Analytics.subscribers.length) {
+        const cloneProductDetails = _cloneDeep(productDetails).map(
+          (p) => new IkasProductDetail(p.product, p.selectedVariantValues)
+        );
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.VIEW_LISTING,
+            data: {
+              productDetails: cloneProductDetails,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static contactForm(form: IkasContactForm) {
+    try {
+      FacebookPixel.contactForm();
+
+      if (Analytics.subscribers.length) {
+        const cloneForm = _cloneDeep(form);
+
+        tryForEach(Analytics.subscribers, (s) => {
+          s.callback({
+            type: IkasEventType.CONTACT_FORM,
+            data: {
+              form: cloneForm,
+            },
+          });
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}

package/src/analytics/events.ts

@@ -0,0 +1,115 @@
+import { Analytics } from "./analytics";
+
+export function IkasEvents(initialSubscribers: IkasEventSubscriber[]) {
+  // Subscriber type is "any" because this function will be called from app scripts
+  // We need to ensure type safety on runtime
+  const subscribe = (subscriber: any) => {
+    if (!isValidIkasEventSubscriber(subscriber)) return;
+
+    const existingSubscriberIndex = Analytics.subscribers.findIndex(
+      (s) => s.id === subscriber.id
+    );
+
+    if (existingSubscriberIndex !== -1) {
+      Analytics.subscribers[existingSubscriberIndex] = subscriber;
+    } else {
+      Analytics.subscribers.push(subscriber);
+    }
+  };
+
+  const unsubscribe = (id: string) => {
+    const existingSubscriberIndex = Analytics.subscribers.findIndex(
+      (s) => s.id === id
+    );
+
+    if (existingSubscriberIndex !== -1)
+      Analytics.subscribers.splice(existingSubscriberIndex, 1);
+  };
+
+  initialSubscribers.forEach(subscribe);
+
+  return {
+    subscribe,
+    unsubscribe,
+  };
+}
+
+export function initIkasEvents() {
+  //@ts-ignore
+  if (typeof window !== "undefined") {
+    let initialSubscribers: any[] = [];
+
+    try {
+      //@ts-ignore
+      const existingIkasEvents = window.IkasEvents;
+      if (
+        existingIkasEvents &&
+        existingIkasEvents.subscribers &&
+        existingIkasEvents.subscribers.length
+      ) {
+        initialSubscribers = existingIkasEvents.subscribers;
+      }
+    } catch (err) {}
+
+    //@ts-ignore
+    window.IkasEvents = IkasEvents(initialSubscribers);
+  }
+}
+
+// This is for the initial page load, a temporary object to collect subscribers from app scripts
+// until the page component mounts
+export function getIkasEventsScript() {
+  return `<script>
+    var subscribers = [];
+    var subscribe = (subscriber) => { subscribers.push(subscriber); }; 
+    var unsubscribe = () => {};
+    
+    window.IkasEvents = {
+      subscribers,
+      subscribe,
+      unsubscribe
+    };
+  </script>`;
+}
+
+export function isValidIkasEventSubscriber(data: any) {
+  return !!(
+    data &&
+    data.id &&
+    typeof data.id === "string" &&
+    data.callback &&
+    typeof data.callback === "function"
+  );
+}
+
+export enum IkasEventType {
+  PAGE_VIEW = "PAGE_VIEW",
+  PRODUCT_VIEW = "PRODUCT_VIEW",
+  ADD_TO_CART = "ADD_TO_CART",
+  REMOVE_FROM_CART = "REMOVE_FROM_CART",
+  BEGIN_CHECKOUT = "BEGIN_CHECKOUT",
+  CHECKOUT_STEP = "CHECKOUT_STEP",
+  COMPLETE_CHECKOUT = "COMPLETE_CHECKOUT",
+  ADD_TO_WISHLIST = "ADD_TO_WISHLIST",
+  SEARCH = "SEARCH",
+  CUSTOMER_REGISTER = "CUSTOMER_REGISTER",
+  CUSTOMER_LOGIN = "CUSTOMER_LOGIN",
+  CUSTOMER_LOGOUT = "CUSTOMER_LOGOUT",
+  CUSTOMER_VISIT = "CUSTOMER_VISIT",
+  VIEW_CART = "VIEW_CART",
+  VIEW_CATEGORY = "VIEW_CATEGORY",
+  VIEW_BRAND = "VIEW_BRAND",
+  VIEW_SEARCH_RESULTS = "VIEW_SEARCH_RESULTS",
+  VIEW_LISTING = "VIEW_LISTING",
+  CONTACT_FORM = "CONTACT_FORM",
+}
+
+export type IkasEventSubscriber = {
+  id: string;
+  callback: (event: IkasEvent) => void;
+};
+
+export type IkasEvent = {
+  type: IkasEventType;
+  data: any;
+};