I used to have Anchor Ads turned on one of my websites, but I did not like the way it worked. It pushed the page down when the Anchor Ads were shown on the top and pushed the page up when the Anchor Ads were shown on the bottom. &nbsp;And when you clicked the dismissal (close) button, it left a blank space. So I turned it off.<figure class="image"><img src="https://images.unsplash.com/photo-1485700073848-c87ddfa57e02?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw1fHxhbmNob3J8ZW58MHx8fHwxNjY3NzM4NjUz&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@chuttersnap?utm_source=DNX&amp;utm_medium=referral">CHUTTERSNAP</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure>A few days ago, &nbsp;I saw the Anchor Ads were on my website again and realized that Google was trying to do some experiment on my website, so 50% of traffic would see the Anchor Ads. This time, they are overlays, so no page layout shift, i.e., no more Cumulative Layout Shift(CLS.) A day later, Google said:<blockquote>“Good news. The recent experiments below showed positive results and we have applied these changes to your account.”</blockquote>So it's good, and I decided to keep it, but there is one thing that bugs me. Google removes the dismissal button from the Anchor Ads, so the Ads stay on the page bottom and overlay the footer beneath. &nbsp;Although the content on the Footer, like some social links, about me, etc. is not very important, I still want users to be able to see them.&nbsp;I don't find the option to turn on the dismissal (close) button, but figured out the way to fix this by using some custom Javascript.I found out that the class name of the Anchor ads contains “adsbygoogle-noablate”, so the idea is to set the elm.style.display to be “none” when the page is scrolled to the bottom.&nbsp;Googling “how to detect the page scrolled to the bottom”, you may find <a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/9439725/how-to-detect-if-browser-window-is-scrolled-to-bottom">this solution</a>:<pre><code class="language-javascript">window.onscroll = function(ev) {
 if ((window.innerHeight + window.scrollY) &gt;= document.body.offsetHeight) {
 // you're at the bottom of the page
 }
};</code></pre>But it does not work on my page, I think it's because my page has HTML/body set to 100%.<blockquote>&nbsp;Does not work when html/body elements are set to 100% (so that the body fills the entire viewport height)–&nbsp;<a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/users/450398/grodriguez">Grodriguez</a></blockquote>So I have to use a different trick by checking if the Footer div is in the viewport.<pre><code class="language-javascript" id="SYhhcSdt7">function isInViewport(el) {
 const rect = el.getBoundingClientRect();
 return (
 Math.floor(rect.bottom) - 200 &lt;=
 (window.innerHeight || document.documentElement.clientHeight)
 );
}</code></pre>The code is modified from <a target="_blank" rel="noopener noreferrer" href="https://www.javascripttutorial.net/dom/css/check-if-an-element-is-visible-in-the-viewport/">the JS Tutorial</a>. Somehow in my case, <code>rect.bottom </code>is decimal, and always great than <code>window.innerHeight</code>. So I have to use <code>Math.floor()</code>to remove the decimal and make it equal to <code>window.innerHeight</code>when the Footer element is shown. I subtract it by 200 on purpose to make it happen earlier, i.e., when the Footer is still 200px below the viewport, I call it in the viewport. (so I can hide the Anchor Ads slightly before the page is scrolled to the bottom.)I use React, and the component is like the below:<pre><code class="language-javascript" id="qQ_4VKYbz">import React, { useState, useEffect } from "react";
import { Icon } from "semantic-ui-react";

function isInViewport(el) {
 const rect = el.getBoundingClientRect();
 return (
 Math.floor(rect.bottom) - 200 &lt;=
 (window.innerHeight || document.documentElement.clientHeight)
 );
}

const AutoHideAnchorAds = () =&gt; {
 const [showAd, setShowAd] = useState(true);

 useEffect(() =&gt; {
 window.addEventListener("scroll", checkScrollTop);
 return function cleanup() {
 window.removeEventListener("scroll", checkScrollTop);
 };
 });

 const checkScrollTop = () =&gt; {
 if (!showAd &amp;&amp; !isInViewport(document.querySelector("#deniFooter"))) {
 // console.log("showAd"); // show ads when it was not
 if (document.getElementsByClassName("adsbygoogle-noablate").length &gt; 0)
 document.getElementsByClassName(
 "adsbygoogle-noablate"
 )[0].style.display = "block";
 setShowAd(true);
 } else if (showAd &amp;&amp; isInViewport(document.querySelector("#deniFooter"))) {
 // console.log("hideAd"); // hide ads when hit the bottom
 if (document.getElementsByClassName("adsbygoogle-noablate").length &gt; 0)
 document.getElementsByClassName(
 "adsbygoogle-noablate"
 )[0].style.display = "none";
 setShowAd(false);
 }
 };
 return null; //this component does not render anything, you can incorporate it into other component if you want.
};

export default AutoHideAnchorAds;</code></pre>To see how it works, check it out at <a target="_blank" rel="noopener noreferrer" href="https://swimstandards.com/.">https://swimstandards.com/.</a> (Remember to turn off Ad Blocker :-))

Google Adsense's new Anchor Ads are getting better, for it no longer shifts the layout i.e., no more Cumulative Layout Shift(CLS.) But at the same time, it removes the dismissal button, so the Ads stay on the page bottom and overlay the footer beneath. I don't find the option to turn on the dismissal (close) button, but figured out the way to fix this by using some custom Javascript.

All Posts In Adsense