Home
Documentation
Google Adsense

Google Adsense

A step-by-step guide to setup Google Adsense and manual ad units in Plus UI Blogger Template.
Deo Kumar

Setup Adsense plugin

Adsense script will be automatically loaded if your blog is connected with an Adsense account.

In case your blog is not connected with an Adsense account or you want to use different publisher id to load script, you can find the following code snippet in Edit HTML and add your publisher id.

<Variable name="adsense.clientId" description="Adsense Client Id" type="string" default="" value=""/>
[!] Adsense Client Id
[!] @type {String}
[!] If Blank: It will be automated if Blog is connected with Adsense Account
[!] Warning: Only digits are allowed
<Variable name="adsense.clientId" description="Adsense Client Id" type="string" default="" value="0000000000000000"/>
[!] Adsense Client Id
[!] @type {String}
[!] If Blank: It will be automated if Blog is connected with Adsense Account
[!] Warning: Only digits are allowed

Only digits part of publisher id should be added i.e. you only have to add 0000000000000000 by removing ca-pub- from ca-pub-0000000000000000.

Note that you don't have to add any of the following code snippets anywhere in the Edit HTML which is recommended by Adsense because it will be automatically added for you with the publisher id specified above.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"
     crossorigin="anonymous"></script>
<script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
<amp-auto-ads type="adsense"
        data-ad-client="ca-pub-0000000000000000">
</amp-auto-ads>

When adding manual ad unit, you must remove the marked part when using loading type other than Normal to prevent loading of script multiple times, otherwise it is optional to remove.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"
     crossorigin="anonymous"></script>
<!-- Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Change script loading behaviour

By default script is loaded normally which may impact the PageSpeed Insights Performance. If you don't want performance to be slow, you can switch between script loading behaviour.

The plugin provides 4 types of script loading, generally Normal, Defer, Lazy and Defer + Lazy. The default type is set to Normal.

Behaviours of these loading types are as follows:

  1. Normal: Loads script normally by adding it above </head>. It impacts PageSpeed Insights performance.
  2. Defer: Loads script dynamically after page load. It impacts PageSpeed Insights performance.
  3. Lazy: Loads script dynamically on user interaction for the first time and next time it instantly loads script. It doesn't impact PageSpeed Insights performance.
  4. Defer + Lazy: Same as Lazy but it makes sure page is loaded first. It doesn't impact PageSpeed performance.

When using any script loading type other than Normal, the earnings may be impacted a little bit as script loading is delayed which in turn delay the loading of ads or sometimes they don't display. All types have advantages as well as disadvantages, choose it wisely.

To switch between loading types, follow these steps:

  1. Go to Theme Designer.
  2. Click on Advanced tab.
  3. From the dropdown selection list, select Plugin: Google Adsense.
  4. Change the length of Load Type to 1px, 2px, 3px or 4px for Normal, Defer, Lazy or Lazy + Defer respectively.

You must always use Normal loading type if your site is not yet approved by Google Adsense. It is because other loading type dynamically loads script which cannot be detected by any crawlers resulting in Google Adsense not verifying your site.

Disable Adsense plugin

If you don't want to load Adsense script or want to explicitly add script tags. You can disable the Adsense plugin to prevent theme to load script for you.

  1. Go to Theme Designer.
  2. Click on Advanced tab.
  3. From the dropdown selection list, select Plugin: Google Adsense.
  4. Change the length of Enable Script to 1px or 2px to disable or enable respectively.

If you intend to disable the Adsense plugin to manually add script tags through Edit HTML, be careful if you have enabled the AMP plugin. We always recommend you to use the Adsense plugin to load Adsense script as it handles both AMP and Non-AMP script.

Manual Ad units

There are few ad widgets in the form of LinkList in layout from where you can add your ad unit code. You can add both Non-AMP and AMP ad unit through the same widget. These widgets are listed below.

  • Under Header Ad
  • Sticky Ad
  • Above Pinned Post Ad
  • Above Posts Ad
  • Below Posts Ad
  • Anchor Ad

Tips!
The above ad units can be configured to display only on mobile devices by adding [Mobile] in it's title, or only on desktop devices by adding [Desktop] in it's title. For example, to display anchor ad only on mobile devices, we haved added [Mobile] in its title making it Anchor Ad [Mobile]; and to display sticky ad only in desktop devices, we have added [Desktop] in its title making it Sticky Ad [Desktop].
The anchor ad can be moved to top by adding [Top] in its title, i.e. Anchor Ad [Mobile][Top].

Warning!
There are many manual ad unit widgets and placeholders, that doesn't mean you have to enable all of them. Make sure your site content and number of manual ads are both balanced.

Non-AMP Ad Unit

