How To Add Sticky Footer AdSense In WordPress

In this tutorial, I will show you how to add sticky footer AdSense in WordPress site for both mobile, tablet and desktops.

Sticky ads in WordPress sites performs better in the sense that it improves the overall click through rates, earnings and impressions in your AdSense account.

As a matter of fact, news medias and large websites mostly uses the footer sticky ads to leverage their high traffic in order to get more chances of clicks and more earnings.

However, let’s understand what footer sticky ads in WordPress is all about.

What is Footer Sticky Ads in WordPress?

Generally, footer sticky ads is a kind of placement in WordPress websites that is fixed at the bottom of the device screen despite when the user scrolls through the website. The motive of using this type of ads is to boost website’s impression and possibly get more money on AdSense.

In the same vein, AdSense has offered this kind of functionality via the auto ads option called “anchor ads”.

\\ READ ALSO: 5 Easy Ways to Add Money to Your PalmPay Account //

AdSense Guidelines for Implementing 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.

How to Add Sticky Footer AdSense in WordPress.

Step 1: Login to your AdSense dashboard then create responsive ads unit.

Step 2. Copy the code below to be added to your WordPress site.

<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: Edit the “data-ad-client” and “data-ad-slot” to the details you have on your already created responsive ad unit.

Step 4 (Adding code to your website):

There are two options available which you can add this code to your website. The first is through a plugin and the second is without a plugin.

Add Sticky ads with plugin in WordPress.

Install Advanced ads plugin via the WordPress repo, then select “Ads.”

After you must have selected “Ads”, click on “New Ads”. Select the “Plain Text and Code” option then Insert plain text or code into the field provided and save.