@ikas/storefront 4.0.0-alpha.69 → 4.0.0-alpha.7

package/src/analytics/events.ts

@@ -0,0 +1,116 @@
+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",
+  EMAIL_SUBSCRIPTION = "EMAIL_SUBSCRIPTION",
+}
+
+export type IkasEventSubscriber = {
+  id: string;
+  callback: (event: IkasEvent) => void;
+};
+
+export type IkasEvent = {
+  type: IkasEventType;
+  data: any;
+};

package/src/analytics/facebookPixel.ts

@@ -0,0 +1,226 @@
+import { makeAutoObservable } from "mobx";
+import { IkasCheckout, IkasProduct, IkasOrderLineItem } from "../models";
+import { IkasCart } from "../models/data/cart";
+
+const isServer = typeof window === "undefined";
+
+export class FacebookPixel {
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  static productView(productDetail: IkasProduct) {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq(
+          "track",
+          "ViewContent",
+          productToFBPItem(productDetail)
+        );
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToCart(item: IkasOrderLineItem, quantity: number, eventId: string) {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq(
+          "track",
+          "AddToCart",
+          orderLineItemToFBPItem(item, quantity),
+          { eventID: eventId }
+        );
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static beginCheckout(checkout: IkasCheckout) {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq(
+          "track",
+          "InitiateCheckout",
+          beginCheckoutFBPItem(checkout)
+        );
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static purchase(checkout: IkasCheckout, eventId: string) {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq(
+          "track",
+          "Purchase",
+          beginCheckoutFBPItem(checkout),
+          { eventID: eventId }
+        );
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToWishlist(id: string) {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq("track", "AddToWishlist", {
+          content_ids: [id],
+        });
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static search(searchKeyword: string) {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq("track", "Search", {
+          search_string: searchKeyword,
+        });
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static completeRegistration() {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq("track", "CompleteRegistration", {
+          status: true,
+          value: 0,
+          currency: "TRY",
+        });
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewCart(cart: IkasCart) {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq("track", "ViewCart", viewCartFBPItem(cart));
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewCategory(categoryPath: string) {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq("track", "ViewCategory", {
+          content_name: categoryPath,
+        });
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static contactForm() {
+    try {
+      !isServer &&
+        (window as any).fbq &&
+        (window as any).fbq("track", "ContactForm", {});
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}
+
+function productToFBPItem(product: IkasProduct, quantity = 1) {
+  return {
+    content_name: product.name,
+    content_category:
+      product.categories.length > 0
+        ? product.categories[0].path
+            .map((category) => category.name)
+            .join(" > ")
+        : "",
+    content_ids: [product.selectedVariant.id],
+    content_type: "product",
+    value: product.selectedVariant.price.finalPrice,
+    currency:
+      product.selectedVariant.price.currency === ""
+        ? "TRY"
+        : product.selectedVariant.price.currency,
+  };
+}
+
+function beginCheckoutFBPItem(checkout: IkasCheckout) {
+  const contentIds: string[] = [];
+  const contents: Record<string, any>[] = [];
+  checkout.items.map((item) => {
+    contentIds.push(item.variant.id || "");
+    contents.push({ id: item.variant.id, quantity: item.quantity });
+  });
+  return {
+    contents: contents,
+    content_category: "",
+    content_type: "product_group",
+    content_ids: contentIds,
+    currency: checkout.items[0].currencyCode,
+    value: checkout.totalPrice,
+    num_items: checkout.items.length,
+  };
+}
+
+function viewCartFBPItem(cart: IkasCart) {
+  const contentIds: string[] = [];
+  const contents: Record<string, any>[] = [];
+  cart.items.map((item: IkasOrderLineItem) => {
+    contentIds.push(item.variant.id || "");
+    contents.push({ id: item.variant.id, quantity: item.quantity });
+  });
+  return {
+    contents: contents,
+    content_type: "product_group",
+    content_ids: contentIds,
+    currency: cart.items[0].currencyCode,
+    value: cart.totalPrice,
+    num_items: cart.items.length,
+  };
+}
+
+function orderLineItemToFBPItem(
+  orderLineItem: IkasOrderLineItem,
+  quantity = 1
+) {
+  return {
+    content_name: orderLineItem.variant.name,
+    content_category: "",
+    content_ids: [orderLineItem.variant.id],
+    content_type: "product",
+    value: orderLineItem.finalPrice,
+    currency: orderLineItem.currencyCode,
+  };
+}

package/src/analytics/googleAnalytics.ts

@@ -0,0 +1,227 @@
+import { makeAutoObservable } from "mobx";
+import { IkasCheckout, IkasProduct, IkasOrderLineItem } from "../models";
+import { IkasCart } from "../models/data/cart";
+import { CheckoutStep } from "../components/checkout/model";
+
+const isServer = typeof window === "undefined";
+
+export class GoogleAnalytics {
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  static productView(productDetail: IkasProduct) {
+    try {
+      !isServer &&
+        (window as any).gtag &&
+        (window as any).gtag("event", "view_item", {
+          currency:
+            productDetail.selectedVariant.price.currency === ""
+              ? "TRY"
+              : productDetail.selectedVariant.price.currency,
+          value: productDetail.selectedVariant.price.finalPrice,
+          items: [productToGAItem(productDetail)],
+        });
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToCart(item: IkasProduct | IkasOrderLineItem, quantity: number) {
+    try {
+      !isServer &&
+        (window as any).gtag &&
+        (window as any).gtag("event", "add_to_cart", {
+          currency:
+            item instanceof IkasProduct
+              ? item.selectedVariant.price.currency === ""
+                ? "TRY"
+                : item.selectedVariant.price.currency
+              : item.currencyCode,
+          value:
+            item instanceof IkasProduct
+              ? item.selectedVariant.price.finalPrice
+              : item.finalPrice,
+          items: [
+            item instanceof IkasProduct
+              ? productToGAItem(item, quantity)
+              : orderLineItemToGAItem(item, quantity),
+          ],
+        });
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static removeFromCart(
+    item: IkasProduct | IkasOrderLineItem,
+    quantity: number
+  ) {
+    try {
+      !isServer &&
+        (window as any).gtag &&
+        (window as any).gtag("event", "remove_from_cart", {
+          currency:
+            item instanceof IkasProduct
+              ? item.selectedVariant.price.currency === ""
+                ? "TRY"
+                : item.selectedVariant.price.currency
+              : item.currencyCode,
+          value:
+            item instanceof IkasProduct
+              ? item.selectedVariant.price.finalPrice
+              : item.finalPrice,
+          items: [
+            item instanceof IkasProduct
+              ? productToGAItem(item, quantity)
+              : orderLineItemToGAItem(item, quantity),
+          ],
+        });
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewCart(cart: IkasCart) {
+    try {
+      !isServer &&
+        (window as any).gtag &&
+        (window as any).gtag("event", "view_cart", {
+          currency: cart.currencyCode,
+          value: cart.totalPrice,
+          items: cart.items.map((item) =>
+            orderLineItemToGAItem(item, item.quantity)
+          ),
+        });
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static beginCheckout(checkout: IkasCheckout) {
+    try {
+      !isServer &&
+        (window as any).gtag &&
+        (window as any).gtag("event", "begin_checkout", {
+          currency: checkout.currencyCode,
+          value: checkout.totalFinalPrice,
+          items: checkout.items.map((item) =>
+            orderLineItemToGAItem(item, item.quantity)
+          ),
+        });
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static purchase(checkout: IkasCheckout, orderId: string) {
+    try {
+      !isServer &&
+        (window as any).gtag &&
+        (window as any).gtag("event", "purchase", {
+          transaction_id: orderId,
+          affiliation: window.location.hostname,
+          value: "" + checkout.totalFinalPrice,
+          tax: "" + checkout.totalTax,
+          shipping: "" + checkout.shippingTotal,
+          currency: checkout.currencyCode,
+          coupon: checkout.couponCode,
+          items: checkout.items.map((item) =>
+            orderLineItemToGAItem(item, item.quantity)
+          ),
+        });
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static checkoutStep(checkout: IkasCheckout, step: CheckoutStep) {
+    if (step === CheckoutStep.SHIPPING) {
+      try {
+        !isServer &&
+          (window as any).gtag &&
+          (window as any).gtag("event", "add_shipping_info", {
+            currency: checkout.currencyCode,
+            value: checkout.totalFinalPrice,
+            shipping_tier: "Ground",
+            coupon: checkout.couponCode,
+            items: checkout.items.map((item) =>
+              orderLineItemToGAItem(item, item.quantity)
+            ),
+          });
+        return;
+      } catch (err) {
+        console.error(err);
+      }
+    }
+    if (step === CheckoutStep.PAYMENT) {
+      try {
+        !isServer &&
+          (window as any).gtag &&
+          (window as any).gtag("event", "add_payment_info", {
+            currency: checkout.currencyCode,
+            value: checkout.totalFinalPrice,
+            coupon: checkout.couponCode,
+            payment_type: checkout.selectedPaymentGateway?.paymentMethodType,
+            items: checkout.items.map((item) =>
+              orderLineItemToGAItem(item, item.quantity)
+            ),
+          });
+        return;
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  }
+}
+
+function productToGAItem(product: IkasProduct, quantity = 1) {
+  return {
+    item_name: product.name,
+    item_id: product.selectedVariant.id,
+    price: product.selectedVariant.price.finalPrice,
+    item_brand: product.brand?.name || "",
+    item_category: product.categories.length ? product.categories[0].name : "",
+    item_category_2:
+      product.categories.length > 1 ? product.categories[1].name : "",
+    item_category_3:
+      product.categories.length > 2 ? product.categories[2].name : "",
+    item_category_4:
+      product.categories.length > 3 ? product.categories[3].name : "",
+    item_variant: product.selectedVariant.variantValues
+      .map((vv) => vv.name)
+      .join(" / "),
+    item_list_name: "",
+    item_list_id: "",
+    index: 1,
+    quantity,
+  };
+}
+
+function orderLineItemToGAItem(orderLineItem: IkasOrderLineItem, quantity = 1) {
+  return {
+    item_name: orderLineItem.variant.name,
+    item_id: orderLineItem.variant.id,
+    price: "" + orderLineItem.finalPrice,
+    item_brand: "",
+    item_category: "",
+    item_category_2: "",
+    item_category_3: "",
+    item_category_4: "",
+    item_variant: orderLineItem.variant.variantValues
+      ?.map((vv) => vv.variantValueName)
+      .join(" / "),
+    item_list_name: "",
+    item_list_id: "",
+    index: 1,
+    quantity,
+  };
+}