React Google AdSense Component

Uma biblioteca React para integrar anúncios do Google AdSense de forma fácil e declarativa em suas aplicações React e Next.js.

Objetivo

Este projeto fornece um componente React reutilizável que simplifica a exibição de anúncios do Google AdSense em qualquer lugar da sua aplicação. A biblioteca cuida da renderização do elemento HTML necessário e facilita a configuração dos IDs do cliente e do bloco de anúncios.

Funcionalidades

• Componente React <AdSense />: Um componente simples e fácil de usar para exibir anúncios.
• Carregamento Dinâmico do Script: Inclui uma função utilitária para carregar o script do Google Ads sob demanda.
• Configuração via Props: Configure o ID do cliente, ID do bloco de anúncios, formato e responsividade através das props do componente.
• Suporte a Estilos: Permite a aplicação de estilos CSS inline ao contêiner do anúncio.
• Tipado com TypeScript: Garante segurança de tipo e uma melhor experiência de desenvolvimento para usuários de TypeScript.

Instalação

Para instalar a biblioteca no seu projeto React ou Next.js, execute o seguinte comando usando npm:

npm google-ads-config

Configuração Inicial

Primeiro, importe a função loadAdsenseScript e o componente AdSense na sua aplicação:

import { AdSense, loadAdsenseScript } from 'sua-biblioteca';
import { useEffect } from 'react';

function SeuComponente() {
  useEffect(() => {
    // Carregue o script do Google Ads com seu ID de cliente
    loadAdsenseScript('ca-pub-SEU_ID_DE_CLIENTE');
  }, []);

  return (
    <div>
      {/* Outros conteúdos da sua página */}
      <AdSense
        adClient="ca-pub-SEU_ID_DE_CLIENTE"
        adSlot="SEU_ID_DO_BLOCO_DE_ANÚNCIOS"
        style={{ display: 'block', width: '300px', height: '250px' }}
        format="auto"
        responsive="true"
      />
      {/* Mais conteúdo */}
    </div>
  );
}

export default SeuComponente;

Componente AdSense

O componente AdSense aceita as seguintes props:

adClient (obrigatório): Seu ID de cliente do Google AdSense (ex: 'ca-pub-xxxxxxxxxxxxxxxxxxx').

adSlot (obrigatório): O ID do bloco de anúncios que você criou na sua conta do Google AdSense.

style (opcional): Um objeto de estilos CSS inline a ser aplicado ao contêiner div do anúncio.

format (opcional): O formato do anúncio. Pode ser 'auto', 'banner', 'leaderboard', 'responsive' ou 'link'. O padrão é 'auto'.

responsive (opcional): Um booleano (passado como string 'true' ou 'false') indicando se o anúncio deve ser responsivo. O padrão é 'true'. Função loadAdsenseScript(adClient: string): Promise<void | Error> Esta função carrega dinamicamente o script do Google Ads na sua página. Ela recebe o seu adClient como argumento e retorna uma Promise que resolve quando o script é carregado com sucesso ou rejeita com um erro em caso de falha. É recomendável chamar essa função uma vez no nível superior da sua aplicação ou no componente pai onde os anúncios serão exibidos.

Próximos Passos e Contribuições

Este é um projeto em desenvolvimento e futuras funcionalidades podem incluir:

Suporte a mais formatos de anúncios específicos. Gerenciamento de eventos relacionados aos anúncios. Opções de configuração mais avançadas.

Contribuições são bem-vindas! Se você tiver alguma sugestão, encontrar algum problema ou quiser adicionar novas funcionalidades, sinta-se à vontade para abrir uma issue ou enviar um pull request.