✨ AMP-AD implementation for Clickio (#40352)

* AMP ad implementation for Clickio

* Refactor Clickio ad implementation by cleaning up imports and improving code formatting. Removed unused import and adjusted spacing for better readability.

* Fix trailing whitespace in ads.amp.html

* Remove Clickio ad integration from imports and registration in 3p/integration.js

Author: ClickioTech

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

ads/_config.js

@@ -469,6 +469,17 @@ const adConfig = jsonConfiguration({
     renderStartImplemented: true,
   },
 
+  'clickio': {
+    prefetch: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
+    preconnect: [
+      'https://s.clickiocdn.com',
+      'https://up.clickiocdn.com',
+      'https://cns.clickiocdn.com',
+      'https://partner.googleadservices.com',
+      'https://tpc.googlesyndication.com',
+    ],
+  },
+
   'dable': {
     preconnect: [
       'https://static.dable.io',

ads/vendors/clickio.js

@@ -0,0 +1,96 @@
+import {loadScript, validateData} from '#3p/3p';
+
+import {setStyles} from '#core/dom/style';
+
+import {dev, user} from '#utils/log';
+
+const CLICKIO_LOG_TAG = 'Clickio';
+const CLICKIO_GLOBAL_NAME = '__lxG__';
+const CLICKIO_GLOBAL_COMMON_NAME = '__lxGc__';
+/**
+ * @param {!Window} global
+ * @param {!Object} data
+ */
+export function clickio(global, data) {
+  if (data.siteId && data.unitId) {
+    validateData(data, ['siteId', 'unitId']);
+
+    const divContainer = global.document.getElementById('c');
+    const div = global.document.createElement('div');
+
+    div.setAttribute('id', Math.round(Math.random() * 1e8).toString(36));
+
+    if (divContainer) {
+      // clickio global
+      global[CLICKIO_GLOBAL_NAME] = global[CLICKIO_GLOBAL_NAME] || {};
+
+      const clickioGlobal = global[CLICKIO_GLOBAL_NAME];
+
+      // base config
+      clickioGlobal.ampMode = context.isMaster ? 1 : 2;
+      clickioGlobal.pageUrl = global.context.location.href;
+      clickioGlobal.sendPageUrl = true;
+
+      // ad container
+      divContainer.appendChild(div);
+      setStyles(divContainer, {
+        top: '50%',
+        left: '50%',
+        bottom: '',
+        right: '',
+        transform: 'translate(-50%, -50%)',
+      });
+
+      // ad code
+      (global[CLICKIO_GLOBAL_COMMON_NAME] = global[
+        CLICKIO_GLOBAL_COMMON_NAME
+      ] || {'s': {}, 'b': 0}).cmd =
+        global[CLICKIO_GLOBAL_COMMON_NAME].cmd || [];
+      global[CLICKIO_GLOBAL_COMMON_NAME].cmd.push(function () {
+        global[CLICKIO_GLOBAL_COMMON_NAME].display(
+          div.id,
+          '_' + data.siteId,
+          '_' + data.unitId,
+          data
+        );
+      });
+
+      // load clickio script
+      loadScript(
+        global,
+        'https://s.clickiocdn.com/t/' + data.siteId + '/360_amp.js'
+      );
+
+      // load consent module for master
+      if (context.isMaster) {
+        // consent module
+        if (
+          context.initialConsentMetadata !== null &&
+          typeof context.initialConsentMetadata === 'object' &&
+          context.initialConsentMetadata.gdprApplies &&
+          context.initialConsentValue !== ''
+        ) {
+          clickioGlobal.consent = {
+            gdpr: context.initialConsentMetadata.gdprApplies,
+            consentString: context.initialConsentValue,
+            additionalConsent: context.initialConsentMetadata.additionalConsent,
+          };
+
+          // load consent script
+          loadScript(
+            global,
+            'https://s.clickiocdn.com/t/static/amp/consent_amp.js'
+          );
+        }
+      }
+
+      dev().info(
+        CLICKIO_LOG_TAG,
+        'clickio: running (' + (context.isMaster ? 'master' : 'slave') + ')'
+      );
+    }
+  } else {
+    user().error(CLICKIO_LOG_TAG, 'clickio: siteId and unitId are required');
+    return;
+  }
+}

ads/vendors/clickio.md

@@ -0,0 +1,28 @@
+# Clickio
+
+You can obtain a ready-made code snippet in your [Clickio personal account](https://clickio.com).
+
+## Examples
+
+### Basic single ad
+
+```html
+<amp-ad
+  width="300"
+  height="250"
+  type="clickio"
+  data-site-id="239209"
+  data-unit-id="727655"
+  data-params='{"myParam": "myParamVal"}'
+  data-block-on-consent
+>
+</amp-ad>
+```
+
+*Configuration*
+
+-  `data-site-id`: Clickio Site ID
+-  `data-unit-id`: Clickio Ad Unit ID
+
+
+

examples/amp-ad/ads.amp.html

@@ -242,6 +242,7 @@
         <option>caprofitx</option>
         <option>cedato</option>
         <option>clever</option>
+        <option>clickio</option>
         <option>cognativex</option>
         <option>conative</option>
         <option>connatix</option>
@@ -915,6 +916,10 @@ <h2>Clever</h2>
   <amp-ad width="1490" height="250" type="clever" data-id="45366" data-hash="f787765d347dedcbd6314064192482bd">
   </amp-ad>
 
+  <h2>Clickio</h2>
+  <amp-ad data-block-on-consent width="300" height="250" type="clickio" data-site-id="239209" data-unit-id="727655" data-params='{"myParam": "myParamVal"}'>
+  </amp-ad>
+
   <h2>Cognativex</h2>
 
   <amp-ad width="1200" height="2000" type="cognativex" layout="responsive" data-widgetid="5716116445855744"

extensions/amp-ad/amp-ad.md

@@ -326,6 +326,7 @@ See [amp-ad rules](validator-amp-ad.protoascii) in the AMP validator specificati
 -   [CA-ProFit-X](../../ads/vendors/caprofitx.md)
 -   [Cedato](../../ads/vendors/cedato.md)
 -   [Clever](../../ads/vendors/clever.md)
+-   [Clickio](../../ads/vendors/clickio.md)
 -   [Cognativex](../../ads/vendors/cognativex.md)
 -   [Colombia](../../ads/vendors/colombia.md)
 -   [Colombiafeed](../../ads/vendors/colombiafeed.md)