Skip to content

Instantly share code, notes, and snippets.

@vaishalighuman

vaishalighuman/sportyreport_display_interscroller_popup

Created July 12, 2022 11:04
Show Gist options
  • Save vaishalighuman/f6e34d5354eacff1351ef52fd1cc466f to your computer and use it in GitHub Desktop.
Save vaishalighuman/f6e34d5354eacff1351ef52fd1cc466f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sportyreport_display_interscroller_popup
STEP 1:
Add the following script tags 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-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.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,22755045157/sportyreport.com_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,22755045157/sportyreport.com_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-lightbox id = "ub-lightbox" [open] = "displaylightbox" layout = "nodisplay" close-button>
<div class = "ublightbox">
<amp-ad width=300 height=250 type="doubleclick"
data-slot="/21928950349,22755045157/sportyreport.com_popup_300X250" data-enable-refresh="30">
</amp-ad>
</div>
</amp-lightbox>
<script type="text/javascript" target="amp-script">
ub_x1 = document.querySelectorAll("amp-ad");
ub_x1.forEach((elm) =>{
if(elm && (elm.getAttribute("data-slot") != "" || elm.getAttribute("data-ad-slot") != null)){
ub_x2 = elm.getAttribute("data-slot");
ub_x3= "/21928950349,22755045157/sportyreport.com_popup_300X250";
if ((ub_x2 == ub_x3) && elm.querySelector("iframe")) {
setTimeout(function(){
AMP.setState({displaylightbox: true});
},500);
}
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment