How to Add Sticky Footer Ad in Wordpress?

In this article, I will show you how you can add a bottom sticky footer Ad to your Wordpress website.

Sticky ads in Adsense perform better for site owners as the chances of ad clicks on this type of ads increases. so, the overall Click through rate, impression, and earning improve.

In fact, many big websites, and news publishing house uses these footer sticky ads to boost their Adsense revenue.

So, let’s understand what is sticky ads, examples of sticky ads, and how you can implement this on your Wordpress website.

What is a Sticky Ad?

As the name suggests Sticky ads are ads that stick to a certain position on the website despite users scrolling through the page. In this way, the sticky Ads get better exposure and draw the attention of the visitors.

You can also get the most Ad impression in this sticky ad. There is already a sticky ad functionality in the auto ads settings of Adsense called “anchor Ads“.

But we can’t customize it and display the ads according to our own choice. That’s why in this article I will show you the easiest way to add sticky footer ads in Wordpress.

Some people also called them bottom sticky ads or floating ads.

Users can easily dismiss the ad shown by clicking the cross button above the ad. In this way, you will get more earnings without hampering the user experience that much.

Here, One thing to note is that don’t use any clickable items above these ads and they must be separate from the rest of the content. You can check the Adsense Guidelines on sticky ads here.

Adsense Guidelines for Sticky Ads

• Don’t overload your page with ads. You need to ensure that all ads, including sticky ads, should take less than the amount of content on the viewable screen or viewport.
• Vertical sticky ads must never overlap or underlap any other page content.
• The ad should never come too close to the content, navigational site functions (including scrollbars), or another ad.
• Any ad implementation must provide clear differentiation between ad and content.
• Horizontal sticky ad units are not allowed to float away from window edges or follow the cursor.
• Horizontal sticky ad units are not allowed to float away from window edges or follow the cursor.
• sticky footer ads, should not cover more than 30% of your computer, tablet, or mobile screen.

Steps to Add Sticky Footer Ad in Wordpress

To add the bottom sticky ad in Wordpress, follow the below steps

Step-1: Login to your Adsense dashboard and create a responsive Display ad unit.

Step-2: Now copy the publisher id and data ad slot code and replace it with the below code.

<div class='sticky-ads' id='sticky-ads'>
<div class='sticky-ads-close' onclick='document.getElementById("sticky-ads").style.display="none"'><svg viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
<div class='sticky-ads-content'>

<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
<style>
.sticky-ads{ position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; }.sticky-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } .sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px;</style>

Step-3: Now Go to Appearance > theme editor > Footer.php file and search for </body> tag.

Step-4: Paste the code just above it and update the file.

Now the sticky footer Ads will be shown on your Wordpress website. You can try opening the webpage in incognito mode if it is working or not.

Troubleshoot Sticky Ad

If the code is not working properly then you need to check if your caching plugins Like WP-Rocket or LiteSpeed cache etc causing this Problem. In some cases, the Remove unused CSS or javascript settings cause this type of issue, preventing the code from loading in the front end.

You can try deactivating the plugin temporarily, clear the cache and check in incognito mode. I also recommend you add the code in the header section of your website. Also, in some cases, you may see a blank Ad.

This problem sometimes occurs if the Ad fill rate is low. This means if there is no sufficient ad to display from the AdSense side then the ad slot will show blank. Try opening an old popular page where you are getting the most traffic and check if the ad is showing or not.

Or you can use this Alternative Sticky Ad code on your Website. (let me know if this working or not)

Video Guide

If you don’t want to edit the theme code then you can use a code management plugin that lets you add codes in the header and footer section.

For this, I prefer to use the “Header Footer Code Manager” plugin by “99robots”. It is a free code management plugin in Wordpress.

you can also set display rules to this code, like show only on desktop or mobile, load only on the homepage or post page, etc.

If you are using the Pro version of the Kadence theme then you can paste the code in the “Header/Footer Scripts” section in the customizer.

You can enable this function by Going to Appearance > kadence.

By the way, the Kadence theme comes with a lot of unique features and you can easily customize your Wordpress website.

Here are some of the Kadence theme tutorials [Video], you may be interested in:

How to Hide this sticky footer ad on the Homepage?

You can hide the sticky footer ad from the homepage of your Wordpress website by blocking the loading of the ad code.

So, for this, you can use a code manager plugin mentioned above or an Adsense manager plugin like Adinserter on your website.

Here, paste the code in any of the blocks and set it to the Post page only or you can check multiple options here.

Now set the location to the footer and keep the alignment to the center as shown in the above image.

Now save the code and the sticky footer ad will only show on the Post page only and will not load on any other pages. So, in this way you can further customize the loading of the ad code.

Note: If your ads are not showing properly or show on very limited pages then I recommend you to use the code in the header section instead of the footer. Also, don’t use too many ads in a single webpage.

Conclusion

I hope you have successfully added the sticky footer ads to your Wordpress website. If you have any trouble during this process or any doubts feel free to ask me in the comment section.

Also, tell me if the sticky ad improves your click-through rate(CTR) or not.

Don’t forget to Subscribe to our YouTube channel for more Tutorials like this.