✨Introduce new story-ad-swipe event. (#33003)

* fire event

* tests

examples/amp-story/amp-story-auto-ads.html

@@ -51,7 +51,7 @@
           "image": true
         },
         "requests": {
-          "endpoint": "https://www.example.com",
+          "endpoint": "https://www.cool.example",
           "base": "${endpoint}?id=${adId}zx=${timestamp}"
         },
         "triggers": {
@@ -75,6 +75,11 @@
             "request": "base",
             "extraUrlParams": {"amp_stads": "view"}
           },
+          "storyAdSwipe": {
+            "on": "story-ad-swipe",
+            "request": "base",
+            "extraUrlParams": {"amp_stads": "swipe"}
+          },
           "storyAdClick": {
             "on": "story-ad-click",
             "request": "base",

extensions/amp-story-auto-ads/0.1/story-ad-analytics.js

@@ -27,6 +27,7 @@ export const AnalyticsEvents = {
   AD_LOADED: 'story-ad-load',
   AD_INSERTED: 'story-ad-insert',
   AD_VIEWED: 'story-ad-view',
+  AD_SWIPED: 'story-ad-swipe',
   AD_CLICKED: 'story-ad-click',
   AD_EXITED: 'story-ad-exit',
   AD_DISCARDED: 'story-ad-discard',
@@ -42,6 +43,8 @@ export const AnalyticsVars = {
   AD_INSERTED: 'insertTime',
   // Timestamp when page becomes active page.
   AD_VIEWED: 'viewTime',
+  // Timestamp when ad page detects swipe event.
+  AD_SWIPED: 'swipeTime',
   // Timestamp when ad is clicked.
   AD_CLICKED: 'clickTime',
   // Timestamp when ad page moves from active => inactive.

extensions/amp-story-auto-ads/0.1/story-ad-page.js

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import {
   A4AVarNames,
   START_CTA_ANIMATION_ATTR,
@@ -29,10 +28,12 @@ import {
   STORY_AD_ANALYTICS,
 } from './story-ad-analytics';
 import {CommonSignals} from '../../../src/common-signals';
+import {Gestures} from '../../../src/gesture';
 import {
   StateProperty,
   UIType,
 } from '../../amp-story/1.0/amp-story-store-service';
+import {SwipeXRecognizer} from '../../../src/gesture-recognizers';
 import {assertConfig} from '../../amp-ad-exit/0.1/config';
 import {
   createElementWithAttributes,
@@ -222,6 +223,7 @@ export class StoryAdPage {
     this.pageElement_.appendChild(paneGridLayer);
 
     this.listenForAdLoadSignals_();
+    this.listenForSwipes_();
 
     this.analyticsEvent_(AnalyticsEvents.AD_REQUESTED, {
       [AnalyticsVars.AD_REQUESTED]: Date.now(),
@@ -358,6 +360,23 @@ export class StoryAdPage {
     });
   }
 
+  /**
+   * Listen for any horizontal swipes, and fire an analytics event if it happens.
+   */
+  listenForSwipes_() {
+    const gestures = Gestures.get(
+      this.pageElement_,
+      true /* shouldNotPreventDefault */,
+      false /* shouldStopPropogation */
+    );
+    gestures.onGesture(SwipeXRecognizer, () => {
+      this.analyticsEvent_(AnalyticsEvents.AD_SWIPED, {
+        [AnalyticsVars.AD_SWIPED]: Date.now(),
+      });
+      gestures.cleanup();
+    });
+  }
+
   /**
    * Returns the iframe containing the creative if it exists.
    * @return {?HTMLIFrameElement}
@@ -380,6 +399,7 @@ export class StoryAdPage {
     // Ensures the video-manager does not follow the autoplay attribute on
     // amp-video tags, which would play the ad in the background before it is
     // displayed.
+    // TODO(ccordry): do we still need this? Its a pain to always stub in tests.
     this.pageElement_.getImpl().then((impl) => impl.delegateVideoAutoplay());
 
     // Remove loading attribute once loaded so that desktop CSS will position

extensions/amp-story-auto-ads/0.1/test/test-story-ad-page.js

@@ -23,6 +23,7 @@ import {
 } from '../../../amp-story/1.0/amp-story-store-service';
 import {ButtonTextFitter} from '../story-ad-button-text-fitter';
 import {CommonSignals} from '../../../../src/common-signals';
+import {Gestures} from '../../../../src/gesture';
 import {StoryAdAnalytics} from '../story-ad-analytics';
 import {StoryAdLocalization} from '../story-ad-localization';
 import {StoryAdPage} from '../story-ad-page';
@@ -512,6 +513,26 @@ describes.realWin('story-ad-page', {amp: true}, (env) => {
       );
     });
 
+    it('should fire "story-ad-swipe" upon ad swipe', async () => {
+      const onGestureStub = env.sandbox.stub(Gestures.prototype, 'onGesture');
+      const pageElement = storyAdPage.build();
+      doc.body.appendChild(pageElement);
+      // Stub delegateVideoAutoplay.
+      pageElement.getImpl = () => Promise.resolve(pageImplMock);
+
+      expect(fireEventStub).not.to.be.called;
+      const gestureHandler = onGestureStub.lastCall.args[1];
+      // Fake X swipe.
+      gestureHandler();
+      await macroTask();
+      expect(fireEventStub).to.be.calledWithExactly(
+        pageElement,
+        1, // adIndex
+        'story-ad-swipe',
+        {swipeTime: window.sandbox.match.number}
+      );
+    });
+
     it('should fire "story-ad-click" upon ad click', async () => {
       const pageElement = storyAdPage.build();
       doc.body.appendChild(pageElement);