Skip to content

Commit 9d5fb54

Browse files
ClickioTechClickioTech
authored
✨ 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
1 parent 32448d8 commit 9d5fb54

File tree

6 files changed

+153
-0
lines changed

6 files changed

+153
-0
lines changed

‎3p/vendors/clickio.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// src/polyfills.js must be the first import.
2+
import '#3p/polyfills';
3+
4+
import {register} from '#3p/3p';
5+
import {draw3p, init} from '#3p/integration-lib';
6+
7+
import {clickio} from '#ads/vendors/clickio';
8+
9+
init(window);
10+
register('clickio', clickio);
11+
12+
window.draw3p = draw3p;

‎ads/_config.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,17 @@ const adConfig = jsonConfiguration({
469469
renderStartImplemented: true,
470470
},
471471

472+
'clickio': {
473+
prefetch: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
474+
preconnect: [
475+
'https://s.clickiocdn.com',
476+
'https://up.clickiocdn.com',
477+
'https://cns.clickiocdn.com',
478+
'https://partner.googleadservices.com',
479+
'https://tpc.googlesyndication.com',
480+
],
481+
},
482+
472483
'dable': {
473484
preconnect: [
474485
'https://static.dable.io',

‎ads/vendors/clickio.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import {loadScript, validateData} from '#3p/3p';
2+
3+
import {setStyles} from '#core/dom/style';
4+
5+
import {dev, user} from '#utils/log';
6+
7+
const CLICKIO_LOG_TAG = 'Clickio';
8+
const CLICKIO_GLOBAL_NAME = '__lxG__';
9+
const CLICKIO_GLOBAL_COMMON_NAME = '__lxGc__';
10+
/**
11+
* @param {!Window} global
12+
* @param {!Object} data
13+
*/
14+
export function clickio(global, data) {
15+
if (data.siteId && data.unitId) {
16+
validateData(data, ['siteId', 'unitId']);
17+
18+
const divContainer = global.document.getElementById('c');
19+
const div = global.document.createElement('div');
20+
21+
div.setAttribute('id', Math.round(Math.random() * 1e8).toString(36));
22+
23+
if (divContainer) {
24+
// clickio global
25+
global[CLICKIO_GLOBAL_NAME] = global[CLICKIO_GLOBAL_NAME] || {};
26+
27+
const clickioGlobal = global[CLICKIO_GLOBAL_NAME];
28+
29+
// base config
30+
clickioGlobal.ampMode = context.isMaster ? 1 : 2;
31+
clickioGlobal.pageUrl = global.context.location.href;
32+
clickioGlobal.sendPageUrl = true;
33+
34+
// ad container
35+
divContainer.appendChild(div);
36+
setStyles(divContainer, {
37+
top: '50%',
38+
left: '50%',
39+
bottom: '',
40+
right: '',
41+
transform: 'translate(-50%, -50%)',
42+
});
43+
44+
// ad code
45+
(global[CLICKIO_GLOBAL_COMMON_NAME] = global[
46+
CLICKIO_GLOBAL_COMMON_NAME
47+
] || {'s': {}, 'b': 0}).cmd =
48+
global[CLICKIO_GLOBAL_COMMON_NAME].cmd || [];
49+
global[CLICKIO_GLOBAL_COMMON_NAME].cmd.push(function () {
50+
global[CLICKIO_GLOBAL_COMMON_NAME].display(
51+
div.id,
52+
'_' + data.siteId,
53+
'_' + data.unitId,
54+
data
55+
);
56+
});
57+
58+
// load clickio script
59+
loadScript(
60+
global,
61+
'https://s.clickiocdn.com/t/' + data.siteId + '/360_amp.js'
62+
);
63+
64+
// load consent module for master
65+
if (context.isMaster) {
66+
// consent module
67+
if (
68+
context.initialConsentMetadata !== null &&
69+
typeof context.initialConsentMetadata === 'object' &&
70+
context.initialConsentMetadata.gdprApplies &&
71+
context.initialConsentValue !== ''
72+
) {
73+
clickioGlobal.consent = {
74+
gdpr: context.initialConsentMetadata.gdprApplies,
75+
consentString: context.initialConsentValue,
76+
additionalConsent: context.initialConsentMetadata.additionalConsent,
77+
};
78+
79+
// load consent script
80+
loadScript(
81+
global,
82+
'https://s.clickiocdn.com/t/static/amp/consent_amp.js'
83+
);
84+
}
85+
}
86+
87+
dev().info(
88+
CLICKIO_LOG_TAG,
89+
'clickio: running (' + (context.isMaster ? 'master' : 'slave') + ')'
90+
);
91+
}
92+
} else {
93+
user().error(CLICKIO_LOG_TAG, 'clickio: siteId and unitId are required');
94+
return;
95+
}
96+
}

‎ads/vendors/clickio.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Clickio
2+
3+
You can obtain a ready-made code snippet in your [Clickio personal account](https://clickio.com).
4+
5+
## Examples
6+
7+
### Basic single ad
8+
9+
```html
10+
<amp-ad
11+
width="300"
12+
height="250"
13+
type="clickio"
14+
data-site-id="239209"
15+
data-unit-id="727655"
16+
data-params='{"myParam": "myParamVal"}'
17+
data-block-on-consent
18+
>
19+
</amp-ad>
20+
```
21+
22+
*Configuration*
23+
24+
- `data-site-id`: Clickio Site ID
25+
- `data-unit-id`: Clickio Ad Unit ID
26+
27+
28+

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,7 @@
242242
<option>caprofitx</option>
243243
<option>cedato</option>
244244
<option>clever</option>
245+
<option>clickio</option>
245246
<option>cognativex</option>
246247
<option>conative</option>
247248
<option>connatix</option>
@@ -915,6 +916,10 @@ <h2>Clever</h2>
915916
<amp-ad width="1490" height="250" type="clever" data-id="45366" data-hash="f787765d347dedcbd6314064192482bd">
916917
</amp-ad>
917918

919+
<h2>Clickio</h2>
920+
<amp-ad data-block-on-consent width="300" height="250" type="clickio" data-site-id="239209" data-unit-id="727655" data-params='{"myParam": "myParamVal"}'>
921+
</amp-ad>
922+
918923
<h2>Cognativex</h2>
919924

920925
<amp-ad width="1200" height="2000" type="cognativex" layout="responsive" data-widgetid="5716116445855744"

‎extensions/amp-ad/amp-ad.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,7 @@ See [amp-ad rules](validator-amp-ad.protoascii) in the AMP validator specificati
326326
- [CA-ProFit-X](../../ads/vendors/caprofitx.md)
327327
- [Cedato](../../ads/vendors/cedato.md)
328328
- [Clever](../../ads/vendors/clever.md)
329+
- [Clickio](../../ads/vendors/clickio.md)
329330
- [Cognativex](../../ads/vendors/cognativex.md)
330331
- [Colombia](../../ads/vendors/colombia.md)
331332
- [Colombiafeed](../../ads/vendors/colombiafeed.md)

0 commit comments

Comments
 (0)