To add a Non-AMP ad unit in widget, edit the link with Site Name noamp and put your ad code as its Site URL by replacing existing content. A Non-AMP ad unit code snippet looks something like the following:

<!-- Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

AMP Ad Unit

If you are using experimental Linked AMP Lite, you can add Ad Unit for AMP variant of the pages in the ad widgets. To do so, edit the link with Site Name amp and put your amp ad code as its Site URL by replacing existing content. An AMP ad unit looks something like the following:

<amp-ad width="100vw" height="320"
     type="adsense"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-auto-format="rspv"
     data-full-width="">
  <div overflow=""></div>
</amp-ad>

Anchor ad

When adding display ad unit code to anchor ad unit widget, make sure attributes data-ad-format="horizontal" and data-full-width-responsive="false" are set to the <ins> tag. The Non-AMP ad unit code for anchor ad should look like as below:

<!-- Anchor Ads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="horizontal"
     data-full-width-responsive="false"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

We recommend you to disable this widget if there are already few ad units available in initial viewport or you have enabled auto anchor ad. While we provide option to add AMP ad unit to this widget, it is recommended that you do not add AMP ad unit in this widget.

Post middle ads

Post middle ads is used to append ad units in the middle of articles contents automatically. To add an ad unit to this widget, find the LinkList widget with title Post middle ads. You can either create a new link or edit existing one.

The Site name denotes the CSS selector after which the ad unit should be appended. The selector selects all the elements within the context of the parent post body element. For example, if you want to append the ad unit just after the sixth child paragraph, you can use :scope > p:nth-of-type(6); or if you want to append the ad unit after every sixth child paragraph, you can use :scope > p:nth-of-type(6n).

The Site URL denotes the ad unit that will be appended. Put your ad unit code in this field, or replace the existing content with your ad unit code if you are editing an existing link.

This ad widget is not supported for AMP variant of the pages.

In-feed ads

These ads are displayed between the list of posts. This ad unit cannot be configured through the layout, but through Edit HTML.

This ad unit does not work well everytime, please enable it if you are not concerned about it.

  1. Go to Blogger HTML Editor.
  2. Find the following code snippet and make the changes as shown in second tab. 
    <!--[ In-feed ad ]-->
<b:includable id='post-adIn'>
  <b:if cond='!data:amp.active'>

    <!--<div class='ntry pAdIf show-if-js'>

      <b:comment>[NO AMP] In-feed ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (In-feed Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
    <!--[ In-feed ad ]-->
<b:includable id='post-adIn'>
  <b:if cond='!data:amp.active'>

    <div class='ntry pAdIf show-if-js'>

      <b:comment>[NO AMP] In-feed ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-format='fluid' data-ad-layout-key='-xx+xx+xx-xx+xx' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

  </b:if>
</b:includable>

Top article ad

The top article ad is used to display an ad unit at the top of every artcle. This ad unit cannot be configured through the layout, but through Edit HTML.

  1. Go to Blogger HTML Editor.
  2. Find the following code snippet and make the changes as shown in second tab. 
    <!--[ Top article ad ]-->
<b:includable id='post-adTop'>
  <b:if cond='!data:amp.active'>

    <!--<div class='pAd show-if-js'>

      <b:comment>[NO AMP] Top article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Top Article Ad)&quot;'/>

    </div>-->

    <b:else/>

    <!--<div class='pAd'>

      <b:comment>[AMP] Top article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Top Article Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
    <!--[ Top article ad ]-->
<b:includable id='post-adTop'>
  <b:if cond='!data:amp.active'>

    <div class='pAd show-if-js'>

      <b:comment>[NO AMP] Top article ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='pAd'>

      <b:comment>[AMP] Top article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Top Article Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
  3. If you are using experimental AMP feature, you can further modify the code to add an AMP ad unit. 
    <!--[ Top article ad ]-->
<b:includable id='post-adTop'>
  <b:if cond='!data:amp.active'>

    <div class='pAd show-if-js'>

      <b:comment>[NO AMP] Top article ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='pAd'>

      <b:comment>[AMP] Top article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Top Article Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
    <!--[ Top article ad ]-->
<b:includable id='post-adTop'>
  <b:if cond='!data:amp.active'>

    <div class='pAd show-if-js'>

      <b:comment>[NO AMP] Top article ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <div class='pAd'>

      <b:comment>[AMP] Top article ad code here</b:comment>
      <amp-ad width='100vw' height='320' type='adsense' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-auto-format='rspv' data-full-width=''>
        <div overflow=''></div>
      </amp-ad>

    </div>

  </b:if>
</b:includable>

Bottom article ad

The bottom article ad is used to display an ad unit at the bottom of every artcle. This ad unit cannot be configured through the layout, but through Edit HTML.

  1. Go to Blogger HTML Editor.
  2. Find the following code snippet and make the changes as shown in second tab. 
    <!--[ Bottom article ad ]-->
<b:includable id='post-adBot'>
  <b:if cond='!data:amp.active'>

    <!--<div class='pAd show-if-js'>

      <b:comment>[NO AMP] Bottom article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Bottom Article Ad)&quot;'/>

    </div>-->

    <b:else/>

    <!--<div class='pAd'>

      <b:comment>[AMP] Bottom article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Bottom Article Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
    <!--[ Bottom article ad ]-->
<b:includable id='post-adBot'>
  <b:if cond='!data:amp.active'>

    <div class='pAd show-if-js'>

      <b:comment>[NO AMP] Bottom article ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='pAd'>

      <b:comment>[AMP] Bottom article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Bottom Article Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
  3. If you are using experimental AMP feature, you can further modify the code to add an AMP ad unit. 
    <!--[ Bottom article ad ]-->
<b:includable id='post-adBot'>
  <b:if cond='!data:amp.active'>

    <div class='pAd show-if-js'>

      <b:comment>[NO AMP] Bottom article ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='pAd'>

      <b:comment>[AMP] Bottom article ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Bottom Article Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
    <!--[ Bottom article ad ]-->
<b:includable id='post-adBot'>
  <b:if cond='!data:amp.active'>

    <div class='pAd show-if-js'>

      <b:comment>[NO AMP] Bottom article ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <div class='pAd'>

      <b:comment>[AMP] Bottom article ad code here</b:comment>
      <amp-ad width='100vw' height='320' type='adsense' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-auto-format='rspv' data-full-width=''>
        <div overflow=''></div>
      </amp-ad>

    </div>

  </b:if>
</b:includable>

Matched content ad

The matched content ad is displayed below the Related posts. This ad unit cannot be configured through the layout, but through Edit HTML.

  1. Go to Blogger HTML Editor.
  2. Find the following code snippet and make the changes as shown in second tab. 
    <!--[ Matched content ad ]-->
<b:includable id='post-relatedAd'>
  <b:if cond='!data:amp.active'>

    <!--<div class='rAd relatedPosts show-if-js'>

      <b:comment>[NO AMP] Matched content ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Matched Content Ad)&quot;'/>

    </div>-->

    <b:else/>

    <!--<div class='rAd relatedPosts'>

      <b:comment>[AMP] Matched content ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Matched Content Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
    <!--[ Matched content ad ]-->
<b:includable id='post-relatedAd'>
  <b:if cond='!data:amp.active'>

    <div class='rAd relatedPosts show-if-js'>

      <b:comment>[NO AMP] Matched content ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='rAd relatedPosts'>

      <b:comment>[AMP] Matched content ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Matched Content Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
  3. If you are using experimental AMP feature, you can further modify the code to add an AMP ad unit. 
    <!--[ Matched content ad ]-->
<b:includable id='post-relatedAd'>
  <b:if cond='!data:amp.active'>

    <div class='rAd relatedPosts show-if-js'>

      <b:comment>[NO AMP] Matched content ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <!--<div class='rAd relatedPosts'>

      <b:comment>[AMP] Matched content ad code here</b:comment>
      <div class='adB' expr:data-text='data:.messages.adsGoHere + &quot; (Matched Content Ad)&quot;'/>

    </div>-->

  </b:if>
</b:includable>
    <!--[ Matched content ad ]-->
<b:includable id='post-relatedAd'>
  <b:if cond='!data:amp.active'>

    <div class='rAd relatedPosts show-if-js'>

      <b:comment>[NO AMP] Matched content ad code here</b:comment>
      <ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

    </div>

    <b:else/>

    <div class='rAd relatedPosts'>

      <b:comment>[AMP] Matched content ad code here</b:comment>
      <amp-ad width='100vw' height='320' type='adsense' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-auto-format='rspv' data-full-width=''>
        <div overflow=''></div>
      </amp-ad>

    </div>

  </b:if>
</b:includable>

Best practices

Before you integrate Adsense on your site, we recommend you to gather more information and read about ad placements and policies related to it.

Adsense policies

We recommend you to read AdSense Program policies and Ad placement policies.

Avoid custom parallax effects ads

AdSense policies require that ads are placed in a standard, non-intrusive manner. Parallax effects could be seen as manipulating ad placement to draw excessive attention, which may violate the policy of ads blending naturally with content without overly distracting users.

Do not follow unofficial guides blindly

There are many tutorials available on internet related to Adsense. Before you follow them or implement any codes from there, make sure they are both engaging and policy-compliant.

About the author

Deo Kumar
~ Hello World!

Post a Comment

Comment form message goes here. Can be set from Blog Settings > Comment form message (under Comments)