How to Add a Fully Responsive Floating Google AdSense Ad to Your Website

Monetizing your website with Google AdSense is one of the most effective ways to earn passive income online. However, the placement and visibility of ads can significantly affect your earnings. If you want a lightweight, mobile-friendly, and accessible floating ad unit, this guide will help you integrate one easily into any website.

Fully responsive floating Google AdSense ad example on website — A live example of the fully responsive and accessible floating Google AdSense unit created by IIUO.org.

Step-by-Step Setup

Follow these simple steps carefully to add the floating AdSense unit to your site. The setup takes just a few minutes and requires no external libraries or frameworks—only clean, optimized HTML and JavaScript.

First, make sure your website includes the official AdSense script inside the <head> section:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXX"></script>

Replace the ca-pub-XXXXXXXXXXXXXXX with your own publisher ID, which you can find in your AdSense account.

Step 2: Add the Floating Ad Unit Code

Now, place this code just before the closing </body> tag of your website:

<!-- Floating Responsive AdSense Ad -->
<div
  id="floatAd"
  role="region"
  aria-label="Advertisement"
  aria-live="polite"
  tabindex="0"
  style="position:fixed;z-index:2147483647;display:flex;flex-direction:column;align-items:flex-end;outline:none;max-width:90vw;margin:0;padding:0;box-sizing:border-box;"
>
  <button
    id="adCloseBtn"
    aria-label="Close advertisement"
    title="Close advertisement"
    style="border:none;background:rgba(0,0,0,0.6);color:#fff;padding:3px;font-size:11px;cursor:pointer;line-height:1;transition:background 0.3s ease;"
  >
    ✕
  </button>
  <ins
    class="adsbygoogle"
    aria-hidden="true"
    style="display:block;width:300px;max-width:100%;height:auto;"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
    data-ad-slot="XXXXXXXXXX"
    data-ad-format="auto"
    data-full-width-responsive="true"
  ></ins>
</div>
<script>/*<![CDATA[*/
  (function(){
    const ad=document.getElementById('floatAd');
    const btn=document.getElementById('adCloseBtn');
    const safeZone=12;
    function randomPosition(){
      const vw=window.innerWidth,vh=window.innerHeight;
      const positions=[
        {top:safeZone+"px",left:safeZone+"px"},
        {top:safeZone+"px",right:safeZone+"px"},
        {bottom:safeZone+"px",left:safeZone+"px"},
        {bottom:safeZone+"px",right:safeZone+"px"},
        {top:"50%",left:"50%",transform:"translate(-50%,-50%)"}
      ];
      if(vw<420){
        return {bottom:safeZone+"px",left:"50%",right:"auto",top:"auto",transform:"translateX(-50%)"};
      }
      return positions[Math.floor(Math.random()*positions.length)];
    }
    function applyPosition(){
      Object.assign(ad.style,randomPosition());
      ad.style.maxWidth=window.innerWidth<420?"90vw":"320px";
    }
    function renderAd(){
      try{(adsbygoogle=window.adsbygoogle||[]).push({});}
      catch(e){setTimeout(renderAd,500);}
    }
    applyPosition();
    renderAd();
    ad.style.opacity=0;
    ad.style.transition="opacity 0.4s ease";
    setTimeout(()=>{ad.style.opacity=1;},100);
    btn.addEventListener("click",()=>ad.remove());
    document.addEventListener("keydown",e=>{if(e.key==="Escape"){ad.remove();}});
    window.addEventListener("resize",applyPosition);
    window.addEventListener("orientationchange",applyPosition);
  })();
/*]]>*/</script>

This code automatically:

Displays the ad in a random corner of the screen
Keeps it centered on mobile devices
Lets users close it with a button or Escape key
Repositions dynamically when the screen size changes

Replace the placeholders below with your actual AdSense details:

data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"

These values can be found in your Google AdSense dashboard under your ad unit settings.

Done

After saving the changes and reloading your site, you will see your new floating ad appear. It is fully responsive, non-intrusive, and compliant with AdSense policies.

Tips for Better Performance

Use only one floating ad per page (as per AdSense policy).
Make sure the ad does not overlap important content.
Test your layout on both mobile and desktop devices.
Track results regularly through the AdSense Reports section.

Features

Fully responsive and mobile-optimized
Accessible and screen-reader friendly
Randomized position logic for better visibility
Smooth fade-in animation
Lightweight and framework-free

License

Created by: IIUO.org
GitHub: https://github.com/iiuo-org/responsive-floating-adsense