Recently AdSense has introduced Page-Level ads, targetted for Mobile visitors of your blog.This Ad type is specially created for Mobile sites and help you to Monetize your Mobile template with Adsense Page Level Ads.This page level ads are similar to ads like what we see in AdMob.
Today in this Article I will show you guys, How to Setup AdSense page level Ads and Implement it on your WordPress and Blogger Blogs.
This page level Ads loads separately in background, which won't affect your Blog's loading time,
- Mobile Responsive
- Optimized for Mobile
- Only display on mobile optimized sites
- Won't affect website Loading time
Page-Level Ads Format:
Anchor/Overlay ads and Vignettes ads are the new two type of Page-level ad formats.
Anchor ads are mobile responsive ads that stick to the bottom of the web page or Mobile screen and can be easily dismissed by clicking on the toggle button.
Vignettes ads are full-screen mobile ads which are similar to Admob's Interstitial ads, which completely covers the Webpage.
Vignettes ads appear as a popup when visitor click on a link, User can either tap on the ad or continue to the destination page.
- Vignettes ads only appear when, users are about to leave the page,So it won't affect the loading time.
How to Add Page level Ads to your Blog:
First of all, we need to enable Page-Level ads in our Adsense Account and then copy the ad code from there, Let's check How to do it.
How To Enable Adsense Page Level Ads
Step 1: Login to your AdSense account.
Step 2: Now go to my ads tab or open this link in a new tab: Page Level Ads
Step 3: Click on the Toggle button and turn on Anchor/ Overlay and Vignette ads.
(Now we have enabled Page-Level ads in our AdSense account)
Step 4: Now click on the Get Code button.
Step 5: Copy the Ad Code from there
Step 1: Go to your WordPress site Dashboard.
Step 2: Now click on Appearance and click on Editor.
Step 3: Now find there Header.php
Step 4: Open this file and after the <head> or before</head> paste the copied code.
Step 5: Finally click on Save changes button.
Step 1: Go to Blogger Dashboard.
Step 2: Then click on Template and then on Edit HTML.
Step 3: Press Ctrl+F and find </head> tag.
Note: In your Page-level code, make one modification. Replace the attribute async with async=''
- If you don't make this modification, Blogger will give you an error message.
Error parsing XML, line 1473, column 15: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.
Step 4: After modification, paste the code just above the </head> tag,
Step 5: Now Save your Template, All Done!
How to Test Page Level Ads on your Website?
Step 1: Open a web browser in your Smartphone.
Step 2: Now enter your website address and in the end type #googleads for example www.ipeeworld.com#googleads
Step3: After going to this URL, a box will appear at the top your Webpage, just select the ad type you want to preview.
Also, if you have any issue or query feel free to ask here. I will try to help you and don’t forget to share this awesome article with others.
Check: 50 Most Popular Bloggers From India With Alexa Rank[April 2016]
How to use Google Keyword Planner for Keyword Research?
How To Create A Social Content Locker For Blogger Blogs
Top 10 Indian Blogger 2016 and their Earnings