@thead-vantage/react 2.13.0 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.13.0",
+  "version": "2.15.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

@@ -58,7 +58,7 @@ export function AdBanner({
           setDevMode(response.dev_mode || false);
 
           // Track impression (will be skipped in dev mode)
-          trackImpression(response.ad.id);
+          trackImpression(response.ad.id, apiKey, apiUrl);
         } else {
           // Create a more detailed error message
           const errorDetails = [];
@@ -106,7 +106,7 @@ export function AdBanner({
 
   const handleClick = () => {
     if (ad) {
-      trackClick(ad.id);
+      trackClick(ad.id, apiKey, apiUrl);
       // The link will handle navigation
     }
   };

package/src/components/AdDisplay.tsx

@@ -42,7 +42,14 @@ export default function AdDisplay({ position, className = '' }: AdDisplayProps)
           setDevMode(response.dev_mode || false);
           
           // Track impression (will be skipped in dev mode)
-          trackImpression(response.ad.id);
+          // Note: AdDisplay doesn't have apiKey, so tracking will fail gracefully
+          // This component may need to be updated to accept apiKey prop if tracking is needed
+          if (response.ad.id) {
+            // Silently fail if no API key available
+            trackImpression(response.ad.id, '').catch(() => {
+              // Tracking failed - this is expected without API key
+            });
+          }
         } else {
           setError('No ad available');
         }
@@ -59,7 +66,11 @@ export default function AdDisplay({ position, className = '' }: AdDisplayProps)
 
   const handleClick = () => {
     if (ad) {
-      trackClick(ad.id);
+      // Note: AdDisplay doesn't have apiKey, so tracking will fail gracefully
+      // This component may need to be updated to accept apiKey prop if tracking is needed
+      trackClick(ad.id, '').catch(() => {
+        // Tracking failed - this is expected without API key
+      });
       // The link will handle navigation
     }
   };

package/src/lib/ads.ts

@@ -363,11 +363,20 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
 /**
  * Track an ad impression (when ad is viewed)
  * Sends tracking directly to TheAd Vantage API (or skips in dev mode)
+ * 
+ * @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
  */
-export async function trackImpression(adId: string): Promise<void> {
+export async function trackImpression(adId: string, apiKey: string, apiUrl?: string): Promise<void> {
   try {
+    if (!apiKey) {
+      console.warn('[AdBanner] Cannot track impression: API key is required');
+      return;
+    }
+
     // Get the API base URL to determine where to send tracking
-    const apiBaseUrl = getApiBaseUrl();
+    const apiBaseUrl = getApiBaseUrl(apiUrl);
     
     // Build tracking URL - remove /api/ads if present, then append /api/ads/track
     let trackingUrl = apiBaseUrl.trim();
@@ -387,6 +396,10 @@ export async function trackImpression(adId: string): Promise<void> {
       trackingUrl = trackingUrl.replace('thead-vantage.com', 'www.thead-vantage.com');
     }
     
+    // Add API key to query string (recommended for CORS preflight validation)
+    const url = new URL(trackingUrl);
+    url.searchParams.set('api_key', apiKey);
+    
     // Check if we should skip tracking (dev mode)
     const useDevFlags = shouldUseDevFlags();
     if (useDevFlags) {
@@ -394,7 +407,7 @@ export async function trackImpression(adId: string): Promise<void> {
       return;
     }
     
-    const response = await fetch(trackingUrl, {
+    const response = await fetch(url.toString(), {
       method: 'POST',
       mode: 'cors', // Explicitly enable CORS
       credentials: 'omit', // Don't send cookies
@@ -409,18 +422,25 @@ export async function trackImpression(adId: string): Promise<void> {
     });
     
     if (!response.ok) {
-      console.warn(`[AdBanner] Tracking impression failed: ${response.status} ${response.statusText}`);
+      const errorText = await response.text().catch(() => 'Unknown error');
+      console.warn(`[AdBanner] Tracking impression failed: ${response.status} ${response.statusText}`, {
+        errorText: errorText.substring(0, 200),
+      });
       return;
     }
     
     const data = await response.json();
     if (data.dev_mode) {
       console.log(`[DEV] Impression tracking skipped for ad: ${adId}`);
+    } else {
+      console.debug(`[AdBanner] Impression tracked successfully for ad: ${adId}`);
     }
   } catch (error) {
-    // Handle CORS errors silently (tracking failures shouldn't break the app)
+    // 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'))) {
-      console.warn(`[AdBanner] CORS error tracking impression for ad: ${adId}. The tracking endpoint needs CORS headers configured.`);
+      // 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.`);
     } else {
       console.error('Error tracking impression:', error);
     }
@@ -431,11 +451,20 @@ export async function trackImpression(adId: string): Promise<void> {
 /**
  * Track an ad click
  * Sends tracking directly to TheAd Vantage API (or skips in dev mode)
+ * 
+ * @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
  */
-export async function trackClick(adId: string): Promise<void> {
+export async function trackClick(adId: string, apiKey: string, apiUrl?: string): Promise<void> {
   try {
+    if (!apiKey) {
+      console.warn('[AdBanner] Cannot track click: API key is required');
+      return;
+    }
+
     // Get the API base URL to determine where to send tracking
-    const apiBaseUrl = getApiBaseUrl();
+    const apiBaseUrl = getApiBaseUrl(apiUrl);
     
     // Build tracking URL - remove /api/ads if present, then append /api/ads/track
     let trackingUrl = apiBaseUrl.trim();
@@ -455,6 +484,10 @@ export async function trackClick(adId: string): Promise<void> {
       trackingUrl = trackingUrl.replace('thead-vantage.com', 'www.thead-vantage.com');
     }
     
+    // Add API key to query string (recommended for CORS preflight validation)
+    const url = new URL(trackingUrl);
+    url.searchParams.set('api_key', apiKey);
+    
     // Check if we should skip tracking (dev mode)
     const useDevFlags = shouldUseDevFlags();
     if (useDevFlags) {
@@ -462,7 +495,7 @@ export async function trackClick(adId: string): Promise<void> {
       return;
     }
     
-    const response = await fetch(trackingUrl, {
+    const response = await fetch(url.toString(), {
       method: 'POST',
       mode: 'cors', // Explicitly enable CORS
       credentials: 'omit', // Don't send cookies
@@ -477,18 +510,25 @@ export async function trackClick(adId: string): Promise<void> {
     });
     
     if (!response.ok) {
-      console.warn(`[AdBanner] Tracking click failed: ${response.status} ${response.statusText}`);
+      const errorText = await response.text().catch(() => 'Unknown error');
+      console.warn(`[AdBanner] Tracking click failed: ${response.status} ${response.statusText}`, {
+        errorText: errorText.substring(0, 200),
+      });
       return;
     }
     
     const data = await response.json();
     if (data.dev_mode) {
       console.log(`[DEV] Click tracking skipped for ad: ${adId}`);
+    } else {
+      console.debug(`[AdBanner] Click tracked successfully for ad: ${adId}`);
     }
   } catch (error) {
-    // Handle CORS errors silently (tracking failures shouldn't break the app)
+    // 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'))) {
-      console.warn(`[AdBanner] CORS error tracking click for ad: ${adId}. The tracking endpoint needs CORS headers configured.`);
+      // 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.`);
     } else {
       console.error('Error tracking click:', error);
     }