@vynix-org/react-native-ads-sdk 0.1.4 → 0.1.5

package/src/analytics/AnalyticsManager.ts

@@ -0,0 +1,140 @@
+import analytics from '@react-native-firebase/analytics';
+import { EventTracking, type EventParams } from './EventTracking';
+
+/**
+ * Event names cho Ads Analytics
+ */
+
+/**
+ * Analytics Manager để quản lý Firebase Analytics events
+ */
+export class AnalyticsManager {
+  private static instance: AnalyticsManager;
+  private isEnabled = true;
+  private isInitialized = false;
+  private initPromise: Promise<void> | null = null;
+
+  private constructor() {}
+
+  static getInstance(): AnalyticsManager {
+    if (!AnalyticsManager.instance) {
+      AnalyticsManager.instance = new AnalyticsManager();
+    }
+    return AnalyticsManager.instance;
+  }
+
+  /**
+   * Khởi tạo Analytics Manager
+   */
+  async initialize(): Promise<void> {
+    if (this.isInitialized) {
+      return;
+    }
+
+    if (this.initPromise) {
+      return this.initPromise;
+    }
+
+    this.initPromise = this.initializeInternal();
+    return this.initPromise;
+  }
+
+  private async initializeInternal(): Promise<void> {
+    try {
+      // Kiểm tra xem analytics có sẵn không
+      await analytics().setAnalyticsCollectionEnabled(this.isEnabled);
+      this.isInitialized = true;
+      console.log('Analytics Manager initialized successfully');
+    } catch (error) {
+      console.error('Failed to initialize Analytics Manager:', error);
+      // Không throw error để không làm gián đoạn app
+      this.isInitialized = false;
+    }
+  }
+
+  /**
+   * Bật/tắt analytics collection
+   */
+  async setEnabled(enabled: boolean): Promise<void> {
+    this.isEnabled = enabled;
+    try {
+      await analytics().setAnalyticsCollectionEnabled(enabled);
+      console.log(`Analytics collection ${enabled ? 'enabled' : 'disabled'}`);
+    } catch (error) {
+      console.error('Failed to set analytics collection enabled:', error);
+    }
+  }
+
+  /**
+   * Kiểm tra xem analytics có được bật không
+   */
+  isAnalyticsEnabled(): boolean {
+    return this.isEnabled;
+  }
+
+  /**
+   * Log một custom event
+   */
+  async logEvent(eventName: string, params?: EventParams): Promise<void> {
+    if (!this.isEnabled) {
+      return;
+    }
+
+    try {
+      await this.ensureInitialized();
+      await analytics().logEvent(eventName, params);
+      console.log(`Analytics event logged: ${eventName}`, params);
+    } catch (error) {
+      console.error(`Failed to log analytics event ${eventName}:`, error);
+    }
+  }
+
+  /**
+   * Log ad event với các parameters chuẩn
+   */
+  async logAdEvent(event: EventTracking, params?: EventParams): Promise<void> {
+    await this.logEvent(event, params);
+  }
+
+  async logRequestAdEvent(params?: EventParams): Promise<void> {
+    await this.logAdEvent(EventTracking.TRACK_AD_REQUEST, params);
+  }
+
+  async logClickAdEvent(params?: EventParams): Promise<void> {
+    await this.logAdEvent(EventTracking.EVENT_CLICK_AD, params);
+  }
+
+  async logRevenueAdEvent(params?: EventParams): Promise<void> {
+    await this.logAdEvent(EventTracking.PAID_AD_IMPRESSION, params);
+    await this.logAdEvent(EventTracking.EVENT_PURCHASE, params);
+  }
+
+  async logAdLoadedEvent(params?: EventParams): Promise<void> {
+    await this.logAdEvent(EventTracking.EVENT_AD_LOADED, params);
+  }
+
+  /**
+   * Reset analytics data
+   */
+  async resetAnalyticsData(): Promise<void> {
+    try {
+      await this.ensureInitialized();
+      await analytics().resetAnalyticsData();
+      console.log('Analytics data reset');
+    } catch (error) {
+      console.error('Failed to reset analytics data:', error);
+    }
+  }
+
+  /**
+   * Đảm bảo analytics đã được khởi tạo
+   */
+  private async ensureInitialized(): Promise<void> {
+    if (!this.isInitialized) {
+      await this.initialize();
+    }
+  }
+}
+
+// Singleton instance
+export const analyticsManager = AnalyticsManager.getInstance();

package/src/analytics/EventTracking.ts

