View difference between Paste ID: npTS5Z8a and v9H7bHkF
SHOW: | | - or go back to the newest paste.
1-
cooperativa.cl_AMP_336x280_Fixed
1+
cooperativa.cl_AMP_Splash
2
3
4
1. Paste this code in the <head> section of the AMP page. This code should be placed on the site only once as it is the same for all site's and ad units. This is only necessary if these libraries are not already on the site.In AMP, each library can only be included once, and duplicating the inclusion will result in an error, causing your AMP page to become invalid.
5
6-
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
6+
<script async src="https://cdn.ampproject.org/v0/amp-list-0.1.js" custom-element="amp-list"></script>
7-
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
7+
<script async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" custom-element="amp-iframe"></script>
8
<script async src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script>
9
10
11-
2. Paste this code into the <body> section of the page where you want the ads to be shown.
11+
12
2. Insert the following CSS styles in your tag <style amp-custom> on the AMP page:
13-
<amp-ad width="336" height="280" type="doubleclick" data-enable-refresh="30" json='{"targeting":{"autorefresh":"30_sec"}}' data-slot="/45470634,1020719/clickio_area_733710_336x280" data-multi-size="300x250, 336x280, 320x100, 250x250" data-multi-size-validation="false" data-block-on-consent></amp-ad>
13+
14
#clickio-splash-list{right:auto;left:0;min-height:1px;width:100%}#clickio-splash-iframe{margin:0;overflow:visible;min-width:100%;opacity:0}#clickio-splash-iframe,#clickio-splash-list{position:fixed;top:100vh;bottom:-100px;z-index:-1}#clickio-splash-iframe:not([height="100"]){top:0;bottom:0;max-height:100%;max-width:100%;opacity:1;z-index:2147483647}#clickio-splash-list:has(#clickio-splash-iframe:not([height="100"])){z-index:2147483647}#clickio-splash-list:has(#clickio-splash-iframe[height="100"][width="0"]){display:none}#clickio-splash-iframe[height="100"][width="0"]{display:none}
15
16
17
3. Add this code to the <body> of your AMP page:
18
19
<amp-list id="clickio-splash-list" layout="fill" data-block-on-consent="_till_responded" src="https://cns.clickiocdn.com/splash?source_url=SOURCE_URL&canonical_url=CANONICAL_URL&counter=COUNTER&document_referrer=DOCUMENT_REFERRER&viewer=VIEWER&scr_w=AVAILABLE_SCREEN_WIDTH&scr_h=AVAILABLE_SCREEN_HEIGHT&sid=245327&said=733711&btype=splash">
20
<template type="amp-mustache">
21
<div>
22
<amp-iframe width="{{scr_w}}" height="100" layout="responsive" id="clickio-splash-iframe" sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation" resizable frameborder="0" src="{{iframeSrc}}?canon={{canonSrc}}&w={{scr_w}}&h={{scr_h}}">
23
<div overflow></div>
24
<div placeholder></div>
25
</amp-iframe>
26
</div>
27
</template>
28
</amp-list>