Advertisements

When you use the Wowza Flowplayer in you React Native applications, you can incorporate advertisements to monetize content and engage your viewers.

The React Native SDK supports IMA3-based Video Ad Serving Template (VAST) and Video Multiple Ad Playlist (VMAP) ad integrations. It also accommodates popular third-party software-building tools like Google's Interactive Media Ads (IMA) SDK. With these technologies, you can customize your viewer's ad experiences and manage ad schedules and breaks within the player.

For more information about listening to ad events and handling advertising errors, see the following pages. You can also see our demo for examples of how to handle ad-related events.

• Listen for events
• Handle errors

Before you start

To configure advertisements for use with the player in your React Native application, you must meet the following prerequisites:

• You must complete the Get started and Set up the player guides to configure your local environment.
• You must have access to Wowza Video for the advertising configuration.
• You must generate a player token in Wowza Video and set up the player to use this token.

Configure your ads

With the React Native SDK, you can incorporate ads into the player display for your React Native applications. You can only load Wowza Video media files, such as videos or live streams, and attach ad schedules to them. This advertising feature for the React Native SDK is not available for remote files.

All ad schedule configurations must be completed in the Wowza Video platform. The next two sections describe how to set up ads for your video and live stream content when using the React Native SDK.

Set up client-side ads for videos

To configure your player with the React Native SDK and define how it loads ads for video content from Wowza Video, use the following steps.

1. Begin by adding your video content on the Videos page in Wowza Video.
2. Once you create the video, go to the video's Metadata tab and note the media Id . This serves as the mediaId value to load Wowza media when using our SDKs. For more, see Retrieve a video ID .
3. Go to Advertising > Ad tags in Wowza Video to create your ad tags .
4. Go to Advertising > Ad schedules in Wowza video to create your ad schedule . To set up a DAI ad schedule, see Create a Google Ad Manager DAI ad schedule in Wowza Video. Save your ad schedule.
5. Go to Players > Configurations in Wowza Video to add a new player configuration . When you add the player configuration, select the ad schedule you created in step 4 from the Ad Schedule dropdown. Save your changes.
6. Once you create the player configuration, go to the General tab for this configuration and note the configuration Id . This serves as the playerId value to load Wowza media when working with our SDKs.

For example, if you take the App.tsx file in our demo application, you can use the mediaId and playerId values from the previous steps as follows:

const MEDIA_WOWZA: FlowplayerMedia = {
  mediaId: "5bf95d0e-edb8-4fb8-8b4c-65afa6e2a8ee",
  playerId: "854eb3d3-ff01-43e6-80ad-97192ea68641",
};

Set up client-side ads for live streams

To configure your player with the React Native SDK and define how it loads ads for live stream content from Wowza Video, use these steps. For live streams, you can only include pre-roll advertisements.

1. Begin by adding your live stream on the Live streams page in Wowza Video.
2. Once you create the live stream, go to the live stream's Overview tab, check the Playback section, and note the media Id . This serves as the mediaId value to load Wowza media when using our SDKs. For more, see Retrieve a live stream ID .
3. Go to Advertising > Ad tags in Wowza Video to create your ad tags .
4. Go to Advertising > Ad Schedules in Wowza Video to create your ad schedule . Make sure to only add an option from the Pre-roll dropdown. Save this ad schedule.
5. Go to Players > Configurations in Wowza Video to add a new player configuration . When you add the player configuration, select the ad schedule you created in step 4 from the Ad Schedule dropdown. Save your changes.
6. Once you create the player configuration, go to the General tab for this configuration and note the configuration Id . This serves as the playerId value to load Wowza media when working with our SDKs.

For example, if you take the App.tsx file in our demo application and this example URL https://app.wowza.com/livestreams/zxxtsj2b, you can use these values for the mediaId and playerId when working with the React Native SDK:

const MEDIA_WOWZA: FlowplayerMedia = {
  mediaId: "zxxtsj2b",
  playerId: "513852a4-18c8-474a-88c7-dc54d4f03555",
};