valtech-components 2.0.687 → 2.0.689

package/src/lib/services/ads/ads-consent.service.ts

@@ -0,0 +1,166 @@
+/**
+ * Ads Consent Service
+ *
+ * Integra el servicio de Ads con el Consent Mode v2 existente en AnalyticsService.
+ * Proporciona estado de consent especifico para ads (advertising).
+ */
+
+import { Injectable, Injector, PLATFORM_ID, inject, signal, computed, effect } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { AdsConsentState } from './types';
+
+/**
+ * Servicio que maneja el consent para ads.
+ *
+ * Se integra con AnalyticsService para reutilizar el estado de consent GDPR.
+ * Si AnalyticsService no esta disponible, usa valores por defecto conservadores.
+ */
+@Injectable({ providedIn: 'root' })
+export class AdsConsentService {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly injector = inject(Injector);
+
+  // Cache del estado de consent
+  private readonly _consentState = signal<AdsConsentState>({
+    adStorage: false,
+    adPersonalization: false,
+    adUserData: false,
+  });
+
+  /** Estado de consent para ads (readonly) */
+  readonly adsConsentState = this._consentState.asReadonly();
+
+  /** Indica si se pueden mostrar ads (al menos consent basico) */
+  readonly canShowAds = computed(() => {
+    // Siempre permitimos mostrar ads (pueden ser no personalizados)
+    // El control real esta en canPersonalize
+    return true;
+  });
+
+  /** Indica si se pueden mostrar ads personalizados */
+  readonly canPersonalize = computed(() => {
+    const state = this._consentState();
+    return state.adStorage && state.adPersonalization && state.adUserData;
+  });
+
+  private analyticsService: unknown = null;
+  private consentSyncInterval: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    if (isPlatformBrowser(this.platformId)) {
+      this.initializeConsentSync();
+    }
+  }
+
+  /**
+   * Inicializa la sincronizacion con AnalyticsService.
+   */
+  private initializeConsentSync(): void {
+    // Intentar obtener AnalyticsService de forma lazy
+    // Usamos setTimeout para dar tiempo a que se inicialice
+    setTimeout(() => {
+      this.syncWithAnalyticsConsent();
+    }, 100);
+
+    // Re-sincronizar periodicamente por si el usuario cambia consent
+    this.consentSyncInterval = setInterval(() => {
+      this.syncWithAnalyticsConsent();
+    }, 5000);
+  }
+
+  /**
+   * Sincroniza el estado de consent desde AnalyticsService.
+   */
+  private async syncWithAnalyticsConsent(): Promise<void> {
+    try {
+      // Importar AnalyticsService dinamicamente
+      const { AnalyticsService } = await import('../firebase/analytics.service');
+
+      if (!this.analyticsService) {
+        this.analyticsService = this.injector.get(AnalyticsService, null);
+      }
+
+      if (this.analyticsService) {
+        // AnalyticsService expone consentState como signal
+        const consentState = (this.analyticsService as { consentState: () => { settings: Record<string, boolean | undefined> } }).consentState();
+        this.updateFromAnalyticsConsent(consentState.settings);
+      }
+    } catch {
+      // AnalyticsService no disponible - usar defaults
+      this.setDefaultConsent();
+    }
+  }
+
+  /**
+   * Actualiza el estado de consent desde AnalyticsService.
+   */
+  private updateFromAnalyticsConsent(settings: Record<string, boolean | undefined>): void {
+    const hasAdvertisingConsent = settings['advertising'] === true;
+
+    this._consentState.set({
+      adStorage: hasAdvertisingConsent,
+      adPersonalization: hasAdvertisingConsent,
+      adUserData: hasAdvertisingConsent,
+    });
+  }
+
+  /**
+   * Establece consent por defecto (sin datos personales).
+   */
+  private setDefaultConsent(): void {
+    this._consentState.set({
+      adStorage: false,
+      adPersonalization: false,
+      adUserData: false,
+    });
+  }
+
+  /**
+   * Actualiza manualmente el consent para ads.
+   * Usar cuando el usuario actualiza sus preferencias directamente.
+   *
+   * @param consent - Nuevo estado de consent parcial
+   */
+  updateConsent(consent: Partial<AdsConsentState>): void {
+    this._consentState.update((current) => ({
+      ...current,
+      ...consent,
+    }));
+
+    // Notificar a GPT si ya esta cargado
+    this.applyConsentToGPT();
+  }
+
+  /**
+   * Aplica el estado de consent actual a GPT.
+   */
+  applyConsentToGPT(): void {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    const googletag = window.googletag;
+    if (!googletag) return;
+
+    googletag.cmd.push(() => {
+      const canPersonalize = this.canPersonalize();
+      // 0 = personalized, 1 = non-personalized
+      googletag.pubads().setRequestNonPersonalizedAds(canPersonalize ? 0 : 1);
+    });
+  }
+
+  /**
+   * Obtiene el estado actual de consent.
+   */
+  getConsentState(): AdsConsentState {
+    return this._consentState();
+  }
+
+  /**
+   * Destruye el servicio y limpia recursos.
+   */
+  destroy(): void {
+    if (this.consentSyncInterval) {
+      clearInterval(this.consentSyncInterval);
+      this.consentSyncInterval = null;
+    }
+  }
+}

package/src/lib/services/ads/ads-loader.service.ts

@@ -0,0 +1,133 @@
+/**
+ * Ads Loader Service
+ *
+ * Maneja la carga lazy del script de Google AdSense.
+ * Solo carga el script cuando se necesita el primer ad.
+ */
+
+import { Injectable, Inject, PLATFORM_ID, signal } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+import { VALTECH_ADS_CONFIG } from './config';
+import { ValtechAdsConfig } from './types';
+
+/** URL del script AdSense */
+const ADSENSE_SCRIPT_URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
+
+/**
+ * Servicio para cargar el script de Google AdSense.
+ *
+ * Implementa lazy loading: el script solo se carga cuando
+ * se solicita renderizar el primer ad slot.
+ */
+@Injectable({ providedIn: 'root' })
+export class AdsLoaderService {
+  private readonly _isLoading = signal<boolean>(false);
+  private readonly _isLoaded = signal<boolean>(false);
+  private readonly _error = signal<Error | null>(null);
+
+  /** Indica si el script esta cargando */
+  readonly isLoading = this._isLoading.asReadonly();
+
+  /** Indica si el script esta cargado */
+  readonly isLoaded = this._isLoaded.asReadonly();
+
+  /** Error de carga (si existe) */
+  readonly error = this._error.asReadonly();
+
+  private loadPromise: Promise<boolean> | null = null;
+
+  constructor(
+    @Inject(VALTECH_ADS_CONFIG) private config: ValtechAdsConfig,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {}
+
+  /**
+   * Carga el script AdSense de forma lazy.
+   * Retorna true si se cargo correctamente, false si fallo.
+   *
+   * @returns Promise<boolean>
+   */
+  loadAdSense(): Promise<boolean> {
+    // SSR check
+    if (!isPlatformBrowser(this.platformId)) {
+      return Promise.resolve(false);
+    }
+
+    // Ya cargado
+    if (this._isLoaded()) {
+      return Promise.resolve(true);
+    }
+
+    // Ya hay una carga en progreso
+    if (this.loadPromise) {
+      return this.loadPromise;
+    }
+
+    this._isLoading.set(true);
+    this._error.set(null);
+
+    this.loadPromise = new Promise<boolean>((resolve) => {
+      // Inicializar adsbygoogle array
+      window.adsbygoogle = window.adsbygoogle || [];
+
+      // Crear script
+      const script = document.createElement('script');
+      script.async = true;
+      script.src = ADSENSE_SCRIPT_URL;
+      script.crossOrigin = 'anonymous';
+
+      // Agregar data-ad-client (Publisher ID)
+      script.setAttribute('data-ad-client', this.config.adClient);
+
+      // Test mode para desarrollo
+      if (this.config.testMode) {
+        script.setAttribute('data-adtest', 'on');
+      }
+
+      script.onload = () => {
+        this._isLoaded.set(true);
+        this._isLoading.set(false);
+
+        if (this.config.debugMode) {
+          console.log('[ValtechAds] Script AdSense cargado', {
+            adClient: this.config.adClient,
+            testMode: this.config.testMode,
+          });
+        }
+
+        resolve(true);
+      };
+
+      script.onerror = (error) => {
+        console.error('[ValtechAds] Error cargando AdSense:', error);
+        this._error.set(new Error('Error cargando Google AdSense'));
+        this._isLoading.set(false);
+        this.loadPromise = null;
+        resolve(false);
+      };
+
+      // Insertar script en head
+      document.head.appendChild(script);
+    });
+
+    return this.loadPromise;
+  }
+
+  /**
+   * Verifica si el script AdSense esta disponible.
+   */
+  isAdSenseAvailable(): boolean {
+    return isPlatformBrowser(this.platformId) && !!window.adsbygoogle && this._isLoaded();
+  }
+
+  /**
+   * Ejecuta un comando AdSense (push a la queue).
+   * Usado internamente para activar ad slots.
+   */
+  pushAdCommand(): void {
+    if (this.isAdSenseAvailable() && window.adsbygoogle) {
+      window.adsbygoogle.push({});
+    }
+  }
+}

package/src/lib/services/ads/ads.service.ts

@@ -0,0 +1,268 @@
+/**
+ * Ads Service
+ *
+ * Servicio principal para Google AdSense.
+ * Integra con el sistema de auth para detectar usuarios premium.
+ */
+
+import { Inject, Injectable, PLATFORM_ID, signal, computed, OnDestroy } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+
+import { VALTECH_ADS_CONFIG } from './config';
+import { AdsLoaderService } from './ads-loader.service';
+import { AuthStateService } from '../auth/auth-state.service';
+import { ValtechAdsConfig, AdSlotState, AdEvent } from './types';
+
+/**
+ * Servicio principal de Google AdSense.
+ *
+ * Maneja la carga del script y el estado de ads.
+ * Detecta automaticamente usuarios premium para ocultar ads.
+ *
+ * @example
+ * ```typescript
+ * @Component({...})
+ * export class MyComponent {
+ *   private ads = inject(AdsService);
+ *
+ *   // Verificar si mostrar ads
+ *   showAds = this.ads.isEnabled;
+ *
+ *   // Verificar si usuario es premium
+ *   isPremium = this.ads.isPremiumUser;
+ * }
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class AdsService implements OnDestroy {
+  // ===========================================================================
+  // ESTADO (Signals)
+  // ===========================================================================
+
+  private readonly _isInitialized = signal<boolean>(false);
+  private readonly _isEnabled = signal<boolean>(false);
+  private readonly _isDebugMode = signal<boolean>(false);
+  private readonly _slotStates = signal<Map<string, AdSlotState>>(new Map());
+  private readonly _events = signal<AdEvent[]>([]);
+  private readonly _adClient = signal<string>('');
+
+  /** Indica si el servicio esta inicializado */
+  readonly isInitialized = this._isInitialized.asReadonly();
+
+  /** Indica si los ads estan habilitados (no premium + inicializado) */
+  readonly isEnabled = computed(() => {
+    return this._isInitialized() && this._isEnabled() && !this.authStateService.isPremium();
+  });
+
+  /** Indica si el usuario es premium (no ve ads) */
+  readonly isPremiumUser = this.authStateService.isPremium;
+
+  /** Indica si esta en modo debug */
+  readonly isDebugMode = this._isDebugMode.asReadonly();
+
+  /** Publisher ID de AdSense */
+  readonly adClient = this._adClient.asReadonly();
+
+  /** Eventos de ads (historial) */
+  readonly events = this._events.asReadonly();
+
+  // ===========================================================================
+  // INTERNOS
+  // ===========================================================================
+
+  private activeSlotIds = new Set<string>();
+  private routerSubscription: Subscription | null = null;
+
+  constructor(
+    @Inject(VALTECH_ADS_CONFIG) private config: ValtechAdsConfig,
+    @Inject(PLATFORM_ID) private platformId: Object,
+    private router: Router,
+    private loaderService: AdsLoaderService,
+    private authStateService: AuthStateService
+  ) {
+    this._isDebugMode.set(config.debugMode ?? false);
+    this._adClient.set(config.adClient);
+  }
+
+  // ===========================================================================
+  // INICIALIZACION
+  // ===========================================================================
+
+  /**
+   * Inicializa el servicio de ads.
+   * Llamado automaticamente por APP_INITIALIZER.
+   * NO carga el script AdSense hasta que se necesite el primer ad.
+   */
+  async initialize(): Promise<void> {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
+    // Si es premium, no inicializar ads
+    if (this.authStateService.isPremium()) {
+      if (this._isDebugMode()) {
+        console.log('[ValtechAds] Usuario premium detectado - ads deshabilitados');
+      }
+      this._isInitialized.set(true);
+      return;
+    }
+
+    // Suscribirse a cambios de ruta para verificar exclusiones
+    this.setupRouteListener();
+
+    this._isEnabled.set(true);
+    this._isInitialized.set(true);
+
+    if (this._isDebugMode()) {
+      console.log('[ValtechAds] Inicializado', {
+        adClient: this.config.adClient,
+        testMode: this.config.testMode,
+        excludeRoutes: this.config.excludeRoutes,
+      });
+    }
+  }
+
+  /**
+   * Carga el script AdSense de forma lazy.
+   * Llamado automaticamente cuando se renderiza el primer ad slot.
+   */
+  async ensureAdSenseLoaded(): Promise<boolean> {
+    if (!this.isEnabled()) {
+      return false;
+    }
+
+    return this.loaderService.loadAdSense();
+  }
+
+  // ===========================================================================
+  // GESTION DE SLOTS
+  // ===========================================================================
+
+  /**
+   * Registra un ad slot.
+   * Llamado internamente por el componente AdSlot.
+   *
+   * @param slotId - ID unico del slot
+   * @returns true si el slot se puede mostrar
+   */
+  async registerSlot(slotId: string): Promise<boolean> {
+    if (!this.isEnabled()) {
+      this.updateSlotState(slotId, 'hidden');
+      return false;
+    }
+
+    // Verificar si la ruta actual esta excluida
+    if (this.isRouteExcluded()) {
+      this.updateSlotState(slotId, 'hidden');
+      return false;
+    }
+
+    this.updateSlotState(slotId, 'loading');
+
+    const loaded = await this.ensureAdSenseLoaded();
+    if (!loaded) {
+      this.updateSlotState(slotId, 'error');
+      return false;
+    }
+
+    this.activeSlotIds.add(slotId);
+
+    // Push ad command para activar el slot
+    this.loaderService.pushAdCommand();
+
+    this.updateSlotState(slotId, 'rendered');
+    this.emitEvent({ type: 'loaded', slotId, isEmpty: false });
+
+    if (this._isDebugMode()) {
+      console.log(`[ValtechAds] Slot registrado: ${slotId}`);
+    }
+
+    return true;
+  }
+
+  /**
+   * Desregistra un slot.
+   *
+   * @param slotId - ID del slot a desregistrar
+   */
+  unregisterSlot(slotId: string): void {
+    this.activeSlotIds.delete(slotId);
+    this._slotStates.update((states) => {
+      const newStates = new Map(states);
+      newStates.delete(slotId);
+      return newStates;
+    });
+
+    if (this._isDebugMode()) {
+      console.log(`[ValtechAds] Slot desregistrado: ${slotId}`);
+    }
+  }
+
+  /**
+   * Obtiene el estado de un slot.
+   *
+   * @param slotId - ID del slot
+   * @returns Estado actual del slot
+   */
+  getSlotState(slotId: string): AdSlotState {
+    return this._slotStates().get(slotId) ?? 'idle';
+  }
+
+  // ===========================================================================
+  // PRIVATE METHODS
+  // ===========================================================================
+
+  private updateSlotState(slotId: string, state: AdSlotState): void {
+    this._slotStates.update((states) => new Map(states).set(slotId, state));
+  }
+
+  private emitEvent(event: Omit<AdEvent, 'timestamp'>): void {
+    const fullEvent: AdEvent = { ...event, timestamp: new Date() };
+    this._events.update((events) => [...events.slice(-99), fullEvent]);
+
+    // Callbacks de configuracion
+    if (event.type === 'loaded' || event.type === 'empty') {
+      this.config.onAdLoaded?.(event.slotId, event.isEmpty ?? false);
+    } else if (event.type === 'error' && event.error) {
+      this.config.onAdError?.(event.slotId, event.error);
+    }
+  }
+
+  private setupRouteListener(): void {
+    if (!this.config.excludeRoutes || this.config.excludeRoutes.length === 0) {
+      return;
+    }
+
+    this.routerSubscription = this.router.events
+      .pipe(filter((event): event is NavigationEnd => event instanceof NavigationEnd))
+      .subscribe(() => {
+        // Los slots se ocultan/muestran automaticamente via isEnabled()
+        // No necesitamos destruir slots con AdSense
+      });
+  }
+
+  private isRouteExcluded(url?: string): boolean {
+    if (!this.config.excludeRoutes || this.config.excludeRoutes.length === 0) {
+      return false;
+    }
+
+    const currentUrl = url ?? this.router.url;
+    return this.config.excludeRoutes.some((pattern) => {
+      const regex = new RegExp(pattern);
+      return regex.test(currentUrl);
+    });
+  }
+
+  // ===========================================================================
+  // LIFECYCLE
+  // ===========================================================================
+
+  ngOnDestroy(): void {
+    this.routerSubscription?.unsubscribe();
+    this.activeSlotIds.clear();
+    this._slotStates.set(new Map());
+  }
+}

