Ads Settings

Ads Settings Ads Settings

Table of Contents

This theme supports Ad display with Google Adsense using <amp-ad> and <amp-auto-ads> components.

You have to set up your Adsense client ID in _config.yml as below.

# Google Ads
  client_id: 'ca-pub-xxxxxxxxxxxxxxxx' # Google Adsense client ID

The theme will include the following two AMP components to the HTML head:

<script async custom-element="amp-auto-ads" 
<script async custom-element="amp-ad" 

Disable Auto Ads

You can disable and exclude the Auto Ads component by configuring auto_ads: false as below.

# Google Ads
  client_id: 'ca-pub-xxxxxxxxxxxxxxxx' # Google Adsense client ID
  auto_ads: false

Manually Insert Ad Units

This theme comes with two pre-defined Ad placements:

  1. the space before the content per post
  2. the sidebar ads section (if the sidebar presents)

You have to assign your Ad unit IDs as the configuration below:

# Google Ads
  client_id: 'ca-pub-xxxxxxxxxxxxxxxx' # Google Adsense client ID
    before_content: xxxxxxxxxx # Ad Slot that places before content
    sidebar: xxxxxxxxxx # Ad Slot that places to sidebar
Placement Width Height media >= 1200px
before content 100% 200px width: 730px
sidebar 100% 250px width: 300px

Ad Background

In general, Adsense Term of Service (TOS) disallows publishers to modify Ads appearance with CSS. But it leaves blank spaces on the webpage sometimes, when it cannot suggest any Ads that match with the page content. This is highly undesirable because it will give a very bad user experience.

To make it a little nicer, a small icon is set as the background image of each <amp-ad> element as shown below.

It is styled with the following CSS code:

amp-ad {
  background-image: url('');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 50px

When an Ad unit is successfully loaded and rendered, the entire icon will be covered and will not affect the Ad appearance.

If you still worry about violating the Adsense Policy, you can exclude the CSS styles by setting the following in the _config.yml file.

adstyle: false

Chris F. Author of this blog, M.Phil.
Loading Disqus Comments...
Please enable JavaScript to view the comments powered by Disqus.