Ad Support (React Native)

Setup Prerequisites

  • Firework React Native SDK is already integrated into your app.

  • Contact our business team you are coordinating with and ensure your Firework account has ads functionality enabled.

Google AdMob Support(Only supported on iOS)

Setup Native Project

iOS

Installation

Add the following codes in the Podfile of your iOS project.

pod 'FireworkVideoGAMSupport', '0.3.0'

FireworkVideoGAMSupport depends on Google-Mobile-Ads-SDK.

Additional steps required by Mobile Ads SDK (iOS)

  1. Please refer to the instruction to update your Info.plist.

  2. Ensure compliance with user consent policies by reviewing the Google User Messaging Platform (UMP) Get Started guide.

Please refer to the Mobile Ads SDK (iOS) document for more details.

Integration

In your iOS project, you need to call FireworkVideoGAMSupportSDK.initializeSDK() in application(:, didFinishLaunchingWithOptions:) -> Bool method.

import FireworkVideoGAMSupport

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
    FireworkVideoGAMSupportSDK.initializeSDK()
    
    return true
}

If your AppDelegate class is written by Objective-C, you should create a Swift file to call the API. For example, you could create FireworkSupportLibraryBridge.swift and add the following codes.

import Foundation
import FireworkVideoGAMSupport

@objc
public class FireworkSupportLibraryBridge: NSObject {
  @objc public static func enableVideoGAM() {
    FireworkVideoGAMSupportSDK.initializeSDK()
  }
}

Then add [FireworkSupportLibraryBridge enableVideoGAM]; on application:didFinishLaunchingWithOptions: method.

// You should change the file to Objective-C Generated Interface Header name.
// Generally, it's "{TargetName}-Swift.h"
#import "FireworkSdkExample-Swift.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [FireworkSupportLibraryBridge enableVideoGAM];
  return YES;
}

You should use the Google User Messaging Platform to obtain user consent if required for your geography. To customize the setup of the SDK until after user consent is obtained, call FireworkVideoGAMSupportSDK.initializeSDK with startGADMobileAds set to false.

import FireworkVideoGAMSupport

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
    FireworkVideoGAMSupportSDK.initializeSDK(startGADMobileAds: false)
    
    return true
}

If your AppDelegate class is written by Objective-C, you should create a Swift file to call the API. For example, you could create FireworkSupportLibraryBridge.swift and add the following codes.

import Foundation
import FireworkVideoGAMSupport

@objc
public class FireworkSupportLibraryBridge: NSObject {
  @objc public static func enableVideoGAM() {
    FireworkVideoGAMSupportSDK.initializeSDK(startGADMobileAds: false)
  }
}

Then add [FireworkSupportLibraryBridge enableVideoGAM]; on application:didFinishLaunchingWithOptions: method.

// You should change the file to Objective-C Generated Interface Header name.
// Generally, it's "{TargetName}-Swift.h"
#import "FireworkSdkExample-Swift.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [FireworkSupportLibraryBridge enableVideoGAM];
  return YES;
}

After user consent is obtained, then follow the instruction for starting the Mobile Ads SDK (iOS).

Android

  1. Please refer to the Mobile Ads SDK (Android) to add your AdMob app ID to your app's AndroidManifest.xml file.

  2. Ensure compliance with user consent policies by reviewing the Google User Messaging Platform (UMP) Get Started guide.

Google IMA Support

Setup Native Project

iOS

Installation

Add the following codes in the Podfile of your iOS project.

pod 'FireworkVideoGIMASupport', '0.2.0'

FireworkVideoGIMASupport depends on GoogleAds-IMA-iOS-SDK. For more details, please refer to IMA SDK for iOS.

Integration

In your iOS project, you need to call FireworkVideoGIMASupportSDK.enableIMAAds() in application(:, didFinishLaunchingWithOptions:) -> Bool method.

import FireworkVideoGIMASupport

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
    // We should put FireworkVideoGIMASupportSDK.enableIMAAds()
    // inside the block of DispatchQueue.main.async.
    DispatchQueue.main.async {
      FireworkVideoGIMASupportSDK.enableIMAAds()
    }
    
    return true
}

If your AppDelegate class is written by Objective-C, you should create a Swift file to call the API. For example, you could create FireworkSupportLibraryBridge.swift and add the following codes.

import Foundation
import FireworkVideoGIMASupport

@objc
public class FireworkSupportLibraryBridge: NSObject {
  @objc public static func enableVideoGIMA() {
    // We should put FireworkVideoGIMASupportSDK.enableIMAAds()
    // inside the block of DispatchQueue.main.async.
    DispatchQueue.main.async {
      FireworkVideoGIMASupportSDK.enableIMAAds()
    }
  }
}

Then add [FireworkSupportLibraryBridge enableVideoGIMA]; on application:didFinishLaunchingWithOptions: method.

// You should change the file to Objective-C Generated Interface Header name.
// Generally, it's "{TargetName}-Swift.h"
#import "FireworkSdkExample-Swift.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [FireworkSupportLibraryBridge enableVideoGIMA];
  return YES;
}

We should put FireworkVideoGIMASupportSDK.enableIMAAds() inside the block of DispatchQueue.main.async.

Android

No code configuration is required.

Ad Badge Customizations

Show or hide the ad badge on the video feed item

<VideoFeed
  style={{ height: 200 }}
  source="discover"
  videoFeedConfiguration={{
    // Indicates if the video feed item shows the ad badge.
    showAdBadge: true, // or false
  }}
/>

Set ad badge configuration

FireworkSDK.getInstance().setAdBadgeConfiguration({
  badgeTextType: 'ad',
  backgroundColor: '#ff0000',
  textColor: '#000000',
});

Last updated