hustcc / react-adsense

:film_projector: a simple React-component for Google AdSense / Baidu advertisement.

react-adsense

react-adsense is a React-component for Google AdSense / Baidu advertisement.

1. Install

npm install --save react-adsense

Before use Google AdSense, you should add the script at the end of HTML.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

2. Usage

import React from 'react';
import AdSense from 'react-adsense';

// ads with no set-up
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
/>

// ads with custom format
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ width: 500, height: 300, float: 'left' }}
  format=''
/>

// responsive and native ads
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  layout='in-article'
  format='fluid'
/>

// auto full width responsive ads
<AdSense.Google
  client='ca-pub-7292810486004926'
  slot='7806394673'
  style={{ display: 'block' }}
  format='auto'
  responsive='true'
  layoutKey='-gw-1+2a-9x+5c'
/>

3. Props

• Required props:
  • client
  • slot
• Optional props:
  • className:
  • style:
  • layout:
  • layoutKey:
  • format:
  • responsive:

4. TODO

• Baidu advertisement supported.

LICENSE

MIT@hustcc.

react-adsense's Issues

the server responded with a status of 400 () ads:1

I have this problem.
I put <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> in index.html file.
and make page and add this adsense like this
<AdSense.Google
client='pub-1234567890'
slot='45678912'
style={{ display: 'block' }}
layout='in-article'
format='fluid'
/>
then the server responded => Failed to load resource: the server responded with a status of 400 () ads:1
Anyone can help me? Thanks.

React Adsense with Gatsby

Hi!

I have added the <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> before </div> in the layout component.

And <ReactAdsense /> to blog-post to get ads inside the posts.

Inside the ReactAdsense component I didn't type any slot id because I do not have one.
I'm still in the approval stage.

Repo: ABCrypto

alternative with more options

Hi I created year ago react adsense component which you are able to use also in the responsive page. Maybe you can use it https://github.com/seeden/react-google-publisher-tag and help us too

Adsense stops loading ads after couple of clientside page navigations

When switching pages in my nextjs blog using client side routing, it seems after a few navigations the ads are not showing anymore.

A full page reload resolves this.

I think this is caused by having a maximum number of ads loaded. Probably each navigation needs to do some cleanup on the window object so it behaves like a full page reload.

Anyone else experienced this?

Maybe we need to include some examples for nextjs _app.js or something on how to resolve this.

e.g. This is code I already have in my _app.js, but not sure how to fix google adsense.

export default function App({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      console.log(`navigated: ${url}`);
      gtag.pageview(url); // this does the google-analytics pageview tracking.
      // do something with the googleadsense stuff to make it behave like a full page reload.
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

.........
left for brevity
....

We might also offer a React hook like useAdsense() with instructions on where to add the hook in a nextjs app and where to add it in a plain react app etc.

Hello how can i fix this error "dsbygoogle.push() error: No slot size for availableWidth=0"

I keep seeing this error. please how can I fix it.

advertising restrictions

If you move a lot of pages, there are no more ads.

Google seems to be restricting advertising.

Is there any solution?

How to add the size mapping?

Something like device specific?

.addSize([1300, 1024], [[728, 90]]) 
.addSize([1025, 768], [[728, 90]]) 
.addSize([916, 690], [[728, 90]])  
.addSize([768, 1024], [[728, 90]]) 
.addSize([580, 480], [[234, 60], [300, 250], [300, 100]])  
.addSize([480, 768], [[234, 60], [300, 250], [300, 100]])  
.addSize([360, 640], [[234, 60], [300, 250], [300, 100]]) 
.addSize([320, 560], [[234, 60]]) 
.addSize([0, 0], [[234, 60], [300, 250], [300, 100]])  
 .build();

slot

what's slot?

Page Level Ads

Would be nice to have an option for enable_page_level_ads: true so ads can be automatic instead.

Error when switching sites: availableWidth=0

I get this error on every first load of the page. On any other re-mount or reload it will work.
I set min-width for the container of the add. But i think the problem is, that "window.adsbygoogle = window.adsbygoogle || []).push({})" starts to early, not after finished load of the page.

message: "adsbygoogle.push() error: No slot size for availableWidth=0"
name: "TagError"
pbr: true
stack: "TagError: adsbygoogle.push() error: No slot size for availableWidth=0↵ at Zg (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:17:7433)↵

你好，支持最新的Google AdSense 自动广告吗

支持最新版Google Adsense 自动广告（2019年10月11日更新） 吗？

关于props slot

slot是什么属性啊，写死的吗？

working with nextjs ?

Does this package work also with nextjs ? Thanks

Please write a caution note.

Hello.
Please write a caution note that when I or someone use the "react-adsense" and use the style(ex style={{ width: 500, height: 300, float: 'left' }}" and so on),it needs to write format =""`.
I didn't that, so I wrote as follows.(It made a error messge.)

<AdSense.Google
client='ca-pub-7292810486004926'
slot='7806394673'
style={{ width: 500, height: 300, float: 'left' }}
/>

How to refresh an adsense unit when route changes ?

Hi,
I use your package to display adsense units on my react app.
This works very well the first time the page load but I don't find the way to force units to be refreshed when route changes.

Using componentDidMount is ok to load the (adsbygoogle = window.adsbygoogle || []).push({}) part of adsense snippet. But as componentDidMount is only called once, units are never refreshed unless the whole page is reloaded by a cmd(or CTRL)-R.

I guess componentDidUpdate should be used here, but calling another (adsbygoogle = window.adsbygoogle || []).push({}) leads to Adsense error :

adsbygoogle.push() error: All ins elements in the … with class=adsbygoogle already have ads in them...

Any idea how to handle that ?

data-ad-layout-key property missing

For my in feed ad i need a data-ad-layout-key property. How can I set it up?

没有看到百度联盟的例子

没有看到百度联盟的例子

no props for data-full-width-responsive

Google Adsense now has automatic responsive ad unit size and there are no props for that yet.