@ikas/storefront 3.0.0-beta.1 → 4.0.0-alpha.10

package/src/analytics/ikas.ts

@@ -0,0 +1,558 @@
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import { IkasBaseStore } from "../store";
+import { CheckoutStep } from "../components/checkout/model";
+import {
+  IkasCheckout,
+  IkasBrand,
+  IkasCategory,
+  IkasOrderLineItem,
+  IkasProduct,
+  IkasThemeJsonPageType,
+} from "../models";
+import { IkasCart } from "../models/data/cart";
+
+enum StorefrontEventType {
+  SESSION_START = 1,
+  PAGE_VIEW = 2,
+  PRODUCT_VIEW = 3,
+  ADD_TO_CART = 4,
+  VIEW_CART = 5,
+  ORDER_SUCCESS = 6,
+  BEGIN_CHECKOUT = 7,
+  CHECKOUT_STEP = 8,
+  CUSTOMER_REGISTER = 9,
+  CUSTOMER_VISIT = 10,
+  CUSTOMER_LOGIN = 11,
+  BRAND_VIEW = 12,
+  CATEGORY_VIEW = 13,
+}
+
+interface CloudFrontEvent {
+  sid: string; // sessionId
+  vid: string; // visitorId
+  sfid: string; // storefrontId
+  scid: string; // salesChannelId
+  cid?: string; // customerId
+  e: Event[]; // events
+}
+
+enum StorefrontEventPageType {
+  INDEX = 1,
+  CATEGORY = 2,
+  BRAND = 3,
+  PRODUCT = 4,
+  CUSTOM = 5,
+  ACCOUNT = 6,
+  ADDRESSES = 7,
+  ORDERS = 8,
+  ORDER_DETAIL = 9,
+  LOGIN = 10,
+  REGISTER = 11,
+  FORGOT_PASSWORD = 12,
+  RECOVER_PASSWORD = 13,
+  CART = 14,
+  FAVORITE_PRODUCTS = 15,
+  SEARCH = 16,
+  NOT_FOUND = 17,
+  BLOG = 18,
+  BLOG_INDEX = 19,
+  BLOG_CATEGORY = 20,
+  CHECKOUT = 21,
+}
+
+interface Event {
+  t: StorefrontEventType; // type
+  d: EventPayload; // data
+  ts: number; // timestamp
+}
+
+interface EventPayload {
+  u: string; // url
+  r?: string; // referer
+  utm?: UTMData;
+  pt?: StorefrontEventPageType; // pageType
+  d?: EventPayloadDetail; // detail
+  m?: Record<string, string>; // metadata
+}
+
+interface UTMData {
+  ca?: string; // campaign
+  c?: string; // content
+  m?: string; // medium
+  s?: string; // source
+  t?: string; // term
+}
+
+interface EventPayloadDetail {
+  br?: BrandDetail; // brand
+  ctg?: CategoryDetail; // category
+  pr?: ProductDetail; // product
+  crt?: CartDetail; // cart
+  crtItm?: CartItemDetail; // cartItem
+  chk?: CheckoutDetail; // checkout
+  cst?: CustomerDetail; // customer
+}
+
+interface BrandDetail {
+  id: string;
+}
+
+interface CategoryDetail {
+  id: string;
+}
+
+interface ProductDetail {
+  id: string;
+  vid: string; // variantId
+}
+
+interface CartDetail {
+  id: string;
+  c: number; // count
+}
+
+interface CartItemDetail {
+  id: string;
+  c: number; // count
+}
+
+interface CheckoutDetail {
+  id: string;
+  s?: string; // step
+}
+
+interface CustomerDetail {
+  id?: string;
+  e?: string; // email
+  c?: boolean; // consent
+}
+
+type IdWithExpiry = {
+  id: string;
+  expiry: number;
+};
+
+const ANALYTICS_URL = process.env.NEXT_PUBLIC_ANALYTICS_URL
+  ? `${process.env.NEXT_PUBLIC_ANALYTICS_URL}/sendEvent`
+  : "https://0.myikas.com/sendEvent";
+
+export default class IkasAnalytics {
+  static SESSION_ID_KEY = "ikas_session_id";
+  static VISITOR_ID_KEY = "ikas_visitor_id";
+  static EXPIRY_LENGTH = 1000 * 60 * 30; // ms - 30mins
+
+  static sessionId?: string | null;
+  static visitorId?: string | null;
+
+  static async createSessionId() {
+    try {
+      const idWithExpiry: IdWithExpiry = {
+        id: Date.now() + "",
+        expiry: Date.now() + this.EXPIRY_LENGTH,
+      };
+
+      localStorage.setItem(this.SESSION_ID_KEY, JSON.stringify(idWithExpiry));
+      this.sessionId = idWithExpiry.id;
+
+      await this.sessionStart();
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static async checkSessionId() {
+    try {
+      const existingSessionIdData = localStorage.getItem(this.SESSION_ID_KEY);
+
+      if (existingSessionIdData) {
+        const idWithExpiry = JSON.parse(existingSessionIdData) as IdWithExpiry;
+
+        if (idWithExpiry.expiry < Date.now()) {
+          await this.createSessionId();
+        } else {
+          // Extend the duration of the sessionId
+          idWithExpiry.expiry = Date.now() + this.EXPIRY_LENGTH;
+          localStorage.setItem(
+            this.SESSION_ID_KEY,
+            JSON.stringify(idWithExpiry)
+          );
+          this.sessionId = idWithExpiry.id;
+        }
+      } else {
+        await this.createSessionId();
+      }
+
+      IkasStorefrontConfig.init({
+        sessionId: this.sessionId || "",
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static checkVisitorId() {
+    try {
+      const existingVisitorId = localStorage.getItem(this.VISITOR_ID_KEY);
+
+      if (existingVisitorId) {
+        this.visitorId = existingVisitorId;
+      } else {
+        this.visitorId = Date.now() + "";
+        localStorage.setItem(this.VISITOR_ID_KEY, this.visitorId);
+      }
+
+      IkasStorefrontConfig.init({
+        visitorId: this.visitorId,
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static getPageType(
+    pageType: IkasThemeJsonPageType
+  ): StorefrontEventPageType | undefined {
+    switch (pageType) {
+      case IkasThemeJsonPageType.INDEX:
+        return StorefrontEventPageType.INDEX;
+
+      case IkasThemeJsonPageType.CATEGORY:
+        return StorefrontEventPageType.CATEGORY;
+
+      case IkasThemeJsonPageType.BRAND:
+        return StorefrontEventPageType.BRAND;
+
+      case IkasThemeJsonPageType.PRODUCT:
+        return StorefrontEventPageType.PRODUCT;
+
+      case IkasThemeJsonPageType.CUSTOM:
+        return StorefrontEventPageType.CUSTOM;
+
+      case IkasThemeJsonPageType.ACCOUNT:
+        return StorefrontEventPageType.ACCOUNT;
+
+      case IkasThemeJsonPageType.ADDRESSES:
+        return StorefrontEventPageType.ADDRESSES;
+
+      case IkasThemeJsonPageType.ORDERS:
+        return StorefrontEventPageType.ORDERS;
+
+      case IkasThemeJsonPageType.ORDER_DETAIL:
+        return StorefrontEventPageType.ORDER_DETAIL;
+
+      case IkasThemeJsonPageType.LOGIN:
+        return StorefrontEventPageType.LOGIN;
+
+      case IkasThemeJsonPageType.REGISTER:
+        return StorefrontEventPageType.REGISTER;
+
+      case IkasThemeJsonPageType.FORGOT_PASSWORD:
+        return StorefrontEventPageType.FORGOT_PASSWORD;
+
+      case IkasThemeJsonPageType.RECOVER_PASSWORD:
+        return StorefrontEventPageType.RECOVER_PASSWORD;
+
+      case IkasThemeJsonPageType.CART:
+        return StorefrontEventPageType.CART;
+
+      case IkasThemeJsonPageType.FAVORITE_PRODUCTS:
+        return StorefrontEventPageType.FAVORITE_PRODUCTS;
+
+      case IkasThemeJsonPageType.SEARCH:
+        return StorefrontEventPageType.SEARCH;
+
+      case IkasThemeJsonPageType.NOT_FOUND:
+        return StorefrontEventPageType.NOT_FOUND;
+
+      case IkasThemeJsonPageType.BLOG:
+        return StorefrontEventPageType.BLOG;
+
+      case IkasThemeJsonPageType.BLOG_INDEX:
+        return StorefrontEventPageType.BLOG_INDEX;
+
+      case IkasThemeJsonPageType.BLOG_CATEGORY:
+        return StorefrontEventPageType.BLOG_CATEGORY;
+
+      case IkasThemeJsonPageType.CHECKOUT:
+        return StorefrontEventPageType.CHECKOUT;
+
+      default:
+        break;
+    }
+  }
+
+  static getCustomerData() {
+    const store = IkasBaseStore.getInstance();
+    const customer = store.customerStore.customer;
+
+    return {
+      id: customer?.id || undefined,
+      e: customer?.email || undefined,
+      c: store.customerStore.customerConsentGranted,
+    };
+  }
+
+  static getCommonEventData() {
+    const store = IkasBaseStore.getInstance();
+
+    return {
+      u: window.location.href,
+      r: document.referrer,
+      pt: store.currentPageType
+        ? this.getPageType(store.currentPageType)
+        : undefined,
+    };
+  }
+
+  static async sendEvents(events: Event[]) {
+    try {
+      await this.checkSessionId();
+      this.checkVisitorId();
+
+      const store = IkasBaseStore.getInstance();
+      const cloudFrontEvent: CloudFrontEvent = {
+        e: events,
+        scid: IkasStorefrontConfig.getSalesChannelId()!,
+        sfid: IkasStorefrontConfig.getStorefrontId()!,
+        sid: this.sessionId!,
+        vid: this.visitorId!,
+        cid: store.customerStore.customer?.id,
+      };
+
+      await fetch(ANALYTICS_URL, {
+        method: "POST",
+        body: JSON.stringify(cloudFrontEvent),
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": IkasStorefrontConfig.getApiKey()!,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  // EVENTS
+
+  static async sessionStart() {
+    const event: Event = {
+      t: StorefrontEventType.SESSION_START,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async pageView(pageType: IkasThemeJsonPageType) {
+    const event: Event = {
+      t: StorefrontEventType.PAGE_VIEW,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        pt: this.getPageType(pageType),
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async productView(productDetail: IkasProduct) {
+    const event: Event = {
+      t: StorefrontEventType.PRODUCT_VIEW,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          pr: {
+            id: productDetail.id,
+            vid: productDetail.selectedVariant.id,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async addToCart(
+    item: IkasOrderLineItem,
+    quantity: number,
+    cart: IkasCart
+  ) {
+    const event: Event = {
+      t: StorefrontEventType.ADD_TO_CART,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          crt: {
+            id: cart.id,
+            c: cart.itemCount,
+          },
+          crtItm: {
+            id: item.id,
+            c: quantity,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async viewCart(cart: IkasCart) {
+    const event: Event = {
+      t: StorefrontEventType.VIEW_CART,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          crt: {
+            id: cart.id,
+            c: cart.itemCount,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async orderSuccess(checkout: IkasCheckout) {
+    const event: Event = {
+      t: StorefrontEventType.ORDER_SUCCESS,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          chk: {
+            id: checkout.id!,
+            s: "success",
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+    this.createSessionId();
+  }
+
+  static async beginCheckout(checkout: IkasCheckout) {
+    const event: Event = {
+      t: StorefrontEventType.BEGIN_CHECKOUT,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          chk: {
+            id: checkout.id!,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async checkoutStep(checkout: IkasCheckout, step: CheckoutStep) {
+    const event: Event = {
+      t: StorefrontEventType.CHECKOUT_STEP,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          chk: {
+            id: checkout.id!,
+            s: step,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async customerRegister() {
+    const event: Event = {
+      t: StorefrontEventType.CUSTOMER_REGISTER,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async customerLogin() {
+    const event: Event = {
+      t: StorefrontEventType.CUSTOMER_LOGIN,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async customerVisit() {
+    const event: Event = {
+      t: StorefrontEventType.CUSTOMER_VISIT,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async viewBrand(brand: IkasBrand) {
+    const event: Event = {
+      t: StorefrontEventType.BRAND_VIEW,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+          br: {
+            id: brand.id,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async viewCategory(category: IkasCategory) {
+    const event: Event = {
+      t: StorefrontEventType.CATEGORY_VIEW,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+          ctg: {
+            id: category.id,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+}

package/src/analytics/index.ts

@@ -0,0 +1,2 @@
+export { Analytics } from "./analytics";
+export * from "./head";