How to add sticky floating 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 click on this type of ads increases. so, the overall Click through rate, impression, and earning improve.

In fact, many big websites, 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 the sticky footer ads in WordPress.

Some people also called it 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 it 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.

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 publisher id and data ad slot code and replace it in 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.

Add sticky floating ad in WordPress

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.

Video Guide

YouTube video

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.

Header-Footer-Code-Manager-WordPress-plugin-WordPress-org

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 in desktop or mobile, load only in 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 the Appearance > kadence.

Kadence-header footer script manager

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:

Conclusion

I hope you have successfully added the sticky footer ads on 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.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *