Google DFP / Adsense example

[rickgbw]

Hi everyone! Any suggestion about how implement Google DFP ads properly on nextjs? After some tries, I can't figure the correct way to do this.

[dextermb]

What have you tried?

[rickgbw]

@dextermb, I'm trying something like this (Google DFP):

_document.js:

<script 
    async
    src='https://www.googletagservices.com/tag/js/gpt.js' 
/>
<script
    dangerouslySetInnerHTML={{
        __html: `
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
        `
    }}
/>

banner.js (included in _app.js):

const AD_UNIT_PATH = '<MY_AD_UNIT_PATH>';

class Banner extends React.Component {
    componentDidMount() {
        googletag.cmd.push(function() {
            googletag.defineSlot(AD_UNIT_PATH, [160, 600], 'div-1').addService(googletag.pubads());
            googletag.pubads().enableSingleRequest();
            googletag.enableServices();
        });
        googletag.cmd.push(function() { googletag.display('div-1'); });
    }

    render() {
        return (
            <div id="banner">
		<div id="div-1" style={{ height: '600px', width: '160px' }} />
            </div>
        );
    }
}

export default Banner;

It seems to work sometimes... but not in all cases.

[josephrussell]

I've used this package to serve GPT and DFP with nextjs and its been working pretty well
https://github.com/seeden/react-google-publisher-tag
It has some handy support for responsive layouts and specific ad sizes for mobile screens.

If ads are only showing sometimes I would also recommend looking at the google publisher console if you aren't already. It could be sending the correct request but there is ad returned depending on how you have it set up. This helps make it more clear if its a tag setup issue or an ad server setup issue.
https://support.google.com/dfp_premium/answer/2462712?hl=en

The other thing to look at is getting it to update on a client side route change. You may need to be doing a 'googletag.pubads().refresh([slot])' call somewhere. rect-google-publisher-tag does it for you whenever you change the targeting parameters, I found this to be the simplest way in my case. One of my targeting parameters is different on each route change.

[azza85]

From a quick demo I tried it works when I initially load the page but not when you click through client side routes. I see in this repo react-dfp they seem to mention support of it, this might be a good piece of code to refer to here? https://github.com/jaanauati/react-dfp/blob/master/js/adslot.js#L47

[yxwu]

@josephrussell

How did you use react-google-publisher-tag with next.js ? Thanks

[timneutkens]

Going to close this as it's been open for 1,5 years without progress.

[LuzLabLLC]

Any examples of how to integrate google adsense with Next?

[Ackuq]

I managed to get Adsense ads to work pretty consistently with using the Dyanmic Import and disable SSR for the imported component:

In the ad component:

const FlowAd: React.FC = () => {
  useEffect(() => {
    if (enableAd) {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    }
  }, []);

  return enableAd ? (
    <div className="ad" style={{ textAlign: 'center' }}>
      <ins
        style={{ display: 'block' }}
        data-ad-format="fluid"
        data-ad-layout-key="-fb+5w+4e-db+86"
        data-ad-client="ca-pub-xxxxxxxxxxxxx"
        data-ad-slot="xxxxxxxxxx"
      />
    </div>
  ) : (
    <></>
  );
};

In the index file:

const FlowAd = dynamic<{}>(() => import('./FlowAd'), {
  ssr: false,
});

Hope this helps!

[ernaneluis]

I managed to get Adsense ads to work pretty consistently with using the Dyanmic Import and disable SSR for the imported component:

In the ad component:

const FlowAd: React.FC = () => {
  useEffect(() => {
    if (enableAd) {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    }
  }, []);

  return enableAd ? (
    <div className="ad" style={{ textAlign: 'center' }}>
      <ins
        style={{ display: 'block' }}
        data-ad-format="fluid"
        data-ad-layout-key="-fb+5w+4e-db+86"
        data-ad-client="ca-pub-xxxxxxxxxxxxx"
        data-ad-slot="xxxxxxxxxx"
      />
    </div>
  ) : (
    <></>
  );
};

In the index file:

const FlowAd = dynamic<{}>(() => import('./FlowAd'), {
  ssr: false,
});

Hope this helps!

Where this enableAd coming from?

[Ackuq]

Where this enableAd coming from?

Ah, should've removed that, just a boolean that is set to true on release builds and false on development builds. To not activate ads when im development.

[LinusU]

We are using the following component on a site I manage:

import React, { useEffect } from 'react'

const Ad = ({ slotId, width, height }) => {
  useEffect(() => {
    (window.adsbygoogle = window.adsbygoogle || []).push({})
  }, [])

  return (
    <ins
      className='adsbygoogle'
      style={{ display: 'inline-block', width: `${width}px`, height: `${height}px` }}
      data-ad-client='ca-pub-XXXXXXXXXX'
      data-ad-slot={slotId} />
  )
}

export default Ad

It also requires adding the following to your _document, inside <Head>:

<script async type='text/javascript' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' />

then you can use it as such:

<Ad slotId='XXXXXXXXX' width={728} height={90} />

[qnxdev]

I always get a blank <ins /> tag

Nothing shown in console.

But issues tab show this :

Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests

14 cookies
5 requests

Any idea?

[bitmaks]

We are using the following component on a site I manage:

import React, { useEffect } from 'react'

const Ad = ({ slotId, width, height }) => {
  useEffect(() => {
    (window.adsbygoogle = window.adsbygoogle || []).push({})
  }, [])

  return (
    <ins
      className='adsbygoogle'
      style={{ display: 'inline-block', width: `${width}px`, height: `${height}px` }}
      data-ad-client='ca-pub-XXXXXXXXXX'
      data-ad-slot={slotId} />
  )
}

export default Ad

It also requires adding the following to your _document, inside <Head>:

<script async type='text/javascript' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' />

then you can use it as such:

<Ad slotId='XXXXXXXXX' width={728} height={90} />

This works perfectly for me, on a GatsbyJS site hosted on Vercel

[nikitauskas]

I always get a blank <ins /> tag

Nothing shown in console.

But issues tab show this :

Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests

14 cookies
5 requests

Any idea?

same problem...
Did you manage to find solution for this issue?

thanks

[qnxdev]

I always get a blank <ins /> tag
Nothing shown in console.
But issues tab show this :
Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests
14 cookies
5 requests
Any idea?

same problem...
Did you manage to find solution for this issue?

thanks

Nope

[JonatanSalas]

At BlackBox Vision we've been using next a lot to build news sites, today we've released a library (really younger, can have bugs) to support DFP.

https://github.com/BlackBoxVision/next-google-dfp

We're in the works for an ad-sense library too, releasing a few components from another news media site that we've developed.

When both libraries reach stable, we're going to make some PRs in next examples folder!

[rserafim]

At BlackBox Vision we've been using next a lot to build news sites, today we've released a library (really younger, can have bugs) to support DFP.

https://github.com/BlackBoxVision/next-google-dfp

We're in the works for an ad-sense library too, releasing a few components from another news media site that we've developed.

When both libraries reach stable, we're going to make some PRs in next examples folder!

And in issues of page speed (performance) how was it?

[JonatanSalas]

@rserafim we've been working on lazy-load support for DFP following the best practices, and it works pretty well. The library still needs work to reach and stable v1 and support all the use-cases.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.