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

package/src/analytics/googleTagManager.ts

@@ -0,0 +1,341 @@
+import { makeAutoObservable } from "mobx";
+import {
+  IkasCheckout,
+  IkasProduct,
+  IkasOrderLineItem,
+  IkasCategory,
+} from "../models";
+import { CheckoutStep } from "../components/checkout/model";
+import { IkasBaseStore } from "..";
+
+const isServer = typeof window === "undefined";
+
+export class GoogleTagManager {
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  static pageView(url: string) {
+    try {
+      const event = {
+        event: "page-view-GTM",
+        page: url,
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static productView(productDetail: IkasProduct) {
+    try {
+      const event = {
+        event: "view_item-GTM",
+        ecommerce: {
+          items: [productToGTMItem(productDetail)],
+          extraParams: {
+            parent_id: productDetail.id,
+            currency: productDetail.selectedVariant.price.currency,
+            url: `https://${window.location.hostname}${productDetail.href}`,
+            item_image:
+              productDetail.selectedVariant.mainImage?.image?.src || "",
+          },
+        },
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToCart(item: IkasProduct | IkasOrderLineItem, quantity: number) {
+    const store = IkasBaseStore.getInstance();
+    const cart = store.cartStore.cart;
+    try {
+      const event = {
+        event: "add_to_cart-GTM",
+        ecommerce: {
+          items: [
+            item instanceof IkasProduct
+              ? productToGTMItem(item, quantity)
+              : orderLineItemToGTMItem(item, quantity),
+          ],
+          cart: cart,
+        },
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static removeFromCart(
+    item: IkasProduct | IkasOrderLineItem,
+    quantity: number
+  ) {
+    const store = IkasBaseStore.getInstance();
+    const cart = store.cartStore.cart;
+    try {
+      const event = {
+        event: "remove_from_cart-GTM",
+        ecommerce: {
+          items: [
+            item instanceof IkasProduct
+              ? productToGTMItem(item, quantity)
+              : orderLineItemToGTMItem(item, quantity),
+          ],
+          cart: cart?.itemCount === 0 ? null : cart,
+        },
+      };
+
+      //@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-GTM",
+        ecommerce: {
+          items: checkout.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-GTM",
+        ecommerce: {
+          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) =>
+              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-GTM";
+    else if (step === CheckoutStep.SHIPPING)
+      eventName = "checkout_shipping-GTM";
+    else if (step === CheckoutStep.PAYMENT) eventName = "checkout_payment-GTM";
+    else if (step === CheckoutStep.SUCCESS) eventName = "checkout_success-GTM";
+
+    try {
+      const event = {
+        event: eventName,
+        ecommerce: {
+          items: checkout.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-GTM",
+      };
+
+      //@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-GTM",
+        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-GTM",
+        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-GTM",
+        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-GTM",
+        email,
+      };
+
+      //@ts-ignore
+      !isServer && window.dataLayer && window.dataLayer.push(event);
+
+      return event;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}
+
+function productToGTMItem(productDetail: IkasProduct, quantity = 1) {
+  return {
+    item_name: productDetail.name,
+    item_id: productDetail.selectedVariant.id,
+    price: productDetail.selectedVariant.price.finalPrice,
+    item_brand: productDetail.brand?.name || "",
+    item_category: productDetail.categories.length
+      ? productDetail.categories[0].name
+      : "",
+    item_category_2:
+      productDetail.categories.length > 1
+        ? productDetail.categories[1].name
+        : "",
+    item_category_3:
+      productDetail.categories.length > 2
+        ? productDetail.categories[2].name
+        : "",
+    item_category_4:
+      productDetail.categories.length > 3
+        ? productDetail.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/googleUniversal.ts

@@ -0,0 +1,136 @@
+import { makeAutoObservable } from "mobx";
+import { IkasCheckout, IkasProduct, IkasOrderLineItem } from "../models";
+
+const isServer = typeof window === "undefined";
+
+export class GoogleUniversal {
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  static productView(productDetail: IkasProduct) {
+    try {
+      if (!isServer && (window as any).ga) {
+        (window as any).ga("ec:addProduct", productToGUItem(productDetail));
+        (window as any).ga("ec:setAction", "detail");
+        (window as any).ga("send", "pageview");
+      }
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToCart(item: IkasProduct | IkasOrderLineItem, quantity: number) {
+    try {
+      if (!isServer && (window as any).ga) {
+        (window as any).ga(
+          "ec:addProduct",
+          item instanceof IkasProduct
+            ? productToGUItemCart(item, quantity)
+            : orderLineItemToGUItemCart(item, quantity)
+        );
+        (window as any).ga("ec:setAction", "add");
+        (window as any).ga("send", "event", "UX", "click", "add to cart");
+      }
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static removeFromCart(
+    item: IkasProduct | IkasOrderLineItem,
+    quantity: number
+  ) {
+    try {
+      if (!isServer && (window as any).ga) {
+        (window as any).ga(
+          "ec:addProduct",
+          item instanceof IkasProduct
+            ? productToGUItemCart(item, quantity)
+            : orderLineItemToGUItemCart(item, quantity)
+        );
+        (window as any).ga("ec:setAction", "remove");
+        (window as any).ga("send", "event", "UX", "click", "add to cart");
+      }
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static purchase(checkout: IkasCheckout, orderId: string) {
+    try {
+      if (!isServer && (window as any).ga) {
+        (window as any).ga("set", "currencyCode", checkout.currencyCode);
+
+        checkout.items.map((item) =>
+          (window as any).ga(
+            "ec:addProduct",
+            orderLineItemToGUItemCart(item, item.quantity)
+          )
+        );
+        (window as any).ga("ec:setAction", "purchase", {
+          id: orderId,
+          affiliation: window.location.hostname,
+          revenue: "" + checkout.totalFinalPrice,
+          tax: "" + checkout.totalTax,
+          shipping: "" + checkout.shippingTotal,
+          coupon: checkout.couponCode,
+        });
+        (window as any).ga("send", "pageview");
+      }
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}
+
+function productToGUItem(productDetail: IkasProduct, quantity = 1) {
+  return {
+    id: productDetail.selectedVariant.id,
+    name: productDetail.name,
+    brand: productDetail.brand?.name || "",
+    category: productDetail.categories
+      .map((category) => category.name)
+      .join(" / "),
+    variant: productDetail.selectedVariant.variantValues
+      .map((vv) => vv.name)
+      .join(" / "),
+  };
+}
+
+function productToGUItemCart(productDetail: IkasProduct, quantity = 1) {
+  return {
+    id: productDetail.selectedVariant.id,
+    name: productDetail.name,
+    brand: productDetail.brand?.name || "",
+    category: productDetail.categories
+      .map((category) => category.name)
+      .join(" / "),
+    variant: productDetail.selectedVariant.variantValues
+      .map((vv) => vv.name)
+      .join(" / "),
+    price: productDetail.selectedVariant.price.finalPrice,
+    quantity,
+  };
+}
+
+function orderLineItemToGUItemCart(
+  orderLineItem: IkasOrderLineItem,
+  quantity = 1
+) {
+  return {
+    name: orderLineItem.variant.name,
+    id: orderLineItem.variant.id,
+    price: "" + orderLineItem.finalPrice,
+    brand: "",
+    category: "",
+    variant: orderLineItem.variant.variantValues
+      ?.map((vv) => vv.variantValueName)
+      .join(" / "),
+    quantity,
+  };
+}

package/src/analytics/head/index.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import parse from "html-react-parser";
+import { getIkasEventsScript } from "../events";
+import { observer } from "mobx-react-lite";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+
+type HeadProps = {
+  blockHTML?: boolean;
+};
+
+export const AnalyticsHead: React.FC<HeadProps> = observer(({ blockHTML }) => {
+  const gtmId = IkasStorefrontConfig.getGtmId();
+  const fbpId = IkasStorefrontConfig.getFbpId();
+  const storefrontJSScripts = IkasStorefrontConfig.getStorefrontJSScripts();
+  const analytics4Id = IkasStorefrontConfig.getAnalytics4Id();
+  const universalAnalyticsId = IkasStorefrontConfig.getUniversalAnalyticsId();
+  const tiktokPixelId = IkasStorefrontConfig.getTiktokPixelId();
+  const isEditor = IkasStorefrontConfig.getIsEditor();
+
+  return (
+    <React.Fragment>
+      {blockHTML && !isEditor && (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: "dataLayer = [{'gtm.blocklist': ['html']}];",
+          }}
+        />
+      )}
+      {gtmId && !isEditor && (
+        <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 && !isEditor && (
+        <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');`,
+          }}
+        />
+      )}
+      {analytics4Id && !isEditor && (
+        <>
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${analytics4Id}`}
+          ></script>
+          <script
+            defer
+            dangerouslySetInnerHTML={{
+              __html: `window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${analytics4Id}');`,
+            }}
+          />
+        </>
+      )}
+      {universalAnalyticsId && !isEditor && (
+        <>
+          <script
+            defer
+            dangerouslySetInnerHTML={{
+              __html: `window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+              ga('create', '${universalAnalyticsId}', 'auto');
+              ga('require', 'ec');
+              ga('send', 'pageview');`,
+            }}
+          />
+          <script
+            async
+            src="https://www.google-analytics.com/analytics.js"
+          ></script>
+        </>
+      )}
+      {tiktokPixelId && !isEditor && (
+        <script
+          defer
+          dangerouslySetInnerHTML={{
+            __html: `!function (w, d, t) {
+              w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
+              ttq.load('${tiktokPixelId}');
+              ttq.page();
+            }(window, document, 'ttq');`,
+          }}
+        />
+      )}
+      {parse(getIkasEventsScript())}
+      {storefrontJSScripts.map((script) => parse(script))}
+    </React.Fragment>
+  );
+});
+
+export const AnalyticsBody: React.FC = () => {
+  const gtmId = IkasStorefrontConfig.getGtmId();
+  const fbpId = IkasStorefrontConfig.getFbpId();
+  const isEditor = IkasStorefrontConfig.getIsEditor();
+
+  return (
+    <React.Fragment>
+      {gtmId && !isEditor && (
+        <noscript
+          dangerouslySetInnerHTML={{
+            __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${gtmId}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+          }}
+        />
+      )}
+
+      {fbpId && !isEditor && (
+        <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>
+  );
+};