Integrating AdStyle with AMP

3p/integration.js

@@ -89,6 +89,7 @@ import {adsnative} from '../ads/adsnative';
 import {adspeed} from '../ads/adspeed';
 import {adspirit} from '../ads/adspirit';
 import {adstir} from '../ads/adstir';
+import {adstyle} from '../ads/adstyle';
 import {adtech} from '../ads/adtech';
 import {adthrive} from '../ads/adthrive';
 import {adunity} from '../ads/adunity';
@@ -281,6 +282,7 @@ const AMP_EMBED_ALLOWED = {
   '1wo': true,
   '24smi': true,
   adsloom: true,
+  adstyle: true,
   bringhub: true,
   dable: true,
   engageya: true,
@@ -350,6 +352,7 @@ register('adsnative', adsnative);
 register('adspeed', adspeed);
 register('adspirit', adspirit);
 register('adstir', adstir);
+register('adstyle', adstyle);
 register('adtech', adtech);
 register('adthrive', adthrive);
 register('adunity', adunity);

ads/_config.js

@@ -193,6 +193,8 @@ const adConfig = jsonConfiguration({
     preconnect: 'https://ad.ad-stir.com',
   },
 
+  'adstyle': {},
+
   'adtech': {
     prefetch: 'https://s.aolcdn.com/os/ads/adsWrapper3.js',
     preconnect: ['https://mads.at.atwola.com', 'https://aka-cdn.adtechus.com'],

ads/adstyle.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {loadScript, validateData} from '../3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function adstyle(global, data) {
+  validateData(data, ['widget']);
+
+  global._adstyle = global._adstyle || {
+    viewId: global.context.pageViewId,
+    widgetIds: [],
+    referrer: global.context.referrer,
+    url: global.context.canonicalUrl,
+    source: global.context.sourceUrl
+  };
+
+  global._adstyle.widgetIds.push(data.widget);
+
+  const url = 'https://widgets.ad.style/amp.js';
+
+  window.context.observeIntersection(function(changes) {
+    changes.forEach(function(c) {
+      window['intersectionRect' + data.widget] = c.intersectionRect;
+      window['boundingClientRect' + data.widget] = c.boundingClientRect;
+    });
+  });
+
+  loadScript(global, url);
+}

ads/adstyle.md

@@ -0,0 +1,50 @@
+<!---
+Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS-IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+# AdStyle
+
+## Example
+
+### Basic
+
+```html
+  <amp-embed width="400" height="260"
+    type="adstyle"
+    heights="(max-width: 320px) 933px,
+  (max-width: 360px) 1087px,
+  (max-width: 375px) 1138px,
+  (max-width: 412px) 1189px,
+  (max-width: 414px) 1072px,
+  (max-width: 568px) 1151px,
+  (max-width: 640px) 1128px,
+  (max-width: 667px) 1151px,
+  (max-width: 732px) 1211px,
+  (max-width: 736px) 1151px,
+  (max-width: 768px) 633px,
+  (max-width: 1024px) 711px,
+  86vw"
+  data-widget="12345">
+    <div placeholder="">Loading ...</div>
+  </amp-embed>
+```
+
+## Configuration
+
+For details on the configuration semantics, please contact the ad network or refer to their documentation.
+
+### Required parameters
+
+- `data-widget`

examples/ads.amp.html

@@ -98,6 +98,7 @@
         <option>adspeed</option>
         <option>adspirit</option>
         <option>adstir</option>
+        <option>adstyle</option>
         <option>adtech</option>
         <option>adthrive</option>
         <option>adunity</option>
@@ -632,6 +633,26 @@ <h2>AdStir 320x50 banner</h2>
       data-ad-spot="1">
   </amp-ad>
 
+  <h2>AdStyle responsive widget</h2>
+  <amp-embed width="400" height="260"
+          type="adstyle"
+          layout="responsive"
+          data-widget="1"
+          heights="(max-width: 320px) 933px,
+        (max-width: 360px) 1087px,
+        (max-width: 375px) 1138px,
+        (max-width: 412px) 1189px,
+        (max-width: 414px) 1072px,
+        (max-width: 568px) 1151px,
+        (max-width: 640px) 1128px,
+        (max-width: 667px) 1151px,
+        (max-width: 732px) 1211px,
+        (max-width: 736px) 1151px,
+        (max-width: 768px) 633px,
+        (max-width: 1024px) 711px,
+        86vw">
+  </amp-embed>
+
   <h2>AdTech (1x1 fake image ad)</h2>
   <amp-ad width="300" height="250"
       type="adtech"