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.

Hide Anchor Ads When Scrolling To The Bottom

If you're running a modern web app like Next.js, React, or Vue, you've probably noticed something strange in your AdSense dashboard:<blockquote>Page views are way lower than expected, but ad impressions seem fine.</blockquote>This isn’t a bug — it’s how AdSense works (or more accurately, how it doesn’t work with SPAs).<figure class="image"><img src="https://images.unsplash.com/photo-1451443700141-5ddb6d85a8fc?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wxNTQwMTB8MHwxfHNlYXJjaHw0N3x8U1BBfGVufDB8fHx8MTc0OTA4NzE1Mnww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@shawneewilborn?utm_source=DNX&amp;utm_medium=referral">shawnee wilborn</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>What AdSense Actually Counts</h3><figure class="table"><table class="ui table celled"><thead><tr><th>Event</th><th>Counts AdSense Page View?</th><th>Counts Ad Impression?</th></tr></thead><tbody><tr><td>Full page reload (hard refresh)</td><td>✅ Yes</td><td>✅ Yes</td></tr><tr><td>SPA route change (no reload)</td><td>❌ No</td><td>✅ Yes (if ad is rendered with <code>push({})</code>)</td></tr></tbody></table></figure><h3>Why AdSense Page Views Are Misleading</h3>AdSense defines a page view as:<blockquote>A full page load where at least one ad is rendered.</blockquote>In SPAs, navigating between pages does not reload the page, so AdSense doesn't increment the page view counter — even if new content is shown and new ads appear.Meanwhile, each time an ad is rendered, it does count as an ad impression, whether or not the URL changed.<h3>The Real Mistake: Calling <code>adsbygoogle.push({})</code> After Route Change</h3>Many developers try this:<pre><code class="language-plaintext">router.events.on('routeChangeComplete', () =&gt; {
 (adsbygoogle = window.adsbygoogle || []).push({});
});
</code></pre>But this doesn't work reliably. Why?Because by the time that push runs, the <code>&lt;ins class="adsbygoogle"&gt;</code> tag might not yet be in the DOM. So nothing renders — no ad, no impression.<h3>✅ The Correct Way: Push Inside the Ad Unit</h3>You should call <code>adsbygoogle.push({})</code> inside your ad component, once it's mounted in the DOM.Here’s a React example:<pre><code class="language-plaintext">import { useEffect, useRef } from "react";

export default function AdUnit({ adClient, adSlot }) {
 const adRef = useRef(null);

 useEffect(() =&gt; {
 if (window.adsbygoogle &amp;&amp; adRef.current) {
 try {
 (window.adsbygoogle = window.adsbygoogle || []).push({});
 } catch (e) {
 console.error("AdSense push failed:", e);
 }
 }
 }, []);

 return (
 &lt;ins
 className="adsbygoogle"
 style={{ display: "block" }}
 data-ad-client={adClient}
 data-ad-slot={adSlot}
 data-ad-format="auto"
 data-full-width-responsive="true"
 ref={adRef}
 /&gt;
 );
}
</code></pre>This ensures:The container is in the DOMAdSense can properly render the unitAn ad impression is counted<h3>So What Should You Care About?</h3>If you're using a SPA, ignore AdSense page views. They are nearly meaningless.Focus on:Ad impressions (what actually earns you money)eCPM based on impressionsMaking sure your ads are visible and filledAnd yes — your AdSense page views will always be underreported unless the user refreshes the entire site.<h3>Final Thoughts</h3>SPAs broke the traditional pageview model years ago. Unfortunately, AdSense still hasn’t caught up. If you're relying on page view metrics to evaluate performance, you’re looking at a distorted picture.Use the metrics that matter: impressions and revenue. Just make sure your ad units mount correctly, push cleanly, and fill reliably.

If you're running a modern web app like Next.js, React, or Vue, you've probably noticed something strange in your AdSense dashboard:
Page views are way lower than expected, but ad impressions seem fine.
This isn’t a bug — it’s how AdSense works (or more accurately, how it doesn’t work with SPAs).

All Posts In Adsense