Blogr-AMP for Ads & Monetization

Theme Version: 1-0-0 & below...

Describes the usage of Blogr-AMP theme ads placement using amp-ad component & tags required with AMP HTML Blogger template framework.

Reference location to update/edit ads placement for Blogr-AMP Blogger blog layout using AMP HTML tags/components amp-ad or amp-img or text with links.

Location

---

Blogger Dashboard Layout

offer-top

• Preferred AMP tags/components usages.
• Displays ads or text below Blogger page navigation 
• Available in web view.

offer-bottom

• Preferred AMP tags/components usages. 
• Displays ads or text below Blogger blog posts.
• Available in web view.

sticky-ads (web)
sticky-ads (mobile)

• Strictly for amp-ad tags. 
• Displays "floating/sticky" on blog page footer unless closed. 
• Provide ads display for mobile & web view.

user-notify (optional)

• Preferred AMP tags/components usages. 
• Use amp-img tag or text with link to display ads as a replacement for a notifier.
• Displays "floating/sticky" on blog page footer unless closed.
• Available in web & mobile view

Template HTML - Blog1

<b:includable id='post-ads'>

• Strictly for amp-ads tags.
• Displays amp-ad specific tag below blog post contents

<b:includable id='post-ads-inner'>

• Strictly for amp-ad tags
• Displays amp-ad specific tag below post title

Layout Reference: https://blogr-amp.blogspot.com/docs

Behavior

---

• AMP tags/components strict use.
• Javascripts not allowed. 
• DOM element with attribute class by name not allowed.
• Form elements not allowed.
• Style tags not allowed.
• Sticky ads displays once users scrolls. Refer AMP reference below.

Examples Usages

---

amp-ad

Use with Adsense

<amp-ad data-ad-client='ca-pub-12345678912345' data-ad-slot='1234567890' height='250' type='adsense' width='300'>
</amp-ad>

• Copy & paste codes to assigned section.
• Replace Adsense data-ad-client unique ID
• Replace Adsense data-ad-slot unique ID
• Replace width with the ads width
• Replace height with the ads height.
• Save settings.

amp-img 

Use Custom Images with Link

<a href='{{LINK_URL}}' target='_blank'>
  <amp-img height='265' layout='responsive' src='{{IMAGE_URL}}' width='320'/>
</a>

• Copy & paste codes to assigned section
• Replace {{LINK_URL}} to the page to refer to
• Replace {{IMAGE_URL}} with the uploaded image to display
• Replace width value with the image width
• Replace height value with the image height.
• Save settings

Style

---

Use Blogr-AMP pre-built ads class ads-square or ads-banner to easily style amp-ads according to its layout.

<div class='ads ads-square'>
  <amp-ad data-ad-client='ca-pub-12345678912345' data-ad-slot='1234567890' height='250' type='adsense' width='300'>
  </amp-ad>
</div>

<div class='ads ads-banner'>
  <amp-ad data-ad-client='ca-pub-12345678912345' data-ad-slot='1234567890' height='90' type='adsense' width='768'>
  </amp-ad>
</div>

CSS (pre-assigned)

.ads { text-align:center; margin:0 auto; }
.ads-square { max-width: 300px; height: auto; }
.ads-banner { max-width: 768px; height:auto; }

Useful AMP References

---

• AMP for Ads https://www.ampproject.org/docs/reference/components/amp-ad
• AMP for Images (Built-in) : https://www.ampproject.org/docs/reference/components/amp-img