Merge pull request #648 from Shopify/add-tracking-events

Add new tracking events

src/components/cart.js

@@ -307,6 +307,7 @@ export default class Cart extends Component {
 
   onCheckout() {
     this._userEvent('openCheckout');
+    this.props.tracker.track('Open cart checkout', {});
     this.checkout.open(this.model.webUrl);
   }
 

src/components/product-set.js

@@ -102,6 +102,7 @@ export default class ProductSet extends Component {
           variantName: variant.title,
           price: variant.priceV2.amount,
           sku: null,
+          isProductSet: true,
         });
       });
     }

src/components/product.js

@@ -455,6 +455,16 @@ export default class Product extends Component {
     };
   }
 
+  /**
+   * get info about product to be sent to tracker
+   * @return {Object}
+   */
+  get productTrackingInfo() {
+    return {
+      id: this.model.id,
+    };
+  }
+
   /**
    * get configuration object for product details modal based on product config and modalProduct config.
    * @return {Object} configuration object.
@@ -599,6 +609,7 @@ export default class Product extends Component {
       }
     } else if (this.options.buttonDestination === 'modal') {
       this.props.setActiveEl(target);
+      this.props.tracker.track('Open modal', this.productTrackingInfo);
       this.openModal();
     } else if (this.options.buttonDestination === 'onlineStore') {
       this.openOnlineStore();

test/unit/cart.js

@@ -14,9 +14,12 @@ let cart;
 describe('Cart class', () => {
   const moneyFormat = '${{amount}}';
   let closeCartSpy;
+  let trackSpy;
 
   beforeEach(() => {
     closeCartSpy = sinon.spy();
+    trackSpy = sinon.spy();
+
     cart = new Cart({
       options: {
         cart: {
@@ -44,12 +47,14 @@ describe('Cart class', () => {
         trackMethod: (fn) => {
           return function () {
             fn(...arguments);
-          }
-        }
+          };
+        },
+        track: trackSpy,
       },
       closeCart: closeCartSpy,
     });
   });
+
   afterEach(() => {
     cart.destroy();
   });
@@ -772,6 +777,37 @@ describe('Cart class', () => {
     });
   });
 
+  describe('onCheckout()', () => {
+    let openCheckoutStub;
+    let userEventStub;
+
+    beforeEach(() => {
+      openCheckoutStub = sinon.stub(cart.checkout, 'open');
+      userEventStub = sinon.stub(cart, '_userEvent');
+      cart.onCheckout();
+    });
+
+    afterEach(() => {
+      openCheckoutStub.restore();
+      userEventStub.restore();
+    });
+
+    it('triggers open checkout user event', () => {
+      assert.calledOnce(userEventStub);
+      assert.calledWith(userEventStub, 'openCheckout');
+    });
+
+    it('tracks open checkout', () => {
+      assert.calledOnce(trackSpy);
+      assert.calledWith(trackSpy, 'Open cart checkout', {});
+    });
+
+    it('open checkout', () => {
+      assert.calledOnce(openCheckoutStub);
+      assert.calledWith(openCheckoutStub, cart.model.webUrl);
+    });
+  });
+
   describe('get cartNote', () => {
     it('returns the note from the cart model', () => {
       const note = 'test cart note';

test/unit/product-set.js

@@ -359,6 +359,7 @@ describe('ProductSet class', () => {
         contents: expectedContentString,
         checkoutPopup: set.config.cart.popup,
         sku: null,
+        isProductSet: true,
       }]);
     });
   });

test/unit/product/product-component.js

@@ -524,6 +524,11 @@ describe('Product Component class', () => {
           assert.calledWith(setActiveElSpy, target);
         });
 
+        it('tracks open modal', () => {
+          assert.calledOnce(trackSpy);
+          assert.calledWith(trackSpy, 'Open modal', product.productTrackingInfo);
+        });
+
         it('opens modal', () => {
           assert.calledOnce(openModalStub);
         });
@@ -2215,6 +2220,7 @@ describe('Product Component class', () => {
 
         beforeEach(() => {
           product.config.product.buttonDestination = 'cart';
+          product.model.id = 'lakjjk3ls3546lslsdkjf==';
           product.model.variants = [
             {
               id: 'Xkdljlejkskskl3Zsike',
@@ -2295,6 +2301,19 @@ describe('Product Component class', () => {
         });
       });
 
+      describe('productTrackingInfo', () => {
+        beforeEach(() => {
+          product.model.id = 'Xkldjfjkej3l4jl3j5ljsodjflll';
+        });
+
+        it('returns a tracking info object with product id', () => {
+          const expectedObject = {
+            id: product.model.id,
+          };
+          assert.deepEqual(product.productTrackingInfo, expectedObject);
+        });
+      });
+
       describe('onlineStore getters', () => {
         let windowStub;
         const expectedQs = '?channel=buy_button&referrer=http%3A%2F%2Ftest.com&variant=12345&';