Skip to content

Instantly share code, notes, and snippets.

@vaishalighuman

vaishalighuman/mpbreakingnews_300x250_interscroller_flyingcarpet

Last active August 6, 2022 06:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vaishalighuman/e2a2fc7b85f823bf4df68ce65258577a to your computer and use it in GitHub Desktop.
Save vaishalighuman/e2a2fc7b85f823bf4df68ce65258577a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mpbreakingnews_300x250_interscroller_flyingcarpet
STEP 1:
Add the following script tag in the <head> to include amp-iframe component.
If already present, ignore this step.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
STEP 2:
Add the following script tag in the <head> to include amp-fx-flying-carpet component.
If already present, ignore this step.
<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
STEP 3:
Add the following div element, where you want to show the ad in <body> tag
<div id="ub_300x250" style="text-align: center; margin: 20px;">
<amp-ad width=300 height=250 type="doubleclick" data-slot="/21928950349,22798103878/mpbreakingnews_display_300X250" data-enable-refresh="30"></amp-ad>
</div>
STEP 4:
Add the following div on which position you want to show flying carpet ad:
<div class="amp-flying-carpet-text-border">Advertising</div>
<amp-fx-flying-carpet height="300px">
<amp-ad width="300" height="600" layout="fixed" data-enable-refresh="30" type="doubleclick" data-slot="/21928950349,22798103878/mpbreakingnews_flyingcarpet_300X600">
</amp-ad>
</amp-fx-flying-carpet>
<div class="amp-flying-carpet-text-border">Advertising</div>
STEP 5:
Add the following div just before closing <body> tag
<amp-sticky-ad layout="nodisplay">
<amp-ad width="320" height="100" type="doubleclick" data-slot="/21928950349,22798103878/mpbreakingnews_sticky_320X50" data-enable-refresh="30"></amp-ad>
</amp-sticky-ad>
STEP 6:
Add the following div element, where you want to show the second display ad in <body> tag
<div id="ub_300x250" style="text-align: center; margin: 20px;">
<amp-ad width=300 height=250 type="doubleclick"
data-slot="/21928950349,22798103878/mpbreakingnews_display1_300X250" data-enable-refresh="30">
</amp-ad>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment