I'm a open source enthusiast, good at front-end development.
- 🌱 I’m currently working in ant financial
- 🏗 Focus on BI and data visualization
- 💬 WeChat:
AnyPlot
- 📫 Ping me by Email
:film_projector: a simple React-component for Google AdSense / Baidu advertisement.
Home Page: https://git.hust.cc/react-adsense
License: MIT License
I'm a open source enthusiast, good at front-end development.
AnyPlot
If you move a lot of pages, there are no more ads.
Google seems to be restricting advertising.
Is there any solution?
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.
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 ?
I keep seeing this error. please how can I fix it.
what's slot?
Would be nice to have an option for enable_page_level_ads: true
so ads can be automatic instead.
没有看到百度联盟的例子
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
Does this package work also with nextjs ? Thanks
slot是什么属性啊,写死的吗?
For my in feed ad i need a data-ad-layout-key
property. How can I set it up?
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 now has automatic responsive ad unit size and there are no props for that yet.
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();
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.
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
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' }}
/>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.