diff --git a/packages/js/bundle.min.js b/packages/js/bundle.min.js index 6351a13d..c460c75a 100644 --- a/packages/js/bundle.min.js +++ b/packages/js/bundle.min.js @@ -1 +1 @@ -var MatomoTracker=function(t){"use strict";var i=function(){return(i=Object.assign||function(t){for(var e,r=1,a=arguments.length;r('[data-matomo-event="click"]'), ) if (elements.length) { - elements.forEach(element => { + elements.forEach((element) => { element.addEventListener('click', () => { const { matomoCategory, @@ -154,6 +157,79 @@ class MatomoTracker { this.track({ data: [TRACK_TYPES.TRACK_VIEW], ...params }) } + // Adds a product to an Ecommerce order to be tracked via trackEcommerceOrder. + // https://matomo.org/docs/ecommerce-analytics + // https://matomo.org/docs/ecommerce-analytics/#1-addecommerceitemproductsku-productname-productcategory-price-quantity + addEcommerceItem({ + sku, + productName, + productCategory, + productPrice = 0.0, + productQuantity = 1, + }: AddEcommerceItemParams) { + window._paq.push([ + 'addEcommerceItem', + sku, + productName, + productCategory, + productPrice, + productQuantity, + ]) + } + + // Tracks an Ecommerce order containing items added via addEcommerceItem. + // https://matomo.org/docs/ecommerce-analytics/#2-trackecommerceorderorderid-revenue-subtotal-tax-shipping-discount + trackEcommerceOrder({ + orderId, + orderRevenue, + orderSubTotal, + taxAmount, + shippingAmount, + discountOffered = false, + }: TrackEcommerceOrderParams) { + this.track({ + data: [ + TRACK_TYPES.TRACK_ECOMMERCE_ORDER, + orderId, + orderRevenue, + orderSubTotal, + taxAmount, + shippingAmount, + discountOffered, + ], + }) + } + + // Tracks updates to an Ecommerce Cart before an actual purchase. + // This will replace currently tracked information of the cart. Always include all items of the updated cart! + // https://matomo.org/docs/ecommerce-analytics/#example-tracking-an-ecommerce-cart-update-containing-two-products + trackEcommerceCartUpdate(amount: number) { + window._paq.push([TRACK_TYPES.TRACK_ECOMMERCE_CART_UPDATE, amount]) + } + + // Marks the next page view as an Ecommerce product page. + // https://matomo.org/docs/ecommerce-analytics/#example-tracking-a-product-page-view + setEcommerceView({ + sku, + productName, + productCategory, + productPrice, + }: SetEcommerceViewParams) { + window._paq.push([ + 'setEcommerceView', + sku, + productName, + productCategory, + productPrice, + ]) + } + + // Marks the next tracked page view as an Ecommerce category page. + // https://matomo.org/docs/ecommerce-analytics/#example-tracking-a-category-page-view + setEcommerceCategoryView(productCategory: string) { + this.setEcommerceView({ productCategory, productName: false, sku: false }) + } + // Sends the tracked page/view/search to Matomo track({ data = [], diff --git a/packages/js/src/constants.ts b/packages/js/src/constants.ts index 3d3aa9a6..aa5f8c4f 100644 --- a/packages/js/src/constants.ts +++ b/packages/js/src/constants.ts @@ -8,4 +8,6 @@ export const TRACK_TYPES = { TRACK_LINK: 'trackLink', TRACK_SEARCH: 'trackSiteSearch', TRACK_VIEW: 'trackPageView', + TRACK_ECOMMERCE_ORDER: 'trackEcommerceOrder', + TRACK_ECOMMERCE_CART_UPDATE: 'trackEcommerceCartUpdate', } diff --git a/packages/js/src/types.ts b/packages/js/src/types.ts index c50c607a..eacbaa7e 100644 --- a/packages/js/src/types.ts +++ b/packages/js/src/types.ts @@ -35,7 +35,7 @@ export interface TrackEventParams extends TrackPageViewParams { category: string action: string name?: string - value?: number | undefined + value?: number } export interface TrackLinkParams { @@ -48,3 +48,27 @@ export interface TrackSiteSearchParams extends TrackPageViewParams { category?: string count?: number } + +export interface TrackEcommerceOrderParams { + orderId: string + orderRevenue: number + orderSubTotal?: number + taxAmount?: number + shippingAmount?: number + discountOffered?: boolean +} + +export interface AddEcommerceItemParams { + sku: string + productName?: string + productCategory?: string + productPrice?: number + productQuantity?: number +} + +export interface SetEcommerceViewParams { + sku: string | boolean + productName?: string | boolean + productCategory?: string + productPrice?: number +}