Integrar o Google Analytics em uma aplicaĆ§Ć£o moderna, nĆ£o serve apenas para contar visitas. Ɖ a ferramenta essencial para entender a retenĆ§Ć£o de usuĆ”rios e validar a eficĆ”cia da monetizaĆ§Ć£o.

1. Por que usar o GA4 em sua aplicaĆ§Ć£o? Link para o cabeƧalho

Diferente de sites estƔticos, muitas vezes aplicaƧƵes de angular dependem de eventos. O GA4 permite medir:

  • Engajamento Real: Quantas aƧƵes foram executadas.

  • ConversĆ£o: Quantos usuĆ”rios clicaram no botĆ£o que vocĆŖ quer monitorar a aĆ§Ć£o.

  • Performance de AnĆŗncios: A correlaĆ§Ć£o entre o tempo em alguma tela e os cliques nos banners do Ads, por exemplo.

2. ConfiguraĆ§Ć£o da Propriedade Link para o cabeƧalho

Antes do cĆ³digo, a configuraĆ§Ć£o no painel do Google Analytics deve refletir o domĆ­nio profissional:

  1. Fluxo de Dados: Configure a URL da sua aplicaĆ§Ć£o para https://seudominio.com.br.

  2. ID de Medida: Obtenha o seu ID exclusivo (ex: G-Z546VG772M).

  3. ConfiguraĆ§Ć£o de DomĆ­nios: Inclua o domĆ­nio do Firebase (.web.app) e o domĆ­nio oficial para evitar fragmentaĆ§Ć£o de dados.

3. ImplementaĆ§Ć£o TĆ©cnica no Angular 21 Link para o cabeƧalho

Em arquiteturas Standalone, o uso de mĆ³dulos clĆ”ssicos deve ser adaptado atravĆ©s do importProvidersFrom.

InstalaĆ§Ć£o

npm install ngx-google-analytics --legacy-peer-deps

ConfiguraĆ§Ć£o de Providers (app.config.ts)

A ponte entre o modelo de mĆ³dulos da biblioteca e o sistema de injeĆ§Ć£o de dependĆŖncia do Angular 21:

import { importProvidersFrom } from '@angular/core';
import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-google-analytics';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      NgxGoogleAnalyticsModule.forRoot('SEU CƓDIGO, EXE: G-Z546VG772M'),
      NgxGoogleAnalyticsRouterModule
    )
  ]
};

4. Rastreamento de Eventos Customizados Link para o cabeƧalho

Para uma aplicaĆ§Ć£o de jogos, por exemplo, o ā€œPage Viewā€ Ć© insuficiente. Precisamos rastrear aƧƵes crĆ­ticas dentro do componente de jogo.

import { inject } from '@angular/core';
import { GoogleAnalyticsService } from 'ngx-google-analytics';

export class JogoComponent {
  private gaService = inject(GoogleAnalyticsService);

  // Exemplo de rastreio quando o usuƔrio completa o Bingo
  registrarVitoria() {
    this.gaService.event('bingo_vitoria', 'gameplay', 'Cartela Cheia');
  }
}

5. ValidaĆ§Ć£o da ImplementaĆ§Ć£o Link para o cabeƧalho

Para garantir que os dados estĆ£o sendo enviados sem precisar esperar 24 horas:

  1. Abra o Chrome DevTools (F12) > Aba Network.

  2. Filtre pela palavra-chave collect.

  3. Interaja com o site e verifique se as requisiƧƵes para o domĆ­nio do Google Analytics estĆ£o ocorrendo com status 200 OK.

ConclusĆ£o Link para o cabeƧalho

Com o GA4 rodando sob o domĆ­nio da sua aplicaĆ§Ć£o, ex.: suaaplicacao.com.br, o projeto ganha maturidade analĆ­tica. O prĆ³ximo passo lĆ³gico para aumentar o alcance orgĆ¢nico Ć© a otimizaĆ§Ć£o de busca.