Test Integration: Ads + Inplay Game (React Native)

Test Advertising and Games: This integration integrates StreamLayer’s games PLUS advertising capabilities. These features allow a moderator to manually or automatically insert contextual ads and game prompts (polls, trivia, prediction, insights, highlighted tweets) relevant to game action or based upon a pre-determined cadence (i.e., every 5 minutes). Ads, game questions, or insights can be received with or without a notification and in an overlay or a squeeze back L-bar format. From ads, depending on the format, viewers can take certain actions from the ads like saving a promotion to wallet, scanning a QR code, or linking out to another application or web page. The typical StreamLayer launch menu and other feature sub-menu options will be hidden. However, clients have the option to insert a custom button they can tap to view their Games home tab to access old questions they may have missed while away or the leaderboard to see how they are tracking against their friends.

This test would require a moderator to utilize StreamLayer Studio to create and activate ads or questions and is a good way for your team to explore how these features' interactivity could be deployed over various types of programming. For this test implementation, the StreamLayer team will provide you access to StreamLayer Studio to create and moderate relevant content.

If the Test Ads and Gamification Feature is of interest, the StreamLayer development team is on-hand and available to ensure the integration is done smoothly and properly. The steps to get started that are covered in this guide are:

• Prerequisites and SDK API key setup
• Install the StreamLayer test SDK. This can be done via the Carthage Package Manager or manually.
• Initialize the SDK.
• Create the StreamLayer ViewController.
• Set up an “Event” in StreamLayer Studio.
• Position the overlay within your video experience.

Prerequisites

Obtain an SDK API Key

Provide [email protected] with your email. We will use this to create a new organization for you on our backend platform, StreamLayer Studio. You will then receive an invitation email with a link for authentication. After receiving access to the admin panel, the StreamLayer team will generate an API key for your organization. This API authenticates your application with our servers and is required for all interactions.

Once you have authenticated and accessed your organization within StreamLayer Studio, you can view, create content for, and moderate events using our platform. See an overview of StreamLayer Studio here.

Partial Integration Steps

1. Install the StreamLayer SDK

To enable partial integration (e.g., ads-only mode), you must first complete the full core integration. Please follow the setup instructions provided here:

React Native & Expo Old Architecture Integration Guide

For New Architecture React Native

Only after completing the base integration should you proceed with customizing features like gamification, ads-only mode, or tooltips.

Add StreamLayer View Configuration Extension

The following additional keys should be added inside the getViewConfig() function's return object in your React Native or web integration

function getViewConfig(): StreamLayerViewConfiguration {
  return {
    viewNotificationFeatures: new Array(
      StreamLayerViewNotificationFeature.Games,
      StreamLayerViewNotificationFeature.Chat,
      StreamLayerViewNotificationFeature.WatchParty,
      StreamLayerViewNotificationFeature.Twitter
    ),
    isGamesPointsEnabled: true,
    isGamesPointsStartSide: false,
    isLaunchButtonEnabled: true,
    isMenuAlwaysOpened: false,
    isMenuLabelsVisible: true,
    isMenuProfileEnabled: true,
    isTooltipsEnabled: false,             // disables tooltip overlays (set to true to enable)
    isWatchPartyReturnButtonEnabled: true,
    isWhoIsWatchingViewEnabled: false,    // disables the “who is watching” panel
    isOverlayExpandable: true,
    overlayHeightSpace: 300,
    overlayWidth: 0,
    overlayLandscapeMode: StreamLayerViewOverlayLandscapeMode.Start,

    // 🔽 Additional optional view configuration:
    integrationMode: "ADS_INPLAY",         // indicate your part integration mode 
    phoneContactsSyncEnabled: false,       // disables uploading/syncing user’s contact list
    shouldIncludeTopGestureZone: false,    // disables top swipe zone to open overlay
    notificationsMode: "SILENT",           // disables sounds/vibrations on notifications
    isLBarEnabled: true,                   // enables L-bar by default for all ads
    lbarMode: "FULL"/"FULLFLEXIBLE"               // "FULL" = persistent full bar; "FULLFLEXIBLE" = adapts based on content
  }
}

Use a sideBar

In order to enable sideBar when the bottom content of LBar is not provided apply config:

    lbarMode: "FULL"/"FULLFLEXIBLE"   

• LBar mode "FULL::
  Use this mode when you want the L-bar to always occupy the lower space, regardless of whether there is a banner present. This ensures that the reserved space for the L-bar remains constant, even if no banner is displayed.

• 

• LBar mode "FULLFLEXIBLE:
  Use this mode when you want the L-bar to only occupy space when a banner exists. If no banner is present, the lower space will not be shown, allowing the content to fully utilize the space.

  
  

7. If overlays are desired, position the overlay and handle system orientation.

Position the Overlay ViewController.

We have excerpted the implementation of orientation handling from the Sample Integrations found in the repository along with the SDK. In this example, we use SnapKit and RxSwift for simplicity. Neither of these is required, but it allows us to demonstrate the functionality of our framework quickly. You can position the overlay in whatever way best suits your current markup style. Please note that this example may not work with your integration if you perform a simple cut and paste. This example code works with the Sample Integrations it was pulled from. See the full demo application for additional details.

The complete demo source code is available here: https://github.com/StreamLayer/sdk-ios/tree/sample-games

Extend the file you've created in Step 5 with the following:

Visually this would result in the following representation:

• A stands for your video player area
• B stands for overlayVC.view
• C stands for overlayView
• Reference View is overlayReferenceView

8. Spoiler Prevention / Data-Syncing

If your video is timestamped, data syncing for ads and game content is available. To enable Spoiler Prevention, please reference the Spoiler Prevention Guide.