Ads Settings

Table of Contents

• Disable Auto Ads
• Manually Insert Ad Units
  • Recommended Ad sizes
• Ad Background

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
adsense:
  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" 
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-ad" 
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Disable Auto Ads

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

# Google Ads
adsense:
  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
adsense:
  client_id: 'ca-pub-xxxxxxxxxxxxxxxx' # Google Adsense client ID
  ad_slot:
    before_content: xxxxxxxxxx # Ad Slot that places before content
    sidebar: xxxxxxxxxx # Ad Slot that places to sidebar

Recommended Ad sizes

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('https://chriskyfung.github.io/amp-affiliately-jekyll-theme/assets/images/b8d82a619c.png');
  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