Google Adsense is the service in charge of advertising and google ads, if we have a website or mobile application with which we want to generate some income, we can then add some google ads. There is a whole process, in summary you must create a Google Adsense account, add the website on it and wait for the verification and approval of Google. Once approved, we can create ads and Google Adsense provides us with HTML and JavaScript code that must be embedded in the pages to display the ad.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0123456789"
crossorigin="anonymous"></script>
<!-- My ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0123456789"
data-ad-slot="9876543210"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>The first part of this code must be placed in the HTML header <head> ... </head> of each page, and the following sections correspond to the ad to be displayed and it is placed anywhere in the body of the html where you want to display the ad. However, when it comes to ReactJS, we use components instead of plain HTML.
Creating the Google Ad react component
For this purpose, we can add a third-party library to the project that already provides support for google ads and use its components. I recommend this article Best React Adsense with examples from some libraries. However, for the sake of knowledge and practicing, let’s create our own Google Ad component.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class GoogleAd extends Component {
googleInit = null;
componentDidMount() {
const { timeout } = this.props;
this.googleInit = setTimeout(() => {
if (typeof window !== 'undefined')
(window.adsbygoogle = window.adsbygoogle || []).push({});
}, timeout);
}
componentWillUnmount() {
if (this.googleInit) clearTimeout(this.googleInit);
}
render() {
const { classNames, slot, googleAdId, style, format } = this.props;
return (
<div className={classNames}>
<ins
className="adsbygoogle"
style={style || { display: 'block', textAlign: "center" }}
data-ad-client={googleAdId}
data-ad-slot={slot}
data-ad-format={format || "auto"}
data-full-width-responsive="true"
></ins>
</div>
);
}
}
GoogleAd.propTypes = {
classNames: PropTypes.string,
slot: PropTypes.string,
timeout: PropTypes.number,
googleAdId: PropTypes.string,
};
GoogleAd.defaultProps = {
classNames: '',
timeout: 200,
};
export default GoogleAd;Then, to use the component, it is only necessary to import the new component and use it as follows <GoogleAd slot="<slotId>" googleAdId="<adsense account id>"/>
import GoogleAd from '/components/GoogleAd';
class MyPage extends React.Component {
render() {
<div>
<!-- More content of the page -->
<GoogleAd slot="9876543210" googleAdId="ca-pub-0123456789"/>
</div>
}
}