CODEHAMPER

☰ Menu

RESOLVED - Configurando Google Adsense no React / Snap

Fala Jovem,

Se você chegou a este post, ou você esta tentando implementar no seu site e achou este post primeiro, ou tentou usar outro plugin e deu algo errado.

Tentou implementar com react snap também, e na hora do build so erro, bem a solução esta logo abaixo meu amigo.

Primeiro vamos adicionar um script no public/index.html dentro do body:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 

Agora vamos criar um componente, igual o abaixo, basta clicar em gerar um bloco no Google Adsense, e alterar de acordo com sua necessidades. Para adicionar mais de um bloco em uma página (* no caso mais de um anúncio por página ) crie apenas uma vez a chamada componentDidMount dentro de cada page. Feito isto, so adicionar o componente e usar.

import React from "react";

export default class AdsCodeHamper extends React.Component {

  componentDidMount() {
    const snap = navigator.userAgent !== 'ReactSnap';
    const production = process.env.NODE_ENV === 'production';
    if ( production & snap) {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    }
  }

  render() {
    return (
      <div>
       <div className="ad">
        <ins
          className="adsbygoogle"
          style={{ display: "block" }}
          data-ad-client="ca-pub-XXXXXX"
          data-ad-slot="XXXXXXXX"
          data-ad-format="auto"
          data-full-width-responsive="true"
        />
      </div>   
     </div>
     
    );
  }
}

Funciona com react-snap ;)