Do you want to enhance the revenue potential of your WordPress website by incorporating bottom sticky ads? This comprehensive guide will provide you with all the essential information you need. Before proceeding, it’s crucial to grasp the fundamentals of sticky ads, the various types available, and the guidelines recommended by the AdSense team for their effective utilization.
Understanding Sticky Ads
A sticky ad refers to a fixed advertisement that remains visibly in place even when users scroll through the content. Typically, these ads are utilized in the header, footer, left or right bars, as well as left and right sidebars.
Different Categories of Sticky Ads
Sticky ads can be categorized broadly into two types: horizontal and vertical. Horizontal ads are commonly positioned at the header and footer of a website, spanning from one end to the other in a landscape orientation. An example of a horizontal sticky ad is the anchor ad featured in the “auto ads” section of AdSense.
Vertical sticky ads, on the other hand, are typically placed within the sidebar of a website and occasionally outside the sidebar. These ads are designed to remain fixed within the sidebar as users scroll down the page.
Advantages of Utilizing Sticky Ads in Blogger
Incorporating sticky ads is a powerful strategy to amplify your AdSense revenue by bolstering both the impression and click-through rate (CTR) of your website, along with enhancing your CPM value over time. Various statistical data further substantiate these benefits:
-
40-60% higher CTR compared to standard display ads.
-
Enhanced Viewability: Up to 200% more visible than other ad formats in the same placements.
-
30-70% Higher CPM: Advertisers are willing to pay more for these engaging ad formats.
Before diving into guidelines for placing sticky ads on Blogger, let’s first explore how you can incorporate sticky footer ads on your website.
Before following the steps below, ensure to back up your theme to revert any errors easily.
Steps to Create a Responsive Floating Bottom Sticky Ad in WordPress:
To implement a bottom sticky ad on your WordPress site, follow these steps:
Step 1: Copy the CSS code provided below and insert it just above the ]]></b:skin> code snippet or add it to the additional CSS section of your theme.
Copy the following CSS code:
.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; }
To do this, navigate to the Theme section, select customization, and access the advanced tab to find the Add CSS section. Paste the CSS code and save your theme settings.
Step 2: Next, visit AdSense and generate a responsive display ad unit.
Copy the ‘data-ad-client’ and ‘data-ad-slot’ code from the display ad unit.
Step 3: Copy the HTML code provided below and replace it with the two codes you copied previously.
HTML code for sticky footer ad:
<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-xxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxx"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
Step 4: Paste the code just above the </body> tag in your theme and save the changes.
You have now successfully integrated sticky floating bottom ads into your WordPress site.
Note: If you cannot locate the ]]></b:skin> code, search for the </style> tag or insert it amidst your theme’s CSS codes.
How to specifically show sticky ads on mobile devices only?
Sticky ads can significantly boost AdSense revenue, but incorporating them on desktop devices can sometimes impact user experience negatively.
To address this, you can establish a condition in the provided code to display the sticky ads exclusively on mobile devices while excluding them from desktop devices.
Simply include an IF condition both above and below the given HTML code as described.
<b:if cond='data:blog.isMobileRequest == "true"'> HTML To Show Only in Mobile Devices </b:if>
In the scenario where you wish to showcase the ads solely on desktops, you will need to slightly adjust the IF condition by changing the “true” value to “false.”
Guidelines for Implementing Sticky Ads on a Website
-
Ensure that the sticky ads cover less than 30% of the screen at any given time.
-
Limit to one vertical sticky ad per viewport.
-
Limit to one horizontal sticky ad per page.
-
Avoid any cursor-related movements; the sticky ad should remain stationary.
-
Maintain a substantial amount of whitespace or boundary between the ad and the content to distinguish it from the content.
Google recommends refraining from implementing sticky ads on gaming sites and pages with infinite scroll to enhance the user experience.
Conclusion
Horizontal top and bottom sticky ads are effective on mobile devices, while vertical sticky ads are well-suited for desktops. However, avoid using anchor ads and bottom sticky ads simultaneously, as this could lead to a suboptimal user experience for your readers.
I trust that this guide will assist you in adding a responsive, floating, bottom sticky ad to your WordPress website. If you find this guide helpful, please consider sharing it with your friends.
