@thead-vantage/react 2.16.0 → 2.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "description": "React components and utilities for TheAd Vantage ad platform integration",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/AdBanner.tsx

@@ -12,6 +12,8 @@ export interface AdBannerProps {
   userId?: string | null;
   userSegment?: string | null;
   className?: string;
+  clickMetadata?: Record<string, unknown>; // Optional metadata to send with click events
+  impressionMetadata?: Record<string, unknown>; // Optional metadata to send with impression events
 }
 
 export function AdBanner({
@@ -22,6 +24,8 @@ export function AdBanner({
   userId = null,
   userSegment = null,
   className = '',
+  clickMetadata,
+  impressionMetadata,
 }: AdBannerProps) {
   const [ad, setAd] = useState<Ad | null>(null);
   const [loading, setLoading] = useState(true);
@@ -43,22 +47,27 @@ export function AdBanner({
           userSegment,
         });
 
-        console.log('[AdBanner] Processed response:', {
-          success: response.success,
-          hasAd: !!response.ad,
-          devMode: response.dev_mode,
-          message: response.message,
-          _dev_note: response._dev_note,
-          fullResponse: response,
-        });
+        // Only log in development mode
+        if (process.env.NODE_ENV === 'development') {
+          console.log('[AdBanner] Processed response:', {
+            success: response.success,
+            hasAd: !!response.ad,
+            devMode: response.dev_mode,
+            message: response.message,
+            _dev_note: response._dev_note,
+            fullResponse: response,
+          });
+        }
 
         if (response.success && response.ad) {
-          console.log('[AdBanner] Setting ad:', response.ad);
+          if (process.env.NODE_ENV === 'development') {
+            console.log('[AdBanner] Setting ad:', response.ad);
+          }
           setAd(response.ad);
           setDevMode(response.dev_mode || false);
 
           // Track impression (will be skipped in dev mode)
-          trackImpression(response.ad.id, apiKey, apiUrl);
+          trackImpression(response.ad.id, apiKey, apiUrl, impressionMetadata);
         } else {
           // Create a more detailed error message
           const errorDetails = [];
@@ -106,7 +115,7 @@ export function AdBanner({
 
   const handleClick = () => {
     if (ad) {
-      trackClick(ad.id, apiKey, apiUrl);
+      trackClick(ad.id, apiKey, apiUrl, clickMetadata);
       // The link will handle navigation
     }
   };

package/src/lib/ads.ts

@@ -3,7 +3,17 @@
  * Automatically handles development mode to prevent tracking
  */
 
-import { getApiBaseUrl, shouldUseDevFlags } from './thead-vantage-config';
+import { getApiBaseUrl, shouldUseDevFlags, isDevelopmentMode } from './thead-vantage-config';
+
+/**
+ * Helper function to log only in development mode
+ * Errors and warnings are always logged
+ */
+function devLog(...args: unknown[]): void {
+  if (process.env.NODE_ENV === 'development' || isDevelopmentMode()) {
+    console.log(...args);
+  }
+}
 
 export interface AdData {
   id: string;
@@ -147,7 +157,7 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
     
     // Log the request (without exposing the API key)
     const logUrl = url.replace(new RegExp(`api_key=${params.apiKey}`, 'g'), 'api_key=***');
-    console.log('[AdBanner] Fetching ad from:', logUrl);
+    devLog('[AdBanner] Fetching ad from:', logUrl);
 
     // Make direct request to thead-vantage.com
     // Try to make a "simple request" that doesn't trigger preflight
@@ -205,8 +215,8 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
       const data: AdsResponse = await response.json();
 
       // Debug logging - log the FULL response to see exactly what we're getting
-      console.log('[AdBanner] Full API Response:', JSON.stringify(data, null, 2));
-      console.log('[AdBanner] API Response Summary:', {
+      devLog('[AdBanner] Full API Response:', JSON.stringify(data, null, 2));
+      devLog('[AdBanner] API Response Summary:', {
       success: data.success,
       hasAd: !!data.ad,
       hasAds: !!(data.ads && Array.isArray(data.ads)),
@@ -246,19 +256,19 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
 
       // Handle both single ad and array of ads
       if (data.ads && Array.isArray(data.ads) && data.ads.length > 0) {
-      // If we get an array, use the first ad and ensure it's Ad type
-      const firstAd = data.ads[0];
-      console.log('[AdBanner] Processing ads array, first ad:', JSON.stringify(firstAd, null, 2));
-      
-      // Check if it's already an Ad, otherwise convert from AdData
-      let ad: Ad = isAd(firstAd) 
-        ? firstAd 
-        : convertToAd(firstAd as AdData);
-      
-      // Normalize the type (standard -> image)
-      ad = normalizeAdType(ad);
-      
-      console.log('[AdBanner] Converted ad:', JSON.stringify(ad, null, 2));
+        // If we get an array, use the first ad and ensure it's Ad type
+        const firstAd = data.ads[0];
+        devLog('[AdBanner] Processing ads array, first ad:', JSON.stringify(firstAd, null, 2));
+        
+        // Check if it's already an Ad, otherwise convert from AdData
+        let ad: Ad = isAd(firstAd) 
+          ? firstAd 
+          : convertToAd(firstAd as AdData);
+        
+        // Normalize the type (standard -> image)
+        ad = normalizeAdType(ad);
+        
+        devLog('[AdBanner] Converted ad:', JSON.stringify(ad, null, 2));
       
       return {
         success: data.success,
@@ -271,19 +281,19 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
 
       // Handle single ad response - convert AdData to Ad
       if (data.ad) {
-      console.log('[AdBanner] Processing single ad:', JSON.stringify(data.ad, null, 2));
-      
-      // Check if it's already in Ad format or needs conversion
-      let ad: Ad;
-      if (isAd(data.ad)) {
-        // Already in Ad format, normalize the type
-        ad = normalizeAdType(data.ad);
-      } else {
-        // Convert from AdData format
-        ad = convertToAd(data.ad);
-      }
-      
-      console.log('[AdBanner] Converted ad:', JSON.stringify(ad, null, 2));
+        devLog('[AdBanner] Processing single ad:', JSON.stringify(data.ad, null, 2));
+        
+        // Check if it's already in Ad format or needs conversion
+        let ad: Ad;
+        if (isAd(data.ad)) {
+          // Already in Ad format, normalize the type
+          ad = normalizeAdType(data.ad);
+        } else {
+          // Convert from AdData format
+          ad = convertToAd(data.ad);
+        }
+        
+        devLog('[AdBanner] Converted ad:', JSON.stringify(ad, null, 2));
       
       return {
         success: data.success,
@@ -420,8 +430,9 @@ export function collectFingerprint(): Fingerprint {
  * @param adId - The ID of the ad being tracked
  * @param apiKey - The API key for the platform (required for CORS validation and platform identification)
  * @param apiUrl - Optional API base URL override
+ * @param metadata - Optional metadata object to send with the impression event
  */
-export async function trackImpression(adId: string, apiKey: string, apiUrl?: string): Promise<void> {
+export async function trackImpression(adId: string, apiKey: string, apiUrl?: string, metadata?: Record<string, unknown>): Promise<void> {
   try {
     if (!apiKey) {
       console.warn('[AdBanner] Cannot track impression: API key is required');
@@ -456,7 +467,7 @@ export async function trackImpression(adId: string, apiKey: string, apiUrl?: str
     // Check if we should skip tracking (dev mode)
     const useDevFlags = shouldUseDevFlags();
     if (useDevFlags) {
-      console.log(`[DEV] Impression tracking skipped for ad: ${adId}`);
+      devLog(`[DEV] Impression tracking skipped for ad: ${adId}`);
       return;
     }
     
@@ -472,6 +483,7 @@ export async function trackImpression(adId: string, apiKey: string, apiUrl?: str
         action: 'impression',
         adId,
         fingerprint: collectFingerprint(), // Include fingerprint data for fraud detection
+        ...(metadata && { metadata }), // Include metadata if provided
       }),
     });
     
@@ -485,16 +497,16 @@ export async function trackImpression(adId: string, apiKey: string, apiUrl?: str
     
     const data = await response.json();
     if (data.dev_mode) {
-      console.log(`[DEV] Impression tracking skipped for ad: ${adId}`);
+      devLog(`[DEV] Impression tracking skipped for ad: ${adId}`);
     } else {
-      console.debug(`[AdBanner] Impression tracked successfully for ad: ${adId}`);
+      devLog(`[AdBanner] Impression tracked successfully for ad: ${adId}`);
     }
   } catch (error) {
-    // Handle CORS errors gracefully (tracking failures shouldn't break the app)
-    if (error instanceof TypeError && (error.message.includes('CORS') || error.message.includes('Failed to fetch'))) {
-      // This is expected until the server configures CORS for /api/ads/track endpoint
-      // The ad still displays correctly, tracking just won't work until server-side CORS is fixed
-      console.debug(`[AdBanner] Tracking impression failed (CORS): The /api/ads/track endpoint needs CORS headers configured on the server. Ad still displayed successfully.`);
+      // Handle CORS errors gracefully (tracking failures shouldn't break the app)
+      if (error instanceof TypeError && (error.message.includes('CORS') || error.message.includes('Failed to fetch'))) {
+        // This is expected until the server configures CORS for /api/ads/track endpoint
+        // The ad still displays correctly, tracking just won't work until server-side CORS is fixed
+        devLog(`[AdBanner] Tracking impression failed (CORS): The /api/ads/track endpoint needs CORS headers configured on the server. Ad still displayed successfully.`);
     } else {
       console.error('Error tracking impression:', error);
     }
@@ -509,8 +521,9 @@ export async function trackImpression(adId: string, apiKey: string, apiUrl?: str
  * @param adId - The ID of the ad being tracked
  * @param apiKey - The API key for the platform (required for CORS validation and platform identification)
  * @param apiUrl - Optional API base URL override
+ * @param metadata - Optional metadata object to send with the click event
  */
-export async function trackClick(adId: string, apiKey: string, apiUrl?: string): Promise<void> {
+export async function trackClick(adId: string, apiKey: string, apiUrl?: string, metadata?: Record<string, unknown>): Promise<void> {
   try {
     if (!apiKey) {
       console.warn('[AdBanner] Cannot track click: API key is required');
@@ -545,7 +558,7 @@ export async function trackClick(adId: string, apiKey: string, apiUrl?: string):
     // Check if we should skip tracking (dev mode)
     const useDevFlags = shouldUseDevFlags();
     if (useDevFlags) {
-      console.log(`[DEV] Click tracking skipped for ad: ${adId}`);
+      devLog(`[DEV] Click tracking skipped for ad: ${adId}`);
       return;
     }
     
@@ -561,6 +574,7 @@ export async function trackClick(adId: string, apiKey: string, apiUrl?: string):
         action: 'click',
         adId,
         fingerprint: collectFingerprint(), // Include fingerprint data for fraud detection
+        ...(metadata && { metadata }), // Include metadata if provided
       }),
     });
     
@@ -574,16 +588,16 @@ export async function trackClick(adId: string, apiKey: string, apiUrl?: string):
     
     const data = await response.json();
     if (data.dev_mode) {
-      console.log(`[DEV] Click tracking skipped for ad: ${adId}`);
+      devLog(`[DEV] Click tracking skipped for ad: ${adId}`);
     } else {
-      console.debug(`[AdBanner] Click tracked successfully for ad: ${adId}`);
+      devLog(`[AdBanner] Click tracked successfully for ad: ${adId}`);
     }
   } catch (error) {
     // Handle CORS errors gracefully (tracking failures shouldn't break the app)
     if (error instanceof TypeError && (error.message.includes('CORS') || error.message.includes('Failed to fetch'))) {
       // This is expected until the server configures CORS for /api/ads/track endpoint
       // The ad still works correctly, click tracking just won't work until server-side CORS is fixed
-      console.debug(`[AdBanner] Tracking click failed (CORS): The /api/ads/track endpoint needs CORS headers configured on the server. Ad still works correctly.`);
+      devLog(`[AdBanner] Tracking click failed (CORS): The /api/ads/track endpoint needs CORS headers configured on the server. Ad still works correctly.`);
     } else {
       console.error('Error tracking click:', error);
     }

package/src/lib/thead-vantage-config.ts

@@ -116,15 +116,9 @@ export function getApiBaseUrl(explicitApiUrl?: string): string {
   }
 
   // Log which URL was selected (helpful for debugging)
-  // Always log in browser context, but only in development for server-side
-  if (typeof window !== 'undefined') {
-    if (process.env.NODE_ENV === 'development') {
-      console.log(`[TheAd Vantage] API Base URL selected: ${selectedUrl} (reason: ${reason})`);
-    } else {
-      // In production, log to console but only if there's an issue (helps with debugging)
-      // We'll log errors separately, but this helps identify configuration issues
-      console.debug(`[TheAd Vantage] API Base URL: ${selectedUrl}`);
-    }
+  // Only log in development mode
+  if (typeof window !== 'undefined' && (process.env.NODE_ENV === 'development' || isDevelopmentMode())) {
+    console.log(`[TheAd Vantage] API Base URL selected: ${selectedUrl} (reason: ${reason})`);
   }
 
   return selectedUrl;