I have enabled Google Ads on my WordPress website. And since I am a lazy guy I permitted Google to place ads on my website by turning on the ‘Auto Ads’ feature. Recently I started facing trouble with ad displays using Google Auto Ads.
What is Google Auto Ads?
Those of you who don’t know, Google Auto Ads is a feature in Google AdSense account which helps site administrators to place ads automatically on their website. Google does this by inspecting your website and smartly displaying ads in areas of pages which are deemed more clickable by site visitors. Admins can trust this automatic ads placements on their site since most of the time Google AI does a great job. But not always you should trust the automatic services.
The Problem
The problem began immediately when I started the Auto Ads service. The ads began encroaching inside my main header and not honoring the header height. Together with the ad, the header started covering 60-70% of the page height on initial page load. On top of that, some ads started making their way in the main site navigation panel container. Since the navigation panel on my site was a sticky panel, as a visitor I was not able to dismiss the ads by scrolling the page up. Everyone wants to earn money by displaying some ads on their site, but not like this!! This is a bad user interface and user experience for any page visitor.
Google AdSense Account panel
Now Google AdSense account provides different ads controlling options including a preview of different ads placement on your web pages. If admins don’t like ads being displayed in a particular area, they can simply remove it by clicking on the ‘bin’ button.
But here I started facing challenges. On the snapshot above you can see that the ads placed by Google in Site Header and Site Navigation Panel were not previewed in Google AdSense account. If you can’t view it here, you simply cannot delete it. You can dismiss other ads from the Article page, sidebar or footer, but not from the two areas of my concern.
Initial research
I started searching on the web for help. I looked into Google forums but all in vain. It appears removing Google Ads from a specific area of your website is not so straightforward. I thought of the option of disabling Auto Ads entirely and start placing ads manually on the entire website. There were some solutions which involved placing scripts to suppress the google ads on specific areas of the page. But I think Google AI keeps evolving and is easily able to circumvent any third party script placed on my page. Creating manual ads units on Google AdSense, then placing ads scripts individually on your pages felt like a cumbersome job to me. Of course there are WordPress plugins to make your life easy and help you to put manual ads scripts. But there has to be some way around to stop ads getting displayed on header and site navigation menu.
The Eureka moment
Then one idea struck my mind. What if I changed a bit of CSS styling and applied it on the entire site? But before implementing this idea I started inspecting my website using the system browser Inspector tool. An Inspector tool is a great way to investigate different HTML elements present on your website.
To remove Google Ads from specific part from your website, you can follow these steps:
1- Open the website in a new browser tab.
2- Now open the browser Inspector tool (usually opened by the F12 button or Ctrl+Shift+I shortcut key).
3- Click on the arrow (left to the Inspector tab). After clicking start hovering over to the webpage. You will notice different sections of HTML code getting highlighted in the Inspector window. To highlight a section of HTML tag click on the web page section.
4- Click on the HTML section where google ads is displayed.
I noticed that google is auto placing ads in the header or navigation menu by adding a div with a class named google-auto-placed. In the below snapshot I have also highlighted a div having the ht-middle-header CSS class. On page load, Google Auto Ads were getting nested inside automatically in this div.
5- Login to your WordPress dashboard and go to Appearance> Theme. Click on ‘Customize’ button of your currently active website theme.
6- On the next page, open the ‘Additional CSS’ section of the customize menu options.
7- Now I have pasted below highlighted CSS code to hide the div with google-auto-placed class nested under div with ht-middle-header class.
Explanation: The CSS property display:none; hides the google-auto-placed class. Thereby preventing the Google Ads by getting taking place inside div with ht-middle-header class.
IMPORTANT: The ht-middle header class is specific to my website theme and the same name is not going to be found in your website code. Do inspect the code of your website carefully to check the correct class names.
8- After the code is inserted, click on the Publish button to visualize your changes live.
If everything goes right, you must have successfully hid Google Auto Ads by use of a two line CSS code and prevented it from taking place in your desired page area. In this case the area was the site header or navigation menu bar.
In short, you should know the div and it’s class (here it’s ht-middle-header) plus the class name of google ads (here it’s google-auto-placed) nested inside first div. After this you can insert the CSS code into any website style sheet to hide the ads from any container.
Following these steps is not going to affect ads placement in other areas of your website. The CSS code which you have put in your theme is applicable on the entire website theme but is only limited to the HTML div tag with ht-middle-header class.
I hope Google will enable viewing of hidden areas of ads placement in preview mode so that admins can delete those areas directly from their Google AdSense account.
Do comment below if you are having challenges removing ads from specific areas. I may be able to help you by inspecting the HTML code of your website.
Hi! I’m having this very same problem and your post has been the most helpful. However, I’m having a hard time finding the correct part of the code from my site to use. I’ve tried “.site” and “.site-header” as the class, but neither one has worked. If you could by any chance take a peek at my HTML and see if you can help me get the right code, I would greatly appreciate it! I’ve been stuck on this for a couple days now. 🙁
Hi Meghan, can you provide the link of your website upon which you are trying to hide the ad??
Hallo, I have same problem on my site rejsebamsen.dk I can see the code, but don’t understand from your explanation what I need to do, and what test i need to put in the css
Hi Danni,
This article explains hiding google auto ads encroaching at certain sections of your website. If your website is designed using WordPress, then you can hide ads using the steps 1 to 8 from this article. Do read carefully and follow step by step. You should be able to fix the issue at your website.
I am really glad to glance at this website posts which carries plenty of useful information, thanks for providing such data.|
Way cool! Some extremely valid points! I appreciate you writing this article plus the rest of the site is extremely good.|
hey there and thank you for your info – I’ve certainly picked up anything new from right here. I did however expertise several technical issues using this website, as I experienced to reload the site lots of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I’m complaining, but sluggish loading instances times will very frequently affect your placement in google and could damage your high quality score if advertising and marketing with Adwords. Well I am adding this RSS to my email and could look out for much more of your respective intriguing content. Make sure you update this again very soon.|
HI, I’m still struggling cause I don’t have auto ads enabled and I don’t know what CSS to add.
All I want is to remove the ads on specific pages.
Can you help please?
Hi Rachel,
Do let me know your website link and the specific page you are try to remove ad from. Maybe I can help.
Hi LTR Admin, nice to meet you and really thank you for sharing this, as we are driving crazy, after adsense added this code to our header section breaking the style of our business and website. The problem is as you said, we cannot manage to find the code that we should add from our theme, to fix it. Could you maybe give us a hand? Our website is: “trabajarmadrid .com” and we are facing that header ad at all our pages and posts, so if we could place a CSS code that remove that code from all our site at header, would be awesome. We wrote adsense support, but never fixed the problem and/or answered us. Thanks a lot for your time and possible help in advance 😉
Not sure if I got the correct code, but seems not to show back. But really not sure if this is out theme correct code for it:
.fw-header .google-auto-placed{
display:none;
}
Thank you 😉
Hi Carlos,
Yes that should hide the google auto placed ad banners from the header bar. I can see that there are no ad present in this area of your website.
Cheers.
Just a note – this is against google rules. Only way to hide auto ads on parts of your website is with their app/website. Modifying css code is not allowed.
Google does not offer this as a solution to our problem. :-/