Load the Google AdSense external script to my remix site. #8570

anuragnandi · 2024-01-21T16:31:24Z

anuragnandi
Jan 21, 2024

After going through a lot of hurdles I managed to put on the ads.txt file, robots.txt and dynamic sitemap.xml to my site and they all work flawlessly.

A while back my website was approved by google AdSense for monetization, all I need to do was add a link tag and few scripts tags to my website to get the ads showing. Adding links was very when using remix, the issue comes when I need to load external async scripts.

All I need to add was the script below, but I get a lot of hydration errors:

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

The problem:

The ads do no show, the script has been injected into my app when I see the console, but it does not show any ads. I checked and everything is right on google side, its something wrong when the script is loading. There is something wrong with way I am loading the script.
google also provides 2 optional script + code for the adBlock detection, I cannot put that into remix at all because the js inside the script is not parsed properly, the project doesn't even compile.

What I tried
dangerouslySetInnerHTML: made no difference
adding the script after mount using the useEffect: made no difference
using defer instead of async: made no difference

My code

export const Head = () => {
  return (
    <>
      <meta charSet="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <meta name="google-adsense-account" content="ca-pub-xxxxxxxxxx" />
      <Meta />
      <Links />
      <ColorSchemeScript />
    </>
  );
};
const GoogleScript = () => {
  const [isMounted, setIsMounted] = React.useState(false);
  React.useEffect(() => {
    setIsMounted(true);
  }, []);
  return (
    <>
      {isMounted && (
        <>
          <script
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxx"
            crossOrigin="anonymous"
          ></script>
        </>
      )}
    </>
  );
};

export default function App() {
  const { ENV } = useLoaderData();
  return (
    <html lang="en">
      <head>
        <Head />
        <GoogleScript />
      </head>
      <body itemScope itemType="http://schema.org/WebPage">
          <HeaderMegaMenu />
          <Container
            style={{
              minHeight: "40vh",
            }}
          >
            <ColorSchemeToggle />
            <ScrollRestoration />
            <script
              dangerouslySetInnerHTML={{
                __html: `window.ENV = ${JSON.stringify(ENV)}`,
              }}
            />
            <Scripts />
            <LiveReload />
          </Container>
          <FooterSocial />
      </body>
    </html>
  );
}

update:

export const AdsScript = () => {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    setLoaded(true);
  }, []);

  if (loaded) {
    const headTag = document.querySelector("head");
    const scriptTag = document.createElement("script");

    scriptTag.setAttribute(
      "src",
      "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2669682704362378"
    );
    headTag.appendChild(scriptTag);
    headTag.setAttribute("crossorigin", "anonymous");
    headTag.setAttribute("async", "true");
  }
  return null;
};

when I add the script in the above way. I can see the ads. But I need to reload the page every time. The first time the page loads, the script is not being executed.

Answered by KienTPhan

May 17, 2025

After manually adding the script in a useEffect, I use setTimeout before pushing the ad and this seems to work for me. This is inside a component I made to hold an AdUnit.

const handleAds = () => {
    if (!document.getElementById("adsbygoogleaftermount")) {
      const script = document.createElement("script");
      script.id = "adsbygoogleaftermount";
      script.type = "text/javascript";
      script.async = true;
      script.src =
        "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxx";
      script.crossOrigin = "anonymous";
      document.head.appendChild(script);
    }

    setTimeout(() => {
      // @ts-expect-error adsbygoogle ex…

View full answer

cohenerickson · 2024-01-26T01:07:29Z

cohenerickson
Jan 26, 2024

Running into a similar issue myself, some input by the devs would be appreciated.

0 replies

kiliman · 2024-01-26T15:25:18Z

kiliman
Jan 26, 2024
Maintainer

It seems to me that all you need to do is add your script tag inside the <head> on the root route. There is no client interactivity, so you shouldn't have to worry about mounting, etc.

Do you have a sample repo that I can check out?

// root.tsx

return (
  <html>
    <head>
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
      ...
    </head>
    ...
  </html>
)

1 reply

anuragnandi Jan 26, 2024
Author

Hi Kiliman!
The repo is private but I will try to produce a sample. Meanwhile here are few more details:

The above script tag does have client interactivity, It allows google to basically mount HTML elements to DOM and display ads, all over the site.
After the page opens first time I see that the script tag is present when I put the tag in the Head component, But no ads are mounted. When I quickly refresh or hit the link again via Menu or Breadcrumbs, the script is executing and I see that the ads are mounted.

any suggestions?

cohenerickson · 2024-01-27T00:23:00Z

cohenerickson
Jan 27, 2024

I found an article that explains fairly well the issue that I am facing (but with NextJS), it appears to happen when the adsense script is loaded even without any ad elements, specifically on the Brave browser.

export default function App() {
  return (
    <html lang="en">
      <head>
        <script
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
          crossOrigin="anonymous"
        ></script>
      </head>
      <body>
        {/* <Outlet /> */}
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

https://deniapps.com/blog/unhandled-runtime-error-hydration-and-google-ads-in-nextjs

0 replies

pie0902 · 2025-04-06T08:42:19Z

pie0902
Apr 6, 2025

Hi, I'm having the same problem. Have you found a solution?

0 replies

KienTPhan · 2025-05-17T00:22:40Z

KienTPhan
May 17, 2025

After manually adding the script in a useEffect, I use setTimeout before pushing the ad and this seems to work for me. This is inside a component I made to hold an AdUnit.

const handleAds = () => {
    if (!document.getElementById("adsbygoogleaftermount")) {
      const script = document.createElement("script");
      script.id = "adsbygoogleaftermount";
      script.type = "text/javascript";
      script.async = true;
      script.src =
        "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxx";
      script.crossOrigin = "anonymous";
      document.head.appendChild(script);
    }

    setTimeout(() => {
      // @ts-expect-error adsbygoogle exists
      if (!window.adsbygoogle || initializedRef.current) return; // NOTE: only need to push once

      // @ts-expect-error adsbygoogle exists
      (adsbygoogle = window.adsbygoogle || []).push({});
      initializedRef.current = true;
    }, 200);
  };

  useEffect(() => {
    handleAds();
  }, []);

1 reply

anuragnandi May 17, 2025
Author

works like a charm :)

just wish there was a proper solution or suggestions form the remix team instead of workarounds..

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Load the Google AdSense external script to my remix site. #8570

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 5 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Load the Google AdSense external script to my remix site. #8570

Uh oh!

Uh oh!

anuragnandi Jan 21, 2024

Replies: 5 comments · 2 replies

Uh oh!

Uh oh!

cohenerickson Jan 26, 2024

Uh oh!

kiliman Jan 26, 2024 Maintainer

Uh oh!

anuragnandi Jan 26, 2024 Author

Uh oh!

cohenerickson Jan 27, 2024

Uh oh!

pie0902 Apr 6, 2025

Uh oh!

KienTPhan May 17, 2025

Uh oh!

anuragnandi May 17, 2025 Author

anuragnandi
Jan 21, 2024

Replies: 5 comments 2 replies

cohenerickson
Jan 26, 2024

kiliman
Jan 26, 2024
Maintainer

anuragnandi Jan 26, 2024
Author

cohenerickson
Jan 27, 2024

pie0902
Apr 6, 2025

KienTPhan
May 17, 2025

anuragnandi May 17, 2025
Author