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:

  1. How to integrate adsense in react application.
  2. 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:
    • client
    • slot
  • 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-adsense

Use

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-ads

Development

$ npm run demo

Production Bundle

$ npm run bundle

How 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:
    • client
    • slot
  • 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-ad

Then 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.