@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/analytics/facebookPixel.ts

@@ -0,0 +1,226 @@
+import { makeAutoObservable } from "mobx";
+import { IkasProductDetail, IkasOrderLineItem, IkasCheckout } from "../models";
+import { IkasCart } from "../models/data/cart";
+
+const isServer = typeof window === "undefined";
+
+export class FacebookPixel {
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  static productView(productDetail: IkasProductDetail) {
+    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(productDetail: IkasProductDetail, quantity = 1) {
+  return {
+    content_name: productDetail.product.name,
+    content_category:
+      productDetail.product.categories.length > 0
+        ? productDetail.product.categories[0].path
+            .map((category) => category.name)
+            .join(" > ")
+        : "",
+    content_ids: [productDetail.selectedVariant.id],
+    content_type: "product",
+    value: productDetail.selectedVariant.price.finalPrice,
+    currency:
+      productDetail.selectedVariant.price.currency === ""
+        ? "TRY"
+        : productDetail.selectedVariant.price.currency,
+  };
+}
+
+function beginCheckoutFBPItem(checkout: IkasCheckout) {
+  const contentIds: string[] = [];
+  const contents: Record<string, any>[] = [];
+  checkout.cart?.items.map((item) => {
+    contentIds.push(item.id);
+    contents.push({ id: item.id, quantity: item.quantity });
+  });
+  return {
+    contents: contents,
+    content_category: "",
+    content_type: "product_group",
+    content_ids: contentIds,
+    currency: checkout.cart?.items[0].currencyCode,
+    value: checkout.cart?.totalPrice,
+    num_items: checkout.cart?.items.length,
+  };
+}
+
+function viewCartFBPItem(cart: IkasCart) {
+  const contentIds: string[] = [];
+  const contents: Record<string, any>[] = [];
+  cart.items.map((item: IkasOrderLineItem) => {
+    contentIds.push(item.id);
+    contents.push({ id: item.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/googleTagManager.ts

@@ -0,0 +1,334 @@
+import { makeAutoObservable } from "mobx";
+import {
+  IkasProductDetail,
+  IkasOrderLineItem,
+  IkasCheckout,
+  IkasCategory,
+} from "../models";
+import { CheckoutStep } from "../components/checkout/model";
+const isServer = typeof window === "undefined";
+
+export class GoogleTagManager {
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  static pageView(url: string) {
+    try {
+      const event = {
+        event: "page-view",
+        page: url,
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static productView(productDetail: IkasProductDetail) {
+    try {
+      const event = {
+        event: "view_item",
+        ecommerce: {
+          items: [productToGTMItem(productDetail)],
+          extraParams: {
+            parent_id: productDetail.product.id,
+            currency: productDetail.selectedVariant.price.currency,
+            url: `https://${window.location.hostname}${productDetail.href}`,
+            item_image: productDetail.selectedVariant.mainImage?.src || "",
+          },
+        },
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToCart(
+    item: IkasProductDetail | IkasOrderLineItem,
+    quantity: number
+  ) {
+    try {
+      const event = {
+        event: "add_to_cart",
+        ecommerce: {
+          items: [
+            item instanceof IkasProductDetail
+              ? productToGTMItem(item, quantity)
+              : orderLineItemToGTMItem(item, quantity),
+          ],
+        },
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static removeFromCart(
+    item: IkasProductDetail | IkasOrderLineItem,
+    quantity: number
+  ) {
+    try {
+      const event = {
+        event: "remove_from_cart",
+        ecommerce: {
+          items: [
+            item instanceof IkasProductDetail
+              ? productToGTMItem(item, quantity)
+              : orderLineItemToGTMItem(item, quantity),
+          ],
+        },
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static beginCheckout(checkout: IkasCheckout) {
+    try {
+      const event = {
+        event: "begin_checkout",
+        ecommerce: {
+          items: checkout.cart?.items.map((item) =>
+            orderLineItemToGTMItem(item, item.quantity)
+          ),
+        },
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static purchase(checkout: IkasCheckout, orderId: string) {
+    try {
+      const event = {
+        event: "purchase",
+        ecommerce: {
+          purchase: {
+            transaction_id: orderId,
+            affiliation: window.location.hostname,
+            value: "" + checkout.totalFinalPrice,
+            tax: "" + checkout.cart?.totalTax,
+            shipping: "" + checkout.shippingTotal,
+            currency: checkout.cart?.currencyCode,
+            coupon: checkout.couponCode,
+            items: checkout.cart?.items.map((item) =>
+              orderLineItemToGTMItem(item, item.quantity)
+            ),
+          },
+        },
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static checkoutStep(checkout: IkasCheckout, step: CheckoutStep) {
+    let eventName = "";
+    if (step === CheckoutStep.INFO) eventName = "checkout_info";
+    else if (step === CheckoutStep.SHIPPING) eventName = "checkout_shipping";
+    else if (step === CheckoutStep.PAYMENT) eventName = "checkout_payment";
+    else if (step === CheckoutStep.SUCCESS) eventName = "checkout_success";
+
+    try {
+      const event = {
+        event: eventName,
+        ecommerce: {
+          items: checkout.cart?.items.map((item) =>
+            orderLineItemToGTMItem(item, item.quantity)
+          ),
+        },
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static disableHTML() {
+    try {
+      const data = {
+        "gtm.blocklist": [
+          "html",
+          "customScripts",
+          "customPixels",
+          "nonGoogleScripts",
+        ],
+      };
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(data);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static completeRegistration() {
+    try {
+      const event = {
+        event: "customer_register",
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static search(searchKeyword: string) {
+    try {
+      const event = {
+        event: "search",
+        search_string: searchKeyword,
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewCategory(category: IkasCategory, categoryPath: string) {
+    try {
+      const event = {
+        event: "view_category",
+        ecommerce: {
+          category: [
+            {
+              id: category.id,
+              name: category.name,
+              metaData: category.metaData,
+              href: category.href,
+              image: category.image,
+              path: categoryPath,
+            },
+          ],
+        },
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static customerLogin(email: string) {
+    try {
+      const event = {
+        event: "customer_login",
+        email,
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static customerVisit(email: string) {
+    try {
+      const event = {
+        event: "customer_visit",
+        email,
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}
+
+function productToGTMItem(productDetail: IkasProductDetail, quantity = 1) {
+  return {
+    item_name: productDetail.product.name,
+    item_id: productDetail.selectedVariant.id,
+    price: productDetail.selectedVariant.price.finalPrice,
+    item_brand: productDetail.product.brand?.name || "",
+    item_category: productDetail.product.categories.length
+      ? productDetail.product.categories[0].name
+      : "",
+    item_category_2:
+      productDetail.product.categories.length > 1
+        ? productDetail.product.categories[1].name
+        : "",
+    item_category_3:
+      productDetail.product.categories.length > 2
+        ? productDetail.product.categories[2].name
+        : "",
+    item_category_4:
+      productDetail.product.categories.length > 3
+        ? productDetail.product.categories[3].name
+        : "",
+    item_variant: productDetail.selectedVariant.variantValues
+      .map((vv) => vv.name)
+      .join(" / "),
+    item_list_name: "",
+    item_list_id: "",
+    index: 1,
+    quantity,
+  };
+}
+
+function orderLineItemToGTMItem(
+  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,
+  };
+}

package/src/analytics/head/index.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { IkasStorefrontConfig } from "../../storefront";
+import parse from "html-react-parser";
+import { getIkasEventsScript } from "../events";
+
+type HeadProps = {
+  blockHTML?: boolean;
+};
+
+export const AnalyticsHead: React.FC<HeadProps> = ({ blockHTML }) => {
+  const { gtmId, fbpId, storefrontJSScripts } = IkasStorefrontConfig;
+
+  return (
+    <React.Fragment>
+      {blockHTML && (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: "dataLayer = [{'gtm.blocklist': ['html']}];",
+          }}
+        />
+      )}
+      {gtmId && (
+        <script
+          defer
+          dangerouslySetInnerHTML={{
+            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer','${gtmId}');`,
+          }}
+        />
+      )}
+      {fbpId && (
+        <script
+          defer
+          dangerouslySetInnerHTML={{
+            __html: `!function(f,b,e,v,n,t,s)
+          {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+          n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+          if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+          n.queue=[];t=b.createElement(e);t.async=!0;
+          t.src=v;s=b.getElementsByTagName(e)[0];
+          s.parentNode.insertBefore(t,s)}(window, document,'script',
+          'https://connect.facebook.net/en_US/fbevents.js');
+          fbq('init', '${fbpId}');
+          fbq('track', 'PageView');`,
+          }}
+        />
+      )}
+      {parse(getIkasEventsScript())}
+      {storefrontJSScripts.map((script) => parse(script))}
+    </React.Fragment>
+  );
+};
+
+export const AnalyticsBody: React.FC = () => {
+  const gtmId = IkasStorefrontConfig.gtmId;
+  const fbpId = IkasStorefrontConfig.fbpId;
+
+  return (
+    <React.Fragment>
+      {gtmId && (
+        <noscript
+          dangerouslySetInnerHTML={{
+            __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${gtmId}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+          }}
+        />
+      )}
+
+      {fbpId && (
+        <noscript
+          dangerouslySetInnerHTML={{
+            __html: `<img height="1" width="1" style="display:none" 
+        src="https://www.facebook.com/tr?id=${fbpId}&ev=PageView&noscript=1"/>`,
+          }}
+        />
+      )}
+    </React.Fragment>
+  );
+};