Best React.js Adsense Components
If you have a blog or web app, one of the ways to monetize it is via Adsense. If you are creating your blog or webapp with React.js then this article is applicable to you.
This article helps with the following concepts:
- How to integrate adsense in react application.
- How to add google ads to a react application.
Slution 1: Use react-adsense
react-adsense is a React-component for Google AdSense advertisement.
How do you install it?
The first step is installation. Install it from npm:
npm install --save react-adsense
How do you use it?
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>Then import react as well as react-adsense:
import React from 'react';
import AdSense from 'react-adsense';Here's how you show ads with not setup:
// ads with no set-up
<AdSense.Google
client='ca-pub-7292810486004926'
slot='7806394673'
/>To show ads with custom format:
// ads with custom format
<AdSense.Google
client='ca-pub-7292810486004926'
slot='7806394673'
style={{ width: 500, height: 300, float: 'left' }}
format=''
/>To show ads responsive and native ads:
// responsive and native ads
<AdSense.Google
client='ca-pub-7292810486004926'
slot='7806394673'
style={{ display: 'block' }}
layout='in-article'
format='fluid'
/>To show auto-full width responsive ads:
// 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:
clientslot
- Optional props:
className:style:layout:layoutKey:format:responsive:
Reference
Read more here.
Solution 2: Use react-adsense
react-adsense is an Adsense component for react.
Install it like this:
npm install @ctrl/react-adsenseUse
Use the standard AdSense code somewhere in your <head></head> as you normally would
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>import React from 'react';
import {Adsense} from '@ctrl/react-adsense';
// ads with no set-up
<Adsense
client="ca-pub-7640562161899788"
slot="7259870550"
/>
// ads with custom format
<Adsense
client="ca-pub-7640562161899788"
slot="7259870550"
style={{ width: 500, height: 300 }}
format=""
/>
// responsive and native ads
<Adsense
client="ca-pub-7640562161899788"
slot="7259870550"
style={{ display: 'block' }}
layout="in-article"
format="fluid"
/>Demo
Check demo here.
Reference
Read more and find example here.
Solution 3: Use React Google Ads
It is a Component for google adsense
Installation
# Installation with package manager
$ yarn add react react-dom react-google-ads
# or..
$ npm i -S react react-dom react-google-adsDevelopment
$ npm run demo- access localhost:8888
Production Bundle
$ npm run bundleHow to Use
Parameters
Here are the applicable parameters:
| Parameter | Type | Remarks |
|---|---|---|
| client | string | Required |
| slot | string | Required |
| style | object | - |
| format | string | default: 'auto' |
Basic Usage
Here is an example of basic usage:
import React from 'react';
import ReactDOM from 'react-dom';
import GoogleAds from '../src';
const appRoot = document.getElementById('google-adsense');
ReactDOM.render(
<GoogleAds
client=""
slot=""
style={{ display: 'inline-block', width: '100%', }}
/>, appRoot
);Reference
You can find reference and code samples here.
Solution 4: Use react-ssr-adsense
A React-ssr-component for Google AdSense。It also supports #nextjs.
Installation
npm install --save react-ssr-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>Usage
Here is an example usage:
import React from 'react';
import AdSense from 'react-ssr-adsense';
// ads with no set-up
<AdSense
client='ca-pub-7292810486004926'
slot='7806394673'
/>
// ads with custom format
<AdSense
client='ca-pub-7292810486004926'
slot='7806394673'
style={{ width: 500, height: 300, float: 'left' }}
format=''
/>
// responsive and native ads
<AdSense
client='ca-pub-7292810486004926'
slot='7806394673'
style={{ display: 'block' }}
layout='in-article'
format='fluid'
/>
// auto full width responsive ads
<AdSense
client='ca-pub-7292810486004926'
slot='7806394673'
style={{ display: 'block' }}
format='auto'
responsive='true'
layoutKey='-gw-1+2a-9x+5c'
/>3. Props
- Required props:
clientslot
- Optional props:
className:style:layout:layoutKey:format:responsive:
Demo
demo: https://www.douyacun.com
Reference
Find full reference here.
Solution 5: Use React Simple AdSense
It is a simple Google AdSense component for React
Installation
npm:
npm i react-simple-adsense
yarn:
yarn add react-simple-adsense
Usage
Here is an example usage:
import React from 'react';
import ReactDOM from 'react-dom';
import GoogleAdSense from 'react-simple-adsense';
ReactDOM.render(
<GoogleAdSense
html={
'<ins class="adsbygoogle"\n' +
'style="display:inline-block;width:728px;height:90px"\n' +
'data-ad-client="YOUT_CLIENT_ID"\n' +
'data-ad-slot="YOUR_AD_SLOT"></ins>'
}
/>,
document.getElementById('root')
);Required Property
| Property Name | Type | Description |
|---|---|---|
| html | string | ins tag code within Google AdSense advertising unit code |
Reference
Find reference here.
Solution 6: Use Google Ad React Component
Start by installing it like this:
npm i --save react-google-adThen include the following in your html:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>Then in our javascript code import it:
import GoogleAd from 'react-google-ad'And use it:
<GoogleAd client="xxx" slot="xxx" format="xxx" />Here are the arguments:
Arguments
- client: the data-ad-client provided by Google
- slot: the data-ad-slot provided by Google
- format: the data-ad-format provided by Google
reference
find reference here.
