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

package/src/analytics/googleTagManager.ts

@@ -1,341 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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>
-  );
-};