Analytics: add report immediate support to trigger (#12909)

* add trigger immediate

* add test and doc

extensions/amp-analytics/0.1/requests.js

@@ -114,7 +114,8 @@ export class RequestHandler {
   send(configParams, trigger, expansionOption, dynamicBindings) {
     this.lastTrigger_ = trigger;
     const triggerParams = trigger['extraUrlParams'];
-
+    const isImmediate =
+        (trigger['immediate'] === true) || (this.maxDelay_ == 0);
     if (!this.baseUrlPromise_) {
       expansionOption.freezeVar('extraUrlParams');
       this.baseUrlTemplatePromise_ =
@@ -149,29 +150,28 @@ export class RequestHandler {
     }
 
     this.extraUrlParamsPromise_.push(extraUrlParamsPromise);
-    this.trigger_();
+    this.trigger_(isImmediate);
   }
 
   /**
-   * Dispose function that clear reqeust handler state.
+   * Dispose function that clear request handler state.
    */
   dispose() {
-    if (this.timeoutId_) {
-      this.win.clearTimeout(this.timeoutId_);
-    }
     this.reset_();
   }
 
   /**
    * Function that schedule the actual request send.
+   * @param {boolean} isImmediate
    * @private
    */
-  trigger_() {
-    if (!this.isBatched_) {
+  trigger_(isImmediate) {
+    if (isImmediate) {
       this.fire_();
       return;
     }
-    // If is batched
+
+    // If is batched and not immediate
     if (!this.timeoutId_) {
       // schedule fire_ after certain time
       this.timeoutId_ = this.win.setTimeout(() => {
@@ -256,6 +256,9 @@ export class RequestHandler {
    * @private
    */
   reset_() {
+    if (this.timeoutId_) {
+      this.win.clearTimeout(this.timeoutId_);
+    }
     this.baseUrlPromise_ = null;
     this.baseUrlTemplatePromise_ = null;
     this.extraUrlParamsPromise_ = [];

extensions/amp-analytics/0.1/test/test-requests.js

@@ -95,6 +95,30 @@ describes.realWin('Requests', {amp: 1}, env => {
         expect(h2Spy).to.be.calledOnce;
       });
 
+      it('should respect trigger immediate', function* () {
+        const spy = sandbox.spy();
+        const r = {'baseUrl': 'r', 'maxDelay': 1};
+        const handler = new RequestHandler(ampdoc, r, preconnect, spy, false);
+        const expansionOptions = new ExpansionOptions({});
+        handler.send({'e': '1'}, {}, expansionOptions);
+        clock.tick(100);
+        handler.send({'e': '2'}, {'immediate': 'str'}, expansionOptions);
+        clock.tick(100);
+        handler.send({'e': '3'}, {'immediate': true}, expansionOptions);
+        yield macroTask();
+        expect(spy).to.be.calledOnce;
+        expect(spy.args[0][0]).to.equal('r?e=1&e=2&e=3');
+        spy.reset();
+        handler.send({'e': '4'}, {}, expansionOptions);
+        clock.tick(800);
+        yield macroTask();
+        expect(spy).to.not.be.called;
+        clock.tick(200);
+        yield macroTask();
+        expect(spy).to.be.calledOnce;
+        expect(spy.args[0][0]).to.equal('r?e=4');
+      });
+
       it('should batch multiple send', function* () {
         const spy = sandbox.spy();
         const r = {'baseUrl': 'r2', 'maxDelay': 1};

extensions/amp-analytics/amp-analytics.md

@@ -260,6 +260,7 @@ The `triggers` configuration object describes when an analytics request should b
   - `on` (required) The event to listen for. Valid values are `render-start`, `ini-load`, `click`, `scroll`, `timer`, `visible`, `hidden`, `user-error`, [`access-*`](../amp-access/amp-access-analytics.md), and [`video-*`](./amp-video-analytics.md)
   - `request` (required) Name of the request to send (as specified in the `requests` section).
   - `vars` An object containing key-value pairs used to override `vars` defined in the top level config, or to specify vars unique to this trigger.
+  - `immediate` can be specified to work with request that support batching behavior. Setting `immediate` to `true` can help to flush batched request queue with some certain trigger. In this case, it's possible to reduce the request pings number without losing important trigger events.
   - `selector` and `selectionMethod` can be specified for some triggers, such as `click` and `visible`. See [Element selector](#element-selector) for details.
   - `scrollSpec` (required when `on` is set to `scroll`) This configuration is used in conjunction with the `scroll` trigger. Please see below for details.
   - `timerSpec` (required when `on` is set to `timer`) This configuration is used in conjunction with the `timer` trigger. Please see below for details.

test/manual/analytics-batching.amp.html

@@ -17,10 +17,17 @@
       top: 10000px;
       height: 10px;
     }
+    #ele1 {
+      background-color: red;
+      height: 100px;
+      width: 100px;
+    }
+
   </style>
   <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-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+
 </head>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque augue quis elementum tempus. Pellentesque sit amet neque bibendum, sagittis purus vitae, pellentesque magna. Vestibulum non viverra metus, eget feugiat lacus. Nulla in maximus orci. Maecenas id turpis vel ipsum vestibulum bibendum ut sit amet magna. Nullam hendrerit ex at est eleifend, nec dignissim nibh rutrum. Aliquam quis tellus et nibh faucibus laoreet in eget turpis. Nam quam nisl, porttitor vel ex eget, dapibus placerat dui. Mauris commodo pellentesque leo, eu tempus quam. In hac habitasse platea dictumst. Suspendisse non ante finibus, luctus augue non, luctus orci. Vestibulum ornare lacinia aliquam. In sollicitudin vehicula vulputate. Sed mi elit, commodo nec sapien nec, pretium bibendum leo. Donec id justo tortor. Ut in mauris dapibus, laoreet metus vitae, dictum nisi.
@@ -53,12 +60,13 @@
       "timer": {
         "on": "timer",
         "request": "old",
+        "immediate": true,
         "timerSpec": {
           "interval": 2,
           "maxTimerLength": 10
         }
       },
-      "batch-timer": {
+      "batch-time": {
         "on": "timer",
         "request": "batch",
         "timerSpec": {
@@ -80,7 +88,17 @@
         },
         "batchSegment": "&timer",
         "extraUrlParams": {
-          "extra2": null
+          "extra2": "${requestCount}"
+        }
+      },
+      "click": {
+        "on": "click",
+        "selector": "#ele1",
+        "request": "batch",
+        "immediate": true,
+        "batchSegment": "&timer",
+        "extraUrlParams": {
+          "extra": "immediate"
         }
       }
     },
@@ -92,3 +110,4 @@
   }
   </script>
 </amp-analytics>
+<div id="ele1">click me</div>