package/src/lib/services/ads/config.ts

@@ -0,0 +1,92 @@
+/**
+ * Ads Configuration
+ *
+ * Configuracion e inicializacion de Google AdSense para Angular.
+ * Usa provideValtechAds() en el bootstrap de tu aplicacion.
+ */
+
+import {
+  EnvironmentProviders,
+  InjectionToken,
+  makeEnvironmentProviders,
+  APP_INITIALIZER,
+} from '@angular/core';
+import { ValtechAdsConfig } from './types';
+import { AdsService } from './ads.service';
+
+/**
+ * Token de inyeccion para la configuracion de Ads.
+ * Usado internamente por los servicios de ads.
+ */
+export const VALTECH_ADS_CONFIG = new InjectionToken<ValtechAdsConfig>('ValtechAdsConfig');
+
+/**
+ * Configuracion por defecto del servicio de ads.
+ */
+export const DEFAULT_ADS_CONFIG: Partial<ValtechAdsConfig> = {
+  debugMode: false,
+  testMode: false,
+  autoAds: false,
+};
+
+/**
+ * Factory para inicializar AdsService.
+ * Se ejecuta durante el bootstrap de la aplicacion.
+ */
+function initializeAds(adsService: AdsService): () => Promise<void> {
+  return () => adsService.initialize();
+}
+
+/**
+ * Provee el servicio de Ads a la aplicacion Angular.
+ *
+ * @param config - Configuracion de Google AdSense
+ * @returns EnvironmentProviders para usar en bootstrapApplication
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechAds } from 'valtech-components';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechAds({
+ *       adClient: 'ca-pub-XXXXXXXXXXXXXXXX',
+ *       testMode: true, // Usa ads de prueba en desarrollo
+ *       debugMode: true,
+ *     }),
+ *   ],
+ * });
+ * ```
+ *
+ * @example Con rutas excluidas
+ * ```typescript
+ * provideValtechAds({
+ *   adClient: 'ca-pub-XXXXXXXXXXXXXXXX',
+ *   excludeRoutes: [
+ *     '^/checkout',
+ *     '^/payment',
+ *     '^/premium',
+ *   ],
+ * })
+ * ```
+ */
+export function provideValtechAds(config: ValtechAdsConfig): EnvironmentProviders {
+  // Merge config con defaults
+  const mergedConfig: ValtechAdsConfig = {
+    ...DEFAULT_ADS_CONFIG,
+    ...config,
+  };
+
+  return makeEnvironmentProviders([
+    { provide: VALTECH_ADS_CONFIG, useValue: mergedConfig },
+    // Inicializar AdsService al arrancar (pero NO cargar script AdSense aun)
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeAds,
+      deps: [AdsService],
+      multi: true,
+    },
+  ]);
+}

package/src/lib/services/ads/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Ads Module
+ *
+ * Exports publicos para el servicio de Google AdSense.
+ */
+
+// Configuration
+export { provideValtechAds, VALTECH_ADS_CONFIG, DEFAULT_ADS_CONFIG } from './config';
+
+// Services
+export { AdsService } from './ads.service';
+export { AdsLoaderService } from './ads-loader.service';
+
+// Types
+export {
+  // Config types
+  ValtechAdsConfig,
+  // Slot types
+  AdSlotConfig,
+  AdFormat,
+  // State types
+  AdSlotState,
+  AdEvent,
+  AdsConsentState,
+  // Legacy types (deprecated)
+  AdSlotSize,
+  AD_SIZE_MAP,
+  SizeMapping,
+} from './types';