Integrar anúncios em aplicações Angular exige uma abordagem diferente de sites estáticos. Como o Angular não recarrega a página inteira durante a navegação, precisamos de técnicas específicas para garantir que os anúncios sejam exibidos corretamente. Abaixo, mostramos como implementar dois dos formatos mais rentáveis: o Banner e o Social Bar.

1. Banner Estático vs. Social Bar: Qual escolher? Link para o cabeçalho

Para aplicações como jogos de bingo ou ferramentas interativas, a escolha do formato impacta diretamente a experiência do usuário (UX) e o faturamento (CPM).

  • Social Bar: É o formato “campeão” para mobile e SPAs. Ele flutua sobre o conteúdo como uma notificação, não ocupa espaço fixo no layout e é totalmente responsivo.

  • Banner: Ideal para desktops. Oferece um visual profissional em áreas vazias (laterais ou topo), mas pode quebrar o layout em telas pequenas se não for bem gerenciado.

Estratégia Recomendada: Utilize o Social Bar para todos os dispositivos e o Banner exclusivamente para usuários de desktop.

2. Configuração Global e Social Bar Link para o cabeçalho

O Social Bar deve ser carregado uma única vez no arquivo principal da aplicação para que funcione de forma independente das rotas do Angular.

Passo a Passo: Link para o cabeçalho

No painel do Adsterra, gere o código para o Social Bar.

No seu projeto Angular, abra o arquivo src/index.html.

Cole o script antes do fechamento da tag </body>.

<body>
  <app-root></app-root>
  <script type='text/javascript' src='//plXXXXXXX.js'></script>
</body>

3. Criando um Componente para Banners (Desktop Only) Link para o cabeçalho

Para evitar que scripts de banners poluam o código ou falhem durante a navegação entre componentes, criamos um Componente de Anúncio dedicado.

O Código do Componente (ads-slot.ts) Link para o cabeçalho

Este componente detecta se o ambiente é local (para não gerar erros de script bloqueado) e injeta o anúncio dinamicamente.

import { Component, Input, isDevMode, ElementRef, Renderer2, ViewChild, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-ads-slot',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="ad-wrapper" [style.max-width.px]="width" [style.height.px]="height">
      <div #adContainer></div>
      @if (isLocal) {
        <div class="ad-mock">
          <span>ADSTERRA MOCK ({{width}}x{{height}})</span>
        </div>
      }
    </div>
  `,
  styleUrls: ['./ads-slot.css']
})
export class AdsSlotComponent implements AfterViewInit {
  @Input() width: string = '728';
  @Input() height: string = '90';
  
  // Centralização da chave de anúncio
  adKey: string = 'SUA_CHAVE_AQUI'; 

  @ViewChild('adContainer') adContainer!: ElementRef;
  isLocal = isDevMode();

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    if (!this.isLocal) {
      this.injectScript();
    }
  }

  private injectScript() {
    const scriptConfig = this.renderer.createElement('script');
    scriptConfig.text = `atOptions = { 'key' : '${this.adKey}', 'format' : 'iframe', 'height' : ${this.height}, 'width' : ${this.width}, 'params' : {} };`;
    this.renderer.appendChild(this.adContainer.nativeElement, scriptConfig);

    const scriptInvoke = this.renderer.createElement('script');
    scriptInvoke.src = `//www.highperformanceformat.com/${this.adKey}/invoke.js`;
    this.renderer.appendChild(this.adContainer.nativeElement, scriptInvoke);
  }
}

4. Garantindo a Responsividade Link para o cabeçalho

Para que o banner não “vaze” para fora da tela em dispositivos móveis ou telas pequenas, utilizamos Media Queries no CSS para ocultar o banner quando o espaço for insuficiente, deixando a monetização por conta do Social Bar.

/* ads-slot.css */
.ad-wrapper {
  margin: 10px auto;
  display: flex;
  justify-content: center;
  background-color: #f0f0f0;
  width: 100%;
}

.ad-mock {
  width: 100%;
  height: 100%;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

/* Esconder em Mobile */
@media (max-width: 768px) {
  :host {
    display: none;
  }
}
  1. Publicação e Validação (ads.txt)

Após integrar o código, o último passo crucial para garantir o recebimento dos pagamentos é a configuração do arquivo de autorização de vendedores.

Crie um arquivo chamado ads.txt na pasta src/assets/.

Cole as linhas fornecidas pelo Adsterra.

Verifique no seu angular.json se a pasta assets está incluída no build.

Após o deploy no Firebase (ou outro host), verifique se o arquivo está acessível em seudominio.com/ads.txt.

Conclusão Link para o cabeçalho

Ao utilizar um componente dedicado para banners e o script global para o Social Bar, você cria uma estrutura de monetização robusta e escalável no Angular. Isso permite que você foque no desenvolvimento das funcionalidades da sua aplicação enquanto os anúncios rodam de forma otimizada para cada tipo de usuário.