Merge branch 'main' into shoppingJSONValidation

ampproject · Apr 4, 2022 · 4227e69 · 4227e69
2 parents 85151a8 + a61e479
commit 4227e69
Show file tree

Hide file tree

Showing 13 changed files with 211 additions and 5 deletions.
diff --git a/build-system/test-configs/dep-check-config.js b/build-system/test-configs/dep-check-config.js
@@ -246,6 +246,10 @@ exports.rules = [
       'extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js->extensions/amp-story/1.0/utils.js',
       'extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js->extensions/amp-story/1.0/amp-story-store-service.js',
+      'extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js->extensions/amp-story/1.0/variable-service.js',
+      'extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js->extensions/amp-story/1.0/story-analytics.js',
+      'extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js->extensions/amp-story/1.0/variable-service.js',
+      'extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js->extensions/amp-story/1.0/story-analytics.js',
 
       // Interactive components that depend on story functionality.
       'extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js->extensions/amp-story/1.0/amp-story-store-service.js',

diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html
@@ -7,6 +7,7 @@
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-story-auto-analytics" src="https://cdn.ampproject.org/v0/amp-story-auto-analytics-0.1.js"></script>
     <script async custom-element="amp-story-shopping" src="https://cdn.ampproject.org/v0/amp-story-shopping-0.1.js"></script>
     <style amp-custom>
       [data-product-id="lamp"] {
@@ -28,6 +29,7 @@
     </style>
   </head>
   <body>
+    <amp-story-auto-analytics gtag-id="UA-174115079-1"></amp-story-auto-analytics>
     <amp-story
         standalone
         title="Story Shopping Component"

diff --git a/examples/visual-tests/amp-story/amp-story-shopping-landscape.html b/examples/visual-tests/amp-story/amp-story-shopping-landscape.html
@@ -7,6 +7,7 @@
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-story-auto-analytics" src="https://cdn.ampproject.org/v0/amp-story-auto-analytics-0.1.js"></script>
     <script async custom-element="amp-story-shopping" src="https://cdn.ampproject.org/v0/amp-story-shopping-0.1.js"></script>
     <style amp-custom>
       [data-product-id="lamp"] {
@@ -28,6 +29,7 @@
     </style>
   </head>
   <body>
+    <amp-story-auto-analytics gtag-id="UA-174115079-1"></amp-story-auto-analytics>
     <amp-story
         standalone
         title="Story Shopping Component"

diff --git a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html
@@ -7,6 +7,7 @@
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-story-auto-analytics" src="https://cdn.ampproject.org/v0/amp-story-auto-analytics-0.1.js"></script>
     <script async custom-element="amp-story-shopping" src="https://cdn.ampproject.org/v0/amp-story-shopping-0.1.js"></script>
     <style amp-custom>
       [data-product-id="lamp"] {
@@ -28,6 +29,7 @@
     </style>
   </head>
   <body>
+    <amp-story-auto-analytics gtag-id="UA-174115079-1"></amp-story-auto-analytics>
     <amp-story
         standalone
         title="Story Shopping Component"

diff --git a/examples/visual-tests/amp-story/amp-story-shopping-rtl.html b/examples/visual-tests/amp-story/amp-story-shopping-rtl.html
@@ -7,6 +7,7 @@
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-story-auto-analytics" src="https://cdn.ampproject.org/v0/amp-story-auto-analytics-0.1.js"></script>
     <script async custom-element="amp-story-shopping" src="https://cdn.ampproject.org/v0/amp-story-shopping-0.1.js"></script>
     <style amp-custom>
       [data-product-id="lamp"] {
@@ -28,6 +29,7 @@
     </style>
   </head>
   <body>
+    <amp-story-auto-analytics gtag-id="UA-174115079-1"></amp-story-auto-analytics>
     <amp-story
         standalone
         title="Story Shopping Component"

diff --git a/extensions/amp-story-auto-analytics/0.1/auto-analytics-configs.js b/extensions/amp-story-auto-analytics/0.1/auto-analytics-configs.js
@@ -70,5 +70,45 @@ export const buildGtagConfig = (gtagId) => ({
         'repeat': false,
       },
     },
+    'storyShoppingTagClick': {
+      'on': 'story-shopping-tag-click',
+      'vars': {
+        'event_name': 'custom',
+        'event_action': 'story_shopping_tag_click',
+        'event_category': '${title}',
+        'event_label': '${storyShoppingProductId}',
+        'send_to': [gtagId],
+      },
+    },
+    'storyShoppingPLPView': {
+      'on': 'story-shopping-plp-view',
+      'vars': {
+        'event_name': 'custom',
+        'event_action': 'story_shopping_plp_view',
+        'event_category': '${title}',
+        'event_label': '${storyPageId}',
+        'send_to': [gtagId],
+      },
+    },
+    'storyShoppingPDPView': {
+      'on': 'story-shopping-pdp-view',
+      'vars': {
+        'event_name': 'custom',
+        'event_action': 'story_shopping_pdp_view',
+        'event_category': '${title}',
+        'event_label': '${storyShoppingProductId}',
+        'send_to': [gtagId],
+      },
+    },
+    'storyShoppingBuyNowClick': {
+      'on': 'story-shopping-buy-now-click',
+      'vars': {
+        'event_name': 'custom',
+        'event_action': 'story_shopping_buy_now_click',
+        'event_category': '${title}',
+        'event_label': '${storyShoppingProductId}',
+        'send_to': [gtagId],
+      },
+    },
   },
 });
diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js
@@ -19,6 +19,8 @@ import {
   ShoppingConfigDataDef,
   StateProperty,
 } from '../../amp-story/1.0/amp-story-store-service';
+import {StoryAnalyticsEvent} from '../../amp-story/1.0/story-analytics';
+import {AnalyticsVariable} from '../../amp-story/1.0/variable-service';
 
 /** @const {!Array<!Object>} fontFaces */
 const FONTS_TO_LOAD = [
@@ -59,6 +61,12 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
 
     /** @private {!Map<string, Element>} */
     this.builtTemplates_ = {};
+
+    /** @private @const {!./story-analytics.StoryAnalyticsService} */
+    this.analyticsService_ = Services.storyAnalyticsService(this.win);
+
+    /** @private @const {!./story-analytics.StoryAnalyticsService} */
+    this.variableService_ = Services.storyVariableService(this.win);
   }
 
   /** @override */
@@ -119,15 +127,18 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
 
   /**
    * Triggers template update if opening without active product data.
-   * This happens when the "Shop Now" CTA is clicked.
+   * This happens either when the "Shop Now" CTA is clicked or when a
+   * shopping tag is clicked.
    * @param {boolean} isOpen
    * @private
    */
   onAttachmentStateUpdate_(isOpen) {
     if (!this.isOnActivePage_() || !isOpen) {
       return;
     }
+
     const shoppingData = this.storeService_.get(StateProperty.SHOPPING_DATA);
+
     if (!shoppingData.activeProductData) {
       this.updateTemplate_(shoppingData);
     }
@@ -216,6 +227,21 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
       this.builtTemplates_[templateId] = template;
       this.mutateElement(() => this.templateContainer_.appendChild(template));
     }
+
+    // PDP view that calls the analytics service sending the product id.
+    if (productForPdp) {
+      this.variableService_.onVariableUpdate(
+        AnalyticsVariable.STORY_SHOPPING_PRODUCT_ID,
+        productForPdp.productId
+      );
+    }
+
+    // Triggers an analytics event for the PDP or PLP depending on if there is an active product.
+    this.analyticsService_.triggerEvent(
+      productForPdp
+        ? StoryAnalyticsEvent.SHOPPING_PDP_VIEW
+        : StoryAnalyticsEvent.SHOPPING_PLP_VIEW
+    );
   }
 
   /**
@@ -305,6 +331,18 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
     });
   }
 
+  /**
+   * onclick event that fires when buy now is clicked,
+   * sends an analytics event containing product id.
+   * @return {boolean}
+   * @private
+   */
+  onClickBuyNow_() {
+    this.analyticsService_.triggerEvent(
+      StoryAnalyticsEvent.SHOPPING_BUY_NOW_CLICK
+    );
+  }
+
   /**
    * @param {!ShoppingConfigDataDef} activeProductData
    * @return {Element}
@@ -367,6 +405,7 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
               this.element
             )}
             target="_top"
+            onClick={() => this.onClickBuyNow_()}
             i-amphtml-i18n-text-content={
               LocalizedStringId_Enum.AMP_STORY_SHOPPING_ATTACHMENT_CTA_LABEL
             }

diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
@@ -18,7 +18,9 @@ import {
   ShoppingDataDef,
   StateProperty,
 } from '../../amp-story/1.0/amp-story-store-service';
+import {StoryAnalyticsEvent} from '../../amp-story/1.0/story-analytics';
 import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
+import {AnalyticsVariable} from '../../amp-story/1.0/variable-service';
 
 /** @const {!Array<!Object>} fontFaces */
 const FONTS_TO_LOAD = [
@@ -58,6 +60,12 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
     this.shoppingTagEl_ = null;
     /** @private {?Element} */
     this.pageEl_ = null;
+
+    /** @private @const {!./story-analytics.StoryAnalyticsService} */
+    this.analyticsService_ = Services.storyAnalyticsService(this.win);
+
+    /** @private @const {!./story-analytics.StoryAnalyticsService} */
+    this.variableService_ = Services.storyVariableService(this.win);
   }
 
   /** @override */
@@ -161,6 +169,13 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
     this.storeService_.dispatch(Action.ADD_SHOPPING_DATA, {
       'activeProductData': this.tagData_,
     });
+
+    this.variableService_.onVariableUpdate(
+      AnalyticsVariable.STORY_SHOPPING_PRODUCT_ID,
+      this.tagData_.productId
+    );
+
+    this.analyticsService_.triggerEvent(StoryAnalyticsEvent.SHOPPING_TAG_CLICK);
   }
 
   /** @override */

diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js
@@ -12,8 +12,10 @@ import {
   StateProperty,
   getStoreService,
 } from '../../../amp-story/1.0/amp-story-store-service';
-import {StoryAnalyticsService} from '../../../amp-story/1.0/story-analytics';
-
+import {
+  StoryAnalyticsEvent,
+  getAnalyticsService,
+} from '../../../amp-story/1.0/story-analytics';
 describes.realWin(
   'amp-story-shopping-attachment-v0.1',
   {
@@ -33,6 +35,7 @@ describes.realWin(
     let storeService;
     let attachmentChildEl;
     let attachmentChildImpl;
+    let analytics;
 
     const shoppingData = {
       items: [
@@ -96,7 +99,7 @@ describes.realWin(
         return storeService;
       });
       env.sandbox.stub(win.history, 'replaceState');
-      const analytics = new StoryAnalyticsService(win, win.document.body);
+      analytics = getAnalyticsService(win, win.document.body);
       registerServiceBuilder(win, 'story-analytics', function () {
         return analytics;
       });
@@ -222,5 +225,55 @@ describes.realWin(
       const {activeProductData} = storeService.get(StateProperty.SHOPPING_DATA);
       expect(activeProductData).to.be.null;
     });
+
+    async function setupPDP() {
+      await layoutShoppingImplAndAttachmentChildImpl();
+      // Override to simulate data for one product on the page.
+      storeService.dispatch(Action.ADD_SHOPPING_DATA, {
+        page1: {
+          [shoppingData.productId]: shoppingData.items[0],
+        },
+      });
+      storeService.dispatch(Action.TOGGLE_PAGE_ATTACHMENT_STATE, true);
+    }
+
+    it('should call PDP view analytics event on PLP card click', async () => {
+      const trigger = env.sandbox.stub(analytics, 'triggerEvent');
+
+      await layoutShoppingImplAndAttachmentChildImpl();
+      storeService.dispatch(Action.TOGGLE_PAGE_ATTACHMENT_STATE, true);
+      const plpCard = attachmentChildEl.querySelector(
+        '.i-amphtml-amp-story-shopping-plp-card'
+      );
+      plpCard.dispatchEvent(new Event('click'));
+
+      expect(trigger).to.have.been.calledWith(
+        StoryAnalyticsEvent.SHOPPING_PDP_VIEW
+      );
+    });
+
+    it('should call analytics service on buy now button click', async () => {
+      const trigger = env.sandbox.stub(analytics, 'triggerEvent');
+
+      await setupPDP();
+
+      attachmentChildEl
+        .querySelector('.i-amphtml-amp-story-shopping-pdp-cta')
+        .dispatchEvent(new Event('click'));
+
+      expect(trigger).to.have.been.calledWith(
+        StoryAnalyticsEvent.SHOPPING_BUY_NOW_CLICK
+      );
+    });
+
+    it('should call analytics service on attachment state update', async () => {
+      const trigger = env.sandbox.stub(analytics, 'triggerEvent');
+
+      await setupPDP();
+
+      expect(trigger).to.have.been.calledWith(
+        StoryAnalyticsEvent.SHOPPING_PDP_VIEW
+      );
+    });
   }
 );
diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js
@@ -11,7 +11,10 @@ import {
   StateProperty,
   getStoreService,
 } from '../../../amp-story/1.0/amp-story-store-service';
-
+import {
+  StoryAnalyticsEvent,
+  StoryAnalyticsService,
+} from '../../../amp-story/1.0/story-analytics';
 describes.realWin(
   'amp-story-shopping-tag-v0.1',
   {
@@ -26,6 +29,7 @@ describes.realWin(
     let shoppingTag;
     let storeService;
     let localizationService;
+    let analytics;
 
     beforeEach(async () => {
       win = env.win;
@@ -34,6 +38,11 @@ describes.realWin(
         return storeService;
       });
 
+      analytics = new StoryAnalyticsService(win, win.document.body);
+      registerServiceBuilder(win, 'story-analytics', function () {
+        return analytics;
+      });
+
       storeService.dispatch(Action.SET_PAGE_SIZE, {width: 1000, height: 1000});
 
       localizationService = new LocalizationService(win.document.body);
@@ -116,5 +125,14 @@ describes.realWin(
         ).to.deep.equal(tagData);
       });
     });
+
+    it('should call analytics service on tag click', async () => {
+      const trigger = env.sandbox.stub(analytics, 'triggerEvent');
+      await setupShoppingTagAndData();
+      await shoppingTag.shoppingTagEl_.click();
+      expect(trigger).to.have.been.calledWith(
+        StoryAnalyticsEvent.SHOPPING_TAG_CLICK
+      );
+    });
   }
 );
diff --git a/extensions/amp-story/1.0/story-analytics.js b/extensions/amp-story/1.0/story-analytics.js
@@ -27,6 +27,10 @@ export const StoryAnalyticsEvent = {
   STORY_CONTENT_LOADED: 'story-content-loaded',
   STORY_MUTED: 'story-audio-muted',
   STORY_UNMUTED: 'story-audio-unmuted',
+  SHOPPING_BUY_NOW_CLICK: 'story-shopping-buy-now-click',
+  SHOPPING_PLP_VIEW: 'story-shopping-plp-view',
+  SHOPPING_PDP_VIEW: 'story-shopping-pdp-view',
+  SHOPPING_TAG_CLICK: 'story-shopping-tag-click',
 };
 
 /**