✨ Add amp-ad implementation for Adserver.Online (#40434)

* Adserver.Online AMP ad integration

* Unnecessary change reverted

* Extensions list sorted alphabetically

---------

Co-authored-by: Shihua Zheng <powerivq@users.noreply.github.com>

Author: adserver-online

3p/vendors/aso.js

@@ -0,0 +1,12 @@
+// src/polyfills.js must be the first import.
+import '#3p/polyfills';
+
+import {register} from '#3p/3p';
+import {draw3p, init} from '#3p/integration-lib';
+
+import {aso} from '#ads/vendors/aso';
+
+init(window);
+register('aso', aso);
+
+window.draw3p = draw3p;

ads/_config.js

@@ -317,6 +317,10 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'aso': {
+    renderStartImplemented: true,
+  },
+
   'amoad': {
     prefetch: ['https://j.amoad.com/js/a.js', 'https://j.amoad.com/js/n.js'],
     preconnect: [

ads/vendors/aso.js

@@ -0,0 +1,39 @@
+import {loadScript, validateData} from '#3p/3p';
+
+import {tryParseJson} from '#core/types/object/json';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function aso(global, data) {
+  validateData(data, ['zone'], ['host', 'attr']);
+
+  const host = data.host || 'media.aso1.net';
+
+  global._aso = {
+    onempty: () => global.context.noContentAvailable(),
+    onload: (a) =>
+      global.context.renderStart({
+        width: a.width,
+        height: a.height,
+      }),
+  };
+
+  loadScript(global, `https://${host}/js/code.min.js`, () =>
+    loadAd(global, data)
+  );
+}
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+function loadAd(global, data) {
+  const attr = tryParseJson(data['attr']) || {};
+  attr._amp = 1;
+
+  global._ASO.loadAd('c', data.zone, true, {
+    attr,
+  });
+}

ads/vendors/aso.md

@@ -0,0 +1,50 @@
+# Adserver.Online
+
+## Example
+
+### Basic
+
+```html
+  <amp-ad
+    type="aso"
+    width="300"
+    height="250"
+    data-zone="158819">
+  </amp-ad>
+```
+
+### Sticky Ad
+
+```html
+<amp-sticky-ad layout="nodisplay">
+  <amp-ad
+    type="aso"
+    width="320"
+    height="100"
+    data-zone="158829">
+  </amp-ad>
+</amp-sticky-ad>
+```
+
+Note that `<amp-sticky-ad />` component requires the following script to be included in the page:
+
+```html
+<script
+    async
+    custom-element="amp-sticky-ad"
+    src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"
+></script>
+```
+
+## Configuration
+
+For details on the configuration, please see [Adserver Documentation](https://adserver.online/article/amp).
+
+### Required parameters
+
+-   `data-zone`
+
+### Optional parameters
+
+-   `data-host` - custom media domain
+-   `data-attr` - custom attributes, JSON-string. Example: `data-attr='{"foo": "bar"}'`

examples/amp-ad/ads.amp.html

@@ -225,6 +225,7 @@
         <option>appmonsta</option>
         <option>appnexus</option>
         <option>appvador</option>
+        <option>aso</option>
         <option>atomx</option>
         <option>avantisvideo</option>
         <option>baidu</option>
@@ -836,6 +837,10 @@ <h2>AppVador</h2>
   <amp-ad width="320" height="180" type="appvador" data-id="8c328a2daa6f9ce4693f57246cd86e0a">
   </amp-ad>
 
+  <h2>Adserver.Online</h2>
+  <amp-ad width="300" height="250" type="aso" data-zone="158819">
+  </amp-ad>
+
   <h2>Atomx</h2>
   <amp-ad width="300" height="250" type="atomx" data-id="1234">
   </amp-ad>

extensions/amp-ad/amp-ad.md

@@ -282,6 +282,7 @@ See [amp-ad rules](validator-amp-ad.protoascii) in the AMP validator specificati
 -   [Ads2Bid](../../ads/vendors/ads2bid.md)
 -   [AdSense](../../ads/google/adsense.md)
 -   [AdSensor](../../ads/vendors/adsensor.md)
+-   [Adserver.Online](../../ads/vendors/aso.md)
 -   [AdServSolutions](../../ads/vendors/adservsolutions.md)
 -   [AdsLoom](../../ads/vendors/adsloom.md)
 -   [AdsNative](../../ads/vendors/adsnative.md)