✨ AdMatic Ad Integration | New (#39771)

* Pixad Ad Integration

* updated trailing whitespace.

* fix

* Update pixad.js

* Update integration.js

* Update amp-ad.md

* Update pixad.md

* AdMatic Ad Integration | New

add support to amp-ad for the AdMatic type.

* update

* Update admatic.md

3p/integration.js

@@ -49,6 +49,7 @@ import {adincube} from '#ads/vendors/adincube';
 import {adition} from '#ads/vendors/adition';
 import {adman} from '#ads/vendors/adman';
 import {admanmedia} from '#ads/vendors/admanmedia';
+import {admatic} from '#ads/vendors/admatic';
 import {admixer} from '#ads/vendors/admixer';
 import {adnuntius} from '#ads/vendors/adnuntius';
 import {adocean} from '#ads/vendors/adocean';
@@ -332,6 +333,7 @@ register('adincube', adincube);
 register('adition', adition);
 register('adman', adman);
 register('admanmedia', admanmedia);
+register('admatic', admatic);
 register('admixer', admixer);
 register('adnuntius', adnuntius);
 register('adocean', adocean);

3p/vendors/admatic.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 {admatic} from '#ads/vendors/admatic';
+
+init(window);
+register('admatic', admatic);
+
+window.draw3p = draw3p;

ads/_config.js

@@ -137,6 +137,8 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'admatic': {},
+
   'admixer': {
     renderStartImplemented: true,
     preconnect: ['https://inv-nets.admixer.net', 'https://cdn.admixer.net'],

ads/vendors/admatic.js

@@ -0,0 +1,37 @@
+import {validateData, writeScript} from '#3p/3p';
+
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function admatic(global, data) {
+  validateData(data, ['adNetwork', 'adPublisher', 'adTypeId']);
+  global._admatic = global._admatic || {
+    publisher: data['adNetwork'],
+    adNetwork: data['adPublisher'],
+    adTypeId: data['adTypeId'],
+    host: `static.cdn.pixad.com.tr`,
+    prefix: `px`,
+  };
+
+  if (global._admatic.publisher.indexOf('adm-pub') != -1) {
+    global._admatic.host = `static.cdn.admatic.com.tr`;
+    global._admatic.prefix = `adm`;
+  }
+
+  const ins = global.document.createElement('ins');
+  ins.setAttribute('data-publisher', global._admatic.publisher);
+  if (global._admatic.adTypeId == 'standard') {
+    ins.setAttribute('data-ad-size', `[[${data.width},${data.height}]]`);
+  }
+  ins.setAttribute('data-ad-network', global._admatic.adNetwork);
+  ins.setAttribute('data-ad-type-id', global._admatic.adTypeId);
+  ins.setAttribute('class', `${global._admatic.prefix}-ads-area`);
+  global.document.getElementById('c').appendChild(ins);
+  ins.parentNode.addEventListener(
+    'eventAdbladeRenderStart',
+    global.context.renderStart()
+  );
+
+  writeScript(global, `https://${global._admatic.host}/showad/showad.min.js`);
+}

ads/vendors/admatic.md

@@ -0,0 +1,51 @@
+# AdMatic
+
+## Example of AdMatic's model implementation
+
+### Basic
+
+```html
+  <amp-ad
+    type="admatic"
+    width="300"
+    height="250"
+    data-ad-type-id="standard"
+    data-ad-network="adm-pub-194162670389"
+    data-ad-publisher="65943e194d11b285b6173588">
+  </amp-ad>
+```
+
+### Sticky Ad
+
+```html
+<amp-sticky-ad layout="nodisplay">
+  <amp-ad
+    type="admatic"
+    width="320"
+    height="100"
+    data-ad-type-id="standard"
+    data-ad-network="adm-pub-194162670389"
+    data-ad-publisher="65943e194d11b285b6173588">
+  </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 semantics, see [AdMatic documentation](https://www.admatic.com.tr/).
+
+### Required parameters
+
+-   `data-ad-network`: Network ID
+-   `data-ad-publisher`: Publisher ID
+-   `data-ad-type-id`: Model ID

examples/amp-ad/ads.amp.esm.html

@@ -85,6 +85,7 @@
         <option>adition</option>
         <option>adman</option>
         <option>admanmedia</option>
+        <option>admatic</option>
         <option>admixer</option>
         <option>adnuntius</option>
         <option>adocean</option>
@@ -512,6 +513,16 @@ <h2>AdmanMedia</h2>
       data-id="8e916419">
   </amp-ad>
 
+  <h2>AdMatic</h2>
+  <amp-ad
+    type="admatic"
+    width="300"
+    height="250"
+    data-ad-type-id="standard"
+    data-ad-network="adm-pub-194162670389"
+    data-ad-publisher="65943e194d11b285b6173588">
+  </amp-ad>
+
   <h2>Admixer</h2>
   <amp-ad width="300" height="250"
       type="admixer"

examples/amp-ad/ads.amp.html

@@ -183,6 +183,7 @@
         <option>adition</option>
         <option>adman</option>
         <option>admanmedia</option>
+        <option>admatic</option>
         <option>admixer</option>
         <option>adnuntius</option>
         <option>adocean</option>
@@ -581,6 +582,16 @@ <h2>AdmanMedia</h2>
   <amp-ad width="300" height="250" type="admanmedia" data-id="8e916419">
   </amp-ad>
 
+  <h2>AdMatic</h2>
+  <amp-ad
+    type="admatic"
+    width="300"
+    height="250"
+    data-ad-type-id="standard"
+    data-ad-network="adm-pub-194162670389"
+    data-ad-publisher="65943e194d11b285b6173588">
+  </amp-ad>
+
   <h2>Admixer</h2>
   <amp-ad width="300" height="250" type="admixer" data-sizes="[[300,250]]"
     data-zone="2eb6bd58-865c-47ce-af7f-a918108c3fd2">

extensions/amp-ad/amp-ad.md

@@ -269,6 +269,7 @@ See [amp-ad rules](validator-amp-ad.protoascii) in the AMP validator specificati
 -   [ADITION](../../ads/vendors/adition.md)
 -   [Adman](../../ads/vendors/adman.md)
 -   [AdmanMedia](../../ads/vendors/admanmedia.md)
+-   [AdMatic](../../ads/vendors/admatic.md)
 -   [Admixer](../../ads/vendors/admixer.md)
 -   [Adnuntius](../../ads/vendors/adnuntius.md)
 -   [AdOcean](../../ads/vendors/adocean.md)