google adsense issues in react and nextjs 13 apps

If you are planning to embed Google adsense ads in react or nextjs apps, you can use auto ads from adsense. With auto ads, you will not face any kind of issues with ads.

Auto vs manual ads

There are 2 types of ads that google adsense provides.

• manual - It is not recommended to use manual ads. Also you will face multiple issues when using manual ads in react apps.
• auto - It is recommended to use auto ads.

How to use auto ads

Embedding auto ads in react or any other website is very simple. Just include below script tag in head section of page. Make sure that you are using correct client id in the src.

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

How to use manual ads

Using manual ads involves 3 steps

• load adsense library in head section of html page

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

• add ins element provided by Google where you want to see ad

<!-- responsive manual ad - square -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4354027605173455"
     data-ad-slot="4429111582"
     data-ad-format="auto"
     data-full-width-responsive="true">
</ins>

• execute js to push ad ()

<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

What errors you may encounter when using manual ads in React or nextjs

• ReferenceError: adsbygoogle is not defined error - This error comes when adsense lib is not loaded before pushing the ad. Remember that script that pushes ad must be executed after adsense library has been loaded and executed.

• error: All ins elements in the DOM with class=adsbygoogle already have ads in them - This error occurs if you try to push ad in slot where ad exists already.

Here is a component that you can use to handle both errors.

"use client";
import React from "react";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { usePathname, useSearchParams } from "next/navigation";


const AdsenseComp = () => {
  const router = useRouter();

  const pathname = usePathname();
  const searchParams = useSearchParams();

  if (process.env.NODE_ENV == "development") {
    return <></>;
  }

  useEffect(() => {
    const url = `${pathname}?${searchParams}`;
    console.log("AdsenseComp -> router changed ", url);

    const scriptElement = document.querySelector(
      'script[src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4354027605127587"]'
    );

    const handleScriptLoad = () => {
      try {
        if (window.adsbygoogle) {
          console.log("pushing ads ");
          adsbygoogle.push({});
        } else {
          scriptElement.addEventListener("load", handleScriptLoad);
          console.log("waiting until adsense lib is loaded...This prevents adsbygoogle is not defined error");
        }
      } catch (err) {
        console.log("error in adsense - This prevents ad already exists error", err);
      }
    };

    handleScriptLoad();
    // Wait for script to load

    return () => {
      if (scriptElement) {
        scriptElement.removeEventListener("load", handleScriptLoad);
      }
    };
  }, [pathname, searchParams]);

  return (
    <div style={{ overflow: "hidden", margin: "5px" }}>
      Google Ad block
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client="ca-pub-4354027605127587"
        data-ad-slot="4429111582"
        data-ad-format="auto"
        data-full-width-responsive="true"
      ></ins>
    </div>
  );
};

export default AdsenseComp;