In the ever-evolving world of online advertising, finding the right balance between automation and customization can be a challenge. As a website owner, I faced a situation where I needed to disable Google AdSense’s Auto Ads feature for personal reasons but still wanted to leverage the benefits of anchor ads. Unfortunately, disabling Auto Ads also deactivated anchor ads, prompting me to search for an alternative solution. In this article, I will share my experience and provide a step-by-step guide to creating manual anchor ads that allowed me to maintain control over my ad placements while maximizing my earnings.

The Need for Customization

As a website owner, I value the ability to curate and control the user experience on my platform. While Auto Ads offer convenience, they do not always align perfectly with the design and layout of my website. Additionally, certain personal circumstances compelled me to disable the Auto Ads feature. However, I didn’t want to lose the potential revenue generated by anchor ads, which led me to explore creating my own.

The Search for a Solution

Initially, I scoured the web for a ready-made anchor ads code script that would allow me to bypass the Auto Ads dependency. Unfortunately, my search came up empty. However, undeterred by this setback, I decided to take matters into my own hands and create a manual anchor ads solution that would provide the control and flexibility I desired.

Crafting Manual Anchor Ads

After delving into the intricacies of HTML and CSS, I was able to develop a simple yet effective manual anchor ads script. Here’s the script I created:

<!-- ANCHOR ADS START -->

<div id="xaa" style="position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 9999999; transition: bottom 0.75s ease 0s; background-color: rgb(255, 255, 255); border: 0px solid rgba(0, 0, 0, 0.8); width: 100%; max-width: 800px; height: 95px;">
  
  <div id="ad-container" style="border: 0pt none; width: 100%; height: 95px;">

    <!-- Your adsense code or content goes here -->
   
  </div>
  <a id="close-button" style="background-color: rgba(0, 0, 0, 0.5); color: rgb(255, 255, 255); display: block; width: 20px; text-align: center; font-size: 12px; line-height: 20px; font-family: sans-serif; position: absolute; cursor: pointer; border: none; padding: 0px; top: -25px; right: 0px;">X</a>
</div>

<script>
  document.getElementById("close-button").addEventListener("click", function() {
    document.getElementById("ad-container").style.display = "none";
    document.getElementById("xaa").style.display = "none";
  });
</script>

<!-- // ANCHOR ADS END -->

Allow me to explain each component of the script in detail:

a. xaa Div: This div represents the anchor ad container and is positioned at the bottom of the web page. It utilizes CSS properties such as position: fixed, bottom: 0px, and left: 50% to ensure its fixed placement, centered horizontally on the page.

b. ad-container Div: Within the xaa container, this div holds your adsense code or any other content you wish to display as the anchor ad.

c. close-button Link: This link represents a button to close the anchor ad. When clicked, it triggers JavaScript code that hides both the ad-container and xaa elements, effectively removing the anchor ad from the user’s view.

d. <!-- Your adsense code or content goes here --> Ad your AdSense code here or banner image ads with the normally size of width is 728px and height is 90px.

NOTE: Adding Google AdSense Code, your ad must be in fix size to avoid overlapping. Here is the sample of adsense code where you can put on inside DIV AD CONTAINER.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXX"
     crossorigin="anonymous"></script>
<!-- fixed size -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-XXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

The Benefits of Manual Anchor Ads

Creating manual anchor ads offers several advantages, including:

a. Enhanced Control

By crafting your own anchor ads, you have complete control over their appearance, placement, and content, ensuring they seamlessly integrate into your website’s design and enhance the user experience.

b. Preservation of User Experience

Manual anchor ads can be carefully positioned to avoid disrupting the main content, providing a non-intrusive advertising experience for your visitors.

c. Strategic Optimization

With manual anchor ads, you can strategically test different sizes, colors, and placements to find the configuration that generates the highest click-through rates and maximizes your AdSense earnings.

My Experience and Results

Since implementing manual anchor ads, I have experienced notable improvements in my AdSense performance. The ability to customize the ad format to match my website’s aesthetic has led to higher user engagement and click-through rates. Moreover, having control over the anchor ads allowed me to fine-tune their placement on pages with high traffic, resulting in increased earnings.

Conclusion

In the realm of online advertising, striking a balance between automation and customization is crucial for website owners. My journey of creating manual anchor ads for AdSense taught me the value of taking control over ad placements and tailoring them to my specific needs. By following the step-by-step guide and leveraging the script provided in this article, you too can unleash the potential of manual anchor ads, enhancing user engagement, maintaining control, and optimizing your AdSense earnings. Remember, every website is unique, so experiment, analyze, and refine your manual anchor ads to achieve the best results for your online platform.