@@ -0,0 +1,14 @@
+export enum EventTracking {
+  TRACK_AD_REQUEST = 'track_ad_request',
+  PAID_AD_IMPRESSION = 'paid_ad_impression_value',
+  EVENT_CLICK_AD = 'event_user_click_ads',
+  EVENT_AD_LOADED = 'track_ad_matched_request',
+  EVENT_PURCHASE = 'purchase',
+}
+
+export interface EventParams {
+  adUnitId?: string;
+  adFormat?: string;
+  currency?: string;
+  value?: number;
+}

package/src/analytics/TrackingManager.ts

@@ -0,0 +1,33 @@
+import { analyticsManager } from './AnalyticsManager';
+import type { EventParams } from './EventTracking';
+
+export class TrackingManager {
+  private static instance: TrackingManager;
+
+  private constructor() {}
+
+  static getInstance(): TrackingManager {
+    if (!TrackingManager.instance) {
+      TrackingManager.instance = new TrackingManager();
+    }
+    return TrackingManager.instance;
+  }
+
+  async onTrackingRequestAd(params?: EventParams) {
+    await analyticsManager.logRequestAdEvent(params);
+  }
+
+  async onTrackingClickAd(params?: EventParams) {
+    await analyticsManager.logClickAdEvent(params);
+  }
+
+  async onTrackingRevenueAd(params?: EventParams) {
+    await analyticsManager.logRevenueAdEvent(params);
+  }
+
+  async onTrackingAdLoaded(params?: EventParams) {
+    await analyticsManager.logAdLoadedEvent(params);
+  }
+}
+
+export const trackingManager = TrackingManager.getInstance();

package/src/components/BannerAdComponent.tsx

@@ -1,12 +1,17 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { BannerAd, type RequestOptions } from 'react-native-google-mobile-ads';
+import {
+  BannerAd,
+  type PaidEvent,
+  type RequestOptions,
+} from 'react-native-google-mobile-ads';
 import {
   Placeholder,
   PlaceholderMedia,
   PlaceholderLine,
   Fade,
 } from 'rn-placeholder';
+import { trackingManager } from '../analytics/TrackingManager';
 
 interface BannerAdComponentProps {
   adId: string;
@@ -75,6 +80,10 @@ export const BannerAdComponent: React.FC<BannerAdComponentProps> = ({
     setError(null);
     console.log('PreloadedBannerAd loaded:', currentAdId);
     onAdLoaded?.();
+    trackingManager.onTrackingRequestAd({
+      adUnitId: currentAdId,
+      adFormat: 'Banner',
+    });
   };
 
   const handleAdFailedToLoad = (error: Error) => {
@@ -117,11 +126,29 @@ export const BannerAdComponent: React.FC<BannerAdComponentProps> = ({
   const handleAdClicked = () => {
     console.log('PreloadedBannerAd clicked');
     onAdClicked?.();
+    trackingManager.onTrackingClickAd({
+      adUnitId: currentAdId,
+      adFormat: 'Banner',
+    });
   };
 
   const handleAdImpression = () => {
     console.log('PreloadedBannerAd impression');
     onAdImpression?.();
+    trackingManager.onTrackingAdLoaded({
+      adUnitId: currentAdId,
+      adFormat: 'Banner',
+    });
+  };
+
+  const handlePaid = (paid: PaidEvent) => {
+    console.log('PreloadedBannerAd paid:', paid);
+    trackingManager.onTrackingRevenueAd({
+      adUnitId: currentAdId,
+      adFormat: 'Banner',
+      currency: paid.currency,
+      value: paid.value,
+    });
   };
 
   if (!shouldRender) {
@@ -148,21 +175,24 @@ export const BannerAdComponent: React.FC<BannerAdComponentProps> = ({
 
       {error && showError && <View />}
 
-      <View style={{ minHeight: 50 }}>
-        <BannerAd
-          key={currentAdId}
-          ref={bannerRef}
-          unitId={currentAdId}
-          size={size}
-          onAdLoaded={handleAdLoaded}
-          onAdFailedToLoad={handleAdFailedToLoad}
-          onAdOpened={handleAdOpened}
-          onAdClosed={handleAdClosed}
-          onAdClicked={handleAdClicked}
-          onAdImpression={handleAdImpression}
-          requestOptions={requestOptions}
-        />
-      </View>
+      {isLoaded && !error && (
+        <View style={{ minHeight: 50 }}>
+          <BannerAd
+            key={currentAdId}
+            ref={bannerRef}
+            unitId={currentAdId}
+            size={size}
+            onAdLoaded={handleAdLoaded}
+            onAdFailedToLoad={handleAdFailedToLoad}
+            onAdOpened={handleAdOpened}
+            onAdClosed={handleAdClosed}
+            onAdClicked={handleAdClicked}
+            onAdImpression={handleAdImpression}
+            requestOptions={requestOptions}
+            onPaid={(paid) => handlePaid(paid)}
+          />
+        </View>
+      )}
     </View>
   );
 };
@@ -181,7 +211,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: 'rgba(255, 255, 255, 0.9)',
     paddingHorizontal: 20,
-    paddingVertical: 10,
+    paddingVertical: 12,
     borderRadius: 8,
   },
   loadingText: {

package/src/components/NativeAdComponent.tsx

@@ -3,7 +3,6 @@ import {
   View,
   Text,
   ActivityIndicator,
-  TouchableOpacity,
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
@@ -17,6 +16,7 @@ import {
 import { useNativeAd } from '../hook/useNativeAd';
 import type { AdInstance } from '../types/ads-types';
 import { styles } from './NativeStyles';
+import { Image } from 'react-native';
 
 interface NativeAdComponentProps {
   adKey: string;
@@ -51,11 +51,8 @@ export const NativeAdComponent: React.FC<NativeAdComponentProps> = ({
   adBadgeStyles,
   headlineStyles,
   bodyStyles,
-  ratingStyles,
-  priceStyles,
-  storeStyles,
 }) => {
-  const { ad, isLoading, error, isLoaded, loadAd } = useNativeAd({
+  const { ad, isLoading, error, isLoaded } = useNativeAd({
     adKey,
     adId,
     autoLoad,
@@ -80,27 +77,12 @@ export const NativeAdComponent: React.FC<NativeAdComponentProps> = ({
 
   // Render error state
   if (error) {
-    return (
-      <View style={[styles.wrapper, style]}>
-        <View style={[styles.container, styles.centerContent]}>
-          <Text style={styles.errorText}>Lỗi: {error}</Text>
-          <TouchableOpacity onPress={() => loadAd()} style={styles.retryButton}>
-            <Text style={styles.retryText}>Thử lại</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    );
+    return null;
   }
 
   // Render empty state
   if (!isLoaded || !ad?.data?.nativeAd) {
-    return (
-      <View style={[styles.wrapper, style]}>
-        <View style={[styles.container, styles.centerContent]}>
-          <Text style={styles.emptyText}>Không có quảng cáo</Text>
-        </View>
-      </View>
-    );
+    return null;
   }
 
   const nativeAd = ad.data.nativeAd as NativeAd;
@@ -110,9 +92,6 @@ export const NativeAdComponent: React.FC<NativeAdComponentProps> = ({
       <NativeAdView nativeAd={nativeAd} style={[styles.container]}>
         {/* Ad Badge và Advertiser */}
         <View style={styles.adHeader}>
-          {/* <NativeAsset assetType={NativeAssetType.ADVERTISER}> */}
-          <Text style={[styles.adBadge, adBadgeStyles]}>Ad</Text>
-          {/* </NativeAsset> */}
           {nativeAd.advertiser && (
             <NativeAsset assetType={NativeAssetType.ADVERTISER}>
               <Text style={styles.advertiserText} numberOfLines={1}>
@@ -122,6 +101,14 @@ export const NativeAdComponent: React.FC<NativeAdComponentProps> = ({
           )}
         </View>
 
+        {nativeAd.callToAction && (
+          <NativeAsset assetType={NativeAssetType.CALL_TO_ACTION}>
+            <View style={[styles.ctaButton, buttonActionStyles]}>
+              <Text style={styles.ctaText}>{nativeAd.callToAction}</Text>
+            </View>
+          </NativeAsset>
+        )}
+
         {/* Media View - Hiển thị ảnh hoặc video */}
         {((nativeAd.images?.length && nativeAd.images.length > 0) ||
           nativeAd.mediaContent) && (
@@ -137,71 +124,40 @@ export const NativeAdComponent: React.FC<NativeAdComponentProps> = ({
 
         {/* Ad Content */}
         <View style={styles.contentContainer}>
-          {/* Headline */}
-          {nativeAd.headline && (
-            <NativeAsset assetType={NativeAssetType.HEADLINE}>
-              <Text style={[styles.headline, headlineStyles]} numberOfLines={2}>
-                {nativeAd.headline}
-              </Text>
-            </NativeAsset>
-          )}
-
-          {/* Body */}
-          {nativeAd.body && (
-            <NativeAsset assetType={NativeAssetType.BODY}>
-              <Text style={[styles.bodyText, bodyStyles]} numberOfLines={3}>
-                {nativeAd.body}
-              </Text>
+          {nativeAd.icon && (
+            <NativeAsset assetType={NativeAssetType.ICON}>
+              <View style={styles.iconContainer}>
+                <Image
+                  source={{ uri: nativeAd.icon?.url }}
+                  style={styles.icon}
+                />
+              </View>
             </NativeAsset>
           )}
-
-          {/* Rating, Price, Store Row */}
-          <View style={styles.infoRow}>
-            {/* Star Rating */}
-            {nativeAd.starRating !== null &&
-              nativeAd.starRating !== undefined && (
-                <NativeAsset assetType={NativeAssetType.STAR_RATING}>
-                  <Text style={[styles.ratingText, ratingStyles]}>
-                    ⭐ {nativeAd.starRating.toFixed(1)}
+          <View style={{ flex: 1 }}>
+            <View style={styles.vHeader}>
+              <Text style={[styles.adBadge, adBadgeStyles]}>Ad</Text>
+              {nativeAd.headline && (
+                <NativeAsset assetType={NativeAssetType.HEADLINE}>
+                  <Text
+                    style={[styles.headline, headlineStyles]}
+                    numberOfLines={1}
+                  >
+                    {nativeAd.headline}
                   </Text>
                 </NativeAsset>
               )}
+            </View>
 
-            {/* Price */}
-            {nativeAd.price && (
-              <NativeAsset assetType={NativeAssetType.PRICE}>
-                <Text style={[styles.priceText, priceStyles]}>
-                  {nativeAd.price}
-                </Text>
-              </NativeAsset>
-            )}
-
-            {/* Store */}
-            {nativeAd.store && (
-              <NativeAsset assetType={NativeAssetType.STORE}>
-                <Text style={[styles.storeText, storeStyles]} numberOfLines={1}>
-                  {nativeAd.store}
+            {nativeAd.body && (
+              <NativeAsset assetType={NativeAssetType.BODY}>
+                <Text numberOfLines={2} style={[styles.bodyText, bodyStyles]}>
+                  {nativeAd.body}
                 </Text>
               </NativeAsset>
             )}
           </View>
-
-          {/* Call To Action Button */}
-          {nativeAd.callToAction && (
-            <NativeAsset assetType={NativeAssetType.CALL_TO_ACTION}>
-              <View style={[styles.ctaButton, buttonActionStyles]}>
-                <Text style={styles.ctaText}>{nativeAd.callToAction}</Text>
-              </View>
-            </NativeAsset>
-          )}
         </View>
-
-        {/* Icon */}
-        {/* {nativeAd.icon && (
-          <NativeAsset assetType={NativeAssetType.ICON}>
-            <View style={styles.iconContainer} />
-          </NativeAsset>
-        )} */}
       </NativeAdView>
     </View>
   );

package/src/components/NativeStyles.ts

@@ -55,13 +55,14 @@ export const styles = StyleSheet.create({
     backgroundColor: '#F9F9F9',
   },
   adBadge: {
-    backgroundColor: '#FFCC00',
+    backgroundColor: '#57BF87',
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 3,
     fontSize: 10,
+    marginEnd: 10,
     fontWeight: '700',
-    color: '#666',
+    color: '#fff',
   },
   advertiserText: {
     fontSize: 11,
@@ -75,23 +76,22 @@ export const styles = StyleSheet.create({
     minHeight: 180,
     maxHeight: 250,
     alignSelf: 'center',
-    backgroundColor: '#F0F0F0',
   },
   contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
     padding: 12,
   },
   headline: {
     fontSize: 16,
     fontWeight: '700',
     color: '#000',
-    marginBottom: 6,
     lineHeight: 22,
   },
   bodyText: {
     fontSize: 13,
     color: '#666',
     lineHeight: 18,
-    marginBottom: 10,
   },
   infoRow: {
     flexDirection: 'row',
@@ -118,7 +118,8 @@ export const styles = StyleSheet.create({
   ctaButton: {
     backgroundColor: '#007AFF',
     paddingVertical: 10,
-    paddingHorizontal: 20,
+    marginHorizontal: 20,
+    marginBottom: 10,
     borderRadius: 6,
     alignItems: 'center',
     justifyContent: 'center',
@@ -129,13 +130,20 @@ export const styles = StyleSheet.create({
     color: '#FFFFFF',
   },
   iconContainer: {
-    position: 'absolute',
-    top: 8,
-    right: 8,
-    width: 36,
-    height: 36,
-    borderRadius: 18,
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    marginEnd: 10,
     overflow: 'hidden',
     backgroundColor: '#F0F0F0',
   },
+  icon: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  vHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
 });