Google recently introduced page-level ads to allow better mobile Ads. Here are the benefits listed by Google.

  • New ad formats: anchor/overlay ads and vignettes
  • Don’t count towards your 3 ads per page limit
  • Only display on mobile-optimized sites
  • Use the same ad code on all of your pages
  • Designed by Google with users in mind
  • Optimized to help increase revenue

As you can see, it could be good way of adding extra revenue on top of the Adsense you already implemented.

To implement the page-level Ads, you just need to add your ads code to the <head> or beginning of <body>, as shown in the official tutorial.

To add it to your WordPress site, you would need to manually add the code to the theme you are using. The exact file to modify may depends on the theme you are using. For my case (Spacious theme), it is located at header.php.

You can directly modify it in the Dashboard by going “Appearance”–> “Editor” –> [FILE].

Method 1: Modify the wp_head()

My preference is to add_action to the wp_head() function. The reason is that it is easier to enable and disable. It is located in the functions.php. You can add a function called

add_action( 'wp_head', 'add_google_page_level_add' );

function add_google_page_level_add() {
   ?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
   google_ad_client: "ca-pub-<YOUR PUB ID HERE>",
   enable_page_level_ads: true
});
</script>  
<?php
}

 

201604290000

Method 2: Directly put the code in the head section

Alternatively, you can modify the header.php. Directly put the code you got from the Google Adsense site in the head section.

After save the file, you can test it out from a Mobile phone by adding #googleads to the end of the URL. For example “tipsarea.com#googleads”. For my case, the test code runs best with Chrome web browser in the phone. Other browsers such as the Dolphin and Android build in browser all returned with error.




Once it is loaded, you can choose to test out Anchors or Vignettes ads.

201604290001

The Vignettes ads will highlight all the capable links in your webpage.

201604290002

Anchors ads will only show up when you scroll the screen down.

201604290003

To this point I think it is working.
One thing that you might want to watch out is for the theme updates which will overwrite the files that we modified. I am not aware of tools that can avoid that. If you know something that can preserve the changes we made, please let us know by leaving a comment.



How to Add Google Page-Level Ads to your WordPress Site
Tagged on:     

Please tell us what's in your mind ...

%d bloggers like this: