How to Add Adsense code in a React Component

At 6/5/2023

Using Google Adsense code in a React application does not require any additional plugin or library. We can directly embed Google Adsense Ad code in a React component and use it to display google ads.

First, we will cover how to use AdSense with React using a package called react-Adsense. In the second part, we will see how to Create AdSense Component without any package.

Google AdSense And React with package

To add Google AdSense code in a React component using react-Adsense , you can follow these steps:

1 - Sign in to your Google AdSense account and create an ad unit if you haven't done so already. Make sure to choose the appropriate ad size and format.

2 - Install the react-adsense package from npm by running the following command in your project directory:

npm install react-adsense

3 - Import the Ad component from react-adsense in the React component where you want to display the ads:

import React from 'react';
import { Ad } from 'react-adsense';

4 - In your component's render method, add the Ad component with the ad unit code and optional ad format:

render() {
  return (
    <div>
      <h1>Your Component</h1>
      <Ad client="YOUR_ADSENSE_CLIENT_ID" slot="YOUR_ADSENSE_SLOT_ID" format="auto" />
    </div>
  );
}

5 - Replace 'YOUR_ADSENSE_CLIENT_ID' with your AdSense client ID and 'YOUR_ADSENSE_SLOT_ID' with your ad unit slot ID. You can find these values in your AdSense account.

The format prop is optional and can be set to different ad formats like "auto", "rectangle", "vertical", etc., depending on your requirements.

Finally, make sure your component is being rendered within a parent component that is wrapped with the GooglePublisherTagProvider from react-adsense. This provider sets up the necessary scripts for AdSense:

import React from 'react';
import { GooglePublisherTagProvider } from 'react-adsense';
class App extends React.Component {
  render() {
    return (
      <GooglePublisherTagProvider adSenseAttributes={{'data-ad-client': 'YOUR_ADSENSE_CLIENT_ID'}}>
        <YourComponent />
      </GooglePublisherTagProvider>
    );
  }
}
export default App;

Replace 'YOUR_ADSENSE_CLIENT_ID' with your AdSense client ID.

That's it! With these steps, you should be able to add AdSense code to a React component using the react-adsense package. Remember to replace the placeholder values with your own AdSense IDs.

Google AdSense And React Without package

If you prefer not to use the react-adsense package, you can manually add the AdSense code snippet to your React component. Here's how you can do it:

1 - Sign up for an AdSense account and obtain your AdSense code snippet.

2 - Create a new React component or open the existing component where you want to add the AdSense code.

3 - In your component file, import the useEffect hook from React:

import React, { useEffect } from 'react';

4 - Create a functional component and use the useEffect hook to load the AdSense script:

const AdComponent = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    script.async = true;
    document.head.appendChild(script);
    return () => {
      document.head.removeChild(script);
    };
  }, []);
  return (
    <div>
      <h1>Your Component</h1>
      <ins className="adsbygoogle"
           style={{ display: 'block' }}
           data-ad-client="YOUR_ADSENSE_CLIENT_ID"
           data-ad-slot="YOUR_ADSENSE_SLOT_ID"
           data-ad-format="auto"
           data-full-width-responsive="true"></ins>
    </div>
  );
};
export default AdComponent;

5 - Replace "YOUR_ADSENSE_CLIENT_ID" and "YOUR_ADSENSE_SLOT_ID" with your actual AdSense client and slot IDs.

6 - In the useEffect hook, a script element is created dynamically and appended to the <head> of the document. The AdSense script is loaded asynchronously. The useEffect hook also includes a cleanup function that removes the script when the component is unmounted.

7 - Inside the component's return statement, use the ins element with the adsbygoogle class to define the ad unit. Set the necessary attributes such as data-ad-client, data-ad-slot, data-ad-format, and data-full-width-responsive according to your AdSense configuration and desired ad settings.

8 - Use the AdComponent in your application wherever you want the AdSense ad to be displayed:

import React from 'react';
import AdComponent from './AdComponent';
const App = () => {
  return (
    <div>
      <h1>Your App</h1>
      <AdComponent />
      {/* Other components */}
    </div>
  );
};
export default App;

By following these steps, you can manually integrate the AdSense code into your React component without relying on the react-adsense package.