@gem-sdk/core 1.0.0 → 1.0.4

package/dist/cjs/contexts/ShopContext.js

@@ -20,10 +20,10 @@ const createShopStoreProvider = (data) => create.createStore((set) => ({
         set({ swatches });
     },
     changeStorefrontInfo: ({ url, token }) => {
-        set((prev) => ({
-            storefrontUrl: url ?? prev.storefrontUrl,
-            storefrontToken: token ?? prev.storefrontToken,
-        }));
+        set({
+            storefrontUrl: url,
+            storefrontToken: token,
+        });
     },
 }));
 const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps }) => {

package/dist/cjs/helpers/tracking/gtag.js

@@ -0,0 +1,94 @@
+'use strict';
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+const pageview = (url, trackingId) => {
+    // GA 4
+    if (window.gtag && trackingId) {
+        window.gtag('config', trackingId, {
+            page_path: url,
+        });
+    }
+    // GA 3
+    if (window.ga) {
+        window.ga('send', 'pageview', url);
+    }
+};
+/** Addition to cart events
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
+ */
+const addToCart = (product) => {
+    // GA 3
+    if (!window.ga || !product) {
+        return;
+    }
+    window.ga('ec:addProduct', { ...product, id: product.sku });
+    window.ga('ec:setAction', 'add');
+    window.ga('send', 'event', {
+        eventCategory: 'EnhancedEcommerce',
+        eventAction: 'Added Product',
+        nonInteraction: true,
+    });
+};
+/** Product clicked event
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#product-click
+ */
+const productClick = (product) => {
+    if (!window.ga) {
+        return;
+    }
+    ga('ec:addProduct', {
+        id: product.id,
+        name: product.name,
+        category: product.category,
+        brand: product.brand,
+        variant: product.variant,
+    });
+    ga('ec:setAction', 'click');
+    ga('send', 'event', {
+        eventAction: 'Click',
+        eventCategory: 'Product',
+    });
+};
+/** Product viewed event
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-actvities
+ */
+const productDetail = (product) => {
+    if (!product || !window.ga)
+        return;
+    ga('ec:addProduct', {
+        brand: product.brand,
+        category: product.category,
+        id: product.id,
+        name: product.name,
+        variant: product.variant,
+    });
+    ga('ec:setAction', 'detail');
+    ga('send', 'event', {
+        eventAction: 'Detail',
+        eventCategory: 'Ecommerce',
+        nonInteraction: 1,
+    });
+};
+/** Removal from cart events
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
+ */
+const removeFromCart = (product, price) => {
+    if (!product || !window.ga)
+        return;
+    ga('ec:addProduct', {
+        id: product.id,
+        name: product.name,
+        price,
+    });
+    ga('ec:setAction', 'remove');
+    ga('send', 'event', {
+        eventAction: 'Click',
+        eventCategory: 'Remove from cart',
+    });
+};
+
+exports.addToCart = addToCart;
+exports.pageview = pageview;
+exports.productClick = productClick;
+exports.productDetail = productDetail;
+exports.removeFromCart = removeFromCart;

package/dist/cjs/index.js

@@ -43,9 +43,9 @@ var colors = require('./helpers/colors.js');
 var typography = require('./helpers/typography.js');
 var radius = require('./helpers/radius.js');
 var product = require('./helpers/product.js');
-var fpixel = require('./helpers/fpixel.js');
-var gtag = require('./helpers/gtag.js');
-var tiktokpixel = require('./helpers/tiktokpixel.js');
+var fpixel = require('./helpers/tracking/fpixel.js');
+var gtag = require('./helpers/tracking/gtag.js');
+var tiktokpixel = require('./helpers/tracking/tiktokpixel.js');
 var useAddToCart = require('./hooks/cart/use-add-to-cart.js');
 var useCartData = require('./hooks/cart/use-cart-data.js');
 var useCartDiscountCodesUpdate = require('./hooks/cart/use-cart-discount-codes-update.js');

package/dist/esm/contexts/ShopContext.js

@@ -18,10 +18,10 @@ const createShopStoreProvider = (data) => createStore((set) => ({
         set({ swatches });
     },
     changeStorefrontInfo: ({ url, token }) => {
-        set((prev) => ({
-            storefrontUrl: url ?? prev.storefrontUrl,
-            storefrontToken: token ?? prev.storefrontToken,
-        }));
+        set({
+            storefrontUrl: url,
+            storefrontToken: token,
+        });
     },
 }));
 const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps }) => {

package/dist/esm/helpers/tracking/gtag.js

@@ -0,0 +1,88 @@
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+const pageview = (url, trackingId) => {
+    // GA 4
+    if (window.gtag && trackingId) {
+        window.gtag('config', trackingId, {
+            page_path: url,
+        });
+    }
+    // GA 3
+    if (window.ga) {
+        window.ga('send', 'pageview', url);
+    }
+};
+/** Addition to cart events
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
+ */
+const addToCart = (product) => {
+    // GA 3
+    if (!window.ga || !product) {
+        return;
+    }
+    window.ga('ec:addProduct', { ...product, id: product.sku });
+    window.ga('ec:setAction', 'add');
+    window.ga('send', 'event', {
+        eventCategory: 'EnhancedEcommerce',
+        eventAction: 'Added Product',
+        nonInteraction: true,
+    });
+};
+/** Product clicked event
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#product-click
+ */
+const productClick = (product) => {
+    if (!window.ga) {
+        return;
+    }
+    ga('ec:addProduct', {
+        id: product.id,
+        name: product.name,
+        category: product.category,
+        brand: product.brand,
+        variant: product.variant,
+    });
+    ga('ec:setAction', 'click');
+    ga('send', 'event', {
+        eventAction: 'Click',
+        eventCategory: 'Product',
+    });
+};
+/** Product viewed event
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-actvities
+ */
+const productDetail = (product) => {
+    if (!product || !window.ga)
+        return;
+    ga('ec:addProduct', {
+        brand: product.brand,
+        category: product.category,
+        id: product.id,
+        name: product.name,
+        variant: product.variant,
+    });
+    ga('ec:setAction', 'detail');
+    ga('send', 'event', {
+        eventAction: 'Detail',
+        eventCategory: 'Ecommerce',
+        nonInteraction: 1,
+    });
+};
+/** Removal from cart events
+ * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
+ */
+const removeFromCart = (product, price) => {
+    if (!product || !window.ga)
+        return;
+    ga('ec:addProduct', {
+        id: product.id,
+        name: product.name,
+        price,
+    });
+    ga('ec:setAction', 'remove');
+    ga('send', 'event', {
+        eventAction: 'Click',
+        eventCategory: 'Remove from cart',
+    });
+};
+
+export { addToCart, pageview, productClick, productDetail, removeFromCart };

package/dist/esm/index.js

@@ -41,11 +41,11 @@ export { getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveCla
 export { genTypoClass } from './helpers/typography.js';
 export { composeRadius, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { getSelectedVariant, parseSelectedOption } from './helpers/product.js';
-import * as fpixel from './helpers/fpixel.js';
+import * as fpixel from './helpers/tracking/fpixel.js';
 export { fpixel };
-import * as gtag from './helpers/gtag.js';
+import * as gtag from './helpers/tracking/gtag.js';
 export { gtag };
-import * as tiktokpixel from './helpers/tiktokpixel.js';
+import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
 export { useAddToCart } from './hooks/cart/use-add-to-cart.js';
 export { useCartData } from './hooks/cart/use-cart-data.js';