Merge pull request #136 from austauschkompass/feature/ecommerce

add ecommerce tracking
jonkoops · May 8, 2020 · 5ae777a · 5ae777a
2 parents 57867b7 + 0d51406
commit 5ae777a
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 3 deletions.
diff --git a/packages/js/bundle.min.js b/packages/js/bundle.min.js
diff --git a/packages/js/src/MatomoTracker.ts b/packages/js/src/MatomoTracker.ts
@@ -6,6 +6,9 @@ import {
   TrackPageViewParams,
   TrackParams,
   TrackSiteSearchParams,
+  TrackEcommerceOrderParams,
+  AddEcommerceItemParams,
+  SetEcommerceViewParams,
   UserOptions,
 } from './types'
 
@@ -80,7 +83,7 @@ class MatomoTracker {
       document.querySelectorAll<HTMLElement>('[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
@@ -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
@@ -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
+}