I am trying to reload the ad script on each page, but it only works when I refresh the page. So, I see the ad showing only when the page is refreshed. Have a look at the code:

"use client" import { usePathname } from "next/navigation"; import { useEffect } from "react"; export function LoadAd() { useEffect(() => { const pathname = usePathname(); const script = document.createElement("script"); script.src = "//pl22500737.profitablegatecpm.com/1c8566c67a4bf36055e7f55caabeabb0/invoke.js"; script.async = true; document.body.appendChild(script); return () => { script.remove(); }; }, [pathname]); return ( null ); }

In the component where I want to show ad:
const Home = () => { <div className="mx-auto max-[350px]:hidden w-[300px] h-72 max-h-72" id="container-1c8566c67a4bf36055e7f55caabeabb0"></div> ); }; export default Home;

I'm importing the LoadAd component in the app's root directory (page.js). I have tried using next's usePathname to force reload, but it did not work.

If you want to see the issue live, what is happening here is the live version: (https://calculatecgpa.com)

Go to the fact of the day page and come back home. You will see the ad below is not showing.