Next.js Discord

Discord Forum

Loading Ads using the Link Component

Unanswered
ybt747 posted this in #help-forum
Open in Discord
ybt747OP
I have a website monetized using google ads. To Load the main ad script after route change, I am using template.tsx instead of layout.tsx
However even when loading the script after each route change, the ads are not displaying after the first page load or unless I use the "a" tag to navigate which slows down the site. Does anyone know how to solve this?

16 Replies

With that said you can create a new component specifically for rendering your Google ads.
Then import the ad component dynamically in your page components where you want the ads to appear. This ensures that the ad script is loaded only when needed.
You could add the ad script inside components/GoogleAd.js

It should be something like the following
// components/GoogleAd.js
import React, { useEffect } from 'react';

const GoogleAd = () => {
  useEffect(() => {
    // Code to load Google ad script
    // Example: google adsense script
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, []);

  return (
    <div className="ad">
      {/* Placeholder for ad */}
      <ins className="adsbygoogle"
          style={{display: 'block'}}
          data-ad-client="ca-pub-xxxxxxxxxx"
          data-ad-slot="xxxxxxxxxx"
          data-ad-format="auto"></ins>
    </div>
  );
};

export default GoogleAd;
And then
You must use page inside pages
With that you would like to have a file inside pages/yourfile.ts
And do this:
// pages/example.js
import dynamic from 'next/dynamic';

const DynamicGoogleAd = dynamic(() => import('../components/GoogleAd'), { ssr: false });

const ExamplePage = () => {
  return (
    <div>
      {/* Your page content */}
      <h1>This is an example page</h1>
      
      {/* Load ad component dynamically */}
      <DynamicGoogleAd />
    </div>
  );
};

export default ExamplePage;
ybt747OP
Thanks for the suggestion. The script now loads in the network tab consistently and immediately when I navigate using the Link component. However, the ads are still not showing with Link but showing with the "a" tag.
I'm still not sure if the problem is at my end or it's just the nature of the ads and how they only work when a refresh is triggered.
@ybt747 Thanks for the suggestion. The script now loads in the network tab consistently and immediately when I navigate using the Link component. However, the ads are still not showing with Link but showing with the "a" tag. I'm still not sure if the problem is at my end or it's just the nature of the ads and how they only work when a refresh is triggered.
Masai Lion
Make sure that the container elements used to render the ads are consistently visible and accessible in the DOM hierarchy when navigating between pages. If the container element becomes hidden or unmounted during navigation, it may affect the rendering of the ads.
Also make sure to read the Google Ad documentation
I think you shouldn’t use <link> tbh
ybt747OP
I'll try a few more things before giving up on the Link tag. The thing with using the "a" tag is that the component's state does not work properly when loaded. I have to click on the screen to trigger the loading manually. i will try to fix this issue and see if loading with the "a" tag isn't that bad. thanks for the help mate
@Masai Lion Sure! How’s it going?
ybt747OP
Hey, Turns out the issue was from my parent ad network's end and they had to create a custom solution to make it work.