View difference between Paste ID: idPkLRrf and Vacmya2j
SHOW: | | - or go back to the newest paste.
1-
meteoweb.eu_AMP_top_Sticky
1+
template_AMP_top_Sticky
2
3
1. Paste this code in the <head> section of the AMP page:
4
5
Important: This code should only be added once. Ensure these elements are not already present before adding. 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.
6
7-
2. Paste this code into the section of the page above all other content:
7+
<script async src="https://cdn.ampproject.org/v0/amp-list-0.1.js" custom-element="amp-list"></script>
8
<script async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" custom-element="amp-iframe"></script>
9-
<amp-ad 
9+
<script async src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script>
10-
sticky="top" 
10+
<script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" custom-element="amp-bind"></script>
11-
data-block-on-consent 
11+
12-
width="320" 
12+
13-
height="100" 
13+
14-
type="clickio" 
14+
2. Insert the following CSS styles in your tag <style amp-custom> on the AMP page:
15-
data-site-id="243242"
15+
16-
data-unit-id="723746"
16+
#cl-top-sticky{position:fixed;top:0;left:0;width:100%;height:100px;z-index:2147483646;box-shadow:0 2px 5px rgba(0,0,0,.3);background-color:#fff}.cl-ts-hidden{display:none}.cl-ts-visible{display:block}.cl-ts-close-button{position:absolute;bottom:-28px;width:28px;height:28px;right:0;background:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="341 8 13 13"><path fill="%234F4F4F" fill-rule="evenodd" d="M354 9.31 352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z"/></svg>') 9px 9px no-repeat #fff;box-shadow:-1px 2px 1px 0 rgba(0,0,0,.2);border:none;border-radius:0 0 0 12px}#clickio-ts-list:has(#clickio-ts-creative[height="100"][width="0"]){display:none}#clickio-ts-list:has(#clickio-ts-creative[style*="width:"][style*="0px"]){display:none;}#clickio-ts-list{height:100px}
17
18
19
3. Add this code at the beginning of the <body> of your AMP page before all other elements:
20
21
22
23
-----------
24-
meteoweb.eu_AMP_Bottom_Sticky
24+
25
template_AMP_Bottom_Sticky
26
27
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
28
29
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
30
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
31
32
33
2. Paste this code into the <body> section of the page where you want the ads to be shown.
34
35
<amp-sticky-ad layout="nodisplay">
36
<amp-ad
37
    width="320"
38
    height="100"
39-
    data-site-id="243242"
39+
40-
    data-unit-id="734465"
40+
    data-site-id="xxxxxxx"
41
    data-unit-id="xxxxxxx"
42
    data-block-on-consent
43
>
44
</amp-ad>
45
</amp-sticky-ad>
46