Google Adsense es el servicio encargado de la publicidad y anuncios de google, si tenemos un sitio web o aplicación mobile con el cual queremos generar algunos ingresos, podemos entonces agregar algunos anuncios de google. Para ello hay todo un proceso, en resumen se debe crear una cuenta de Google Adsense, agregar el sitio web y esperar la verificación y aprobación de google. Una vez aprobado, podemos crear anuncios y Google Adsense nos proporciona un código HTML y JavaScript que se debe incrustar en las páginas para mostrar el anuncio.
<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>La primera parte de ese código debe de colocarse en la cabecera de HTML <head> ... </head> de dicha página, y las siguientes secciones, corresponde al anuncio a mostrar y se coloca en cualquier parte del cuerpo del html en donde se quiere desplegar el anuncio. Sin embargo, en ReactJS no se trabaja con HTML plano en su lugar utilizamos Componentes.
Creando un componente Google Ad
Para esto, podemos agregar alguna librería de un tercero al proyecto que ya proporcione soporte para google ads y utilizar sus componentes. Les recomiendo este artículo Best React Adsense con ejemplos de algunas librerías. Sin embargo, en aras de aprendizaje y conocimiento, vamos a crear nuestro propio componente.
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;Luego, para utilizar el componente solamente es necesario importar el nuevo component y utilizarlo de la siguiente manera <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>
}
}