Test Integration: Advertising (React Native)

Test Advertising

The Test Advertising integration provides a quick way to explore StreamLayer's advertising capabilities in a live or simulated environment. A moderator can manually insert contextual ad units tied to game action, or the system can deliver them automatically on a fixed schedule (for example, every five minutes).

Ad units can appear as notifications and StreamLayer Elements or in a squeeze-back L-bar format. Depending on the ad format, viewers can interact with them in several ways, including saving a promotion to their digital wallet, scanning a QR code, or opening another application or web page.

During testing the standard StreamLayer Launch Button and other feature sub-menus are hidden so the viewer's focus stays on the ad experience. A moderator uses StreamLayer Studio to create and activate ad units, and the StreamLayer team will provide your team with Studio access.

1052 — *examples of how the Test Advertising integration will appear in your app. Example 1 is an overlay. Example 2 is squeeze back.

Prerequisites

Obtain an SDK API Key

Provide your email address to the StreamLayer team. We will create an organization for you on our platform including a personal dashboard. You will receive an invitation email with a link to StreamLayer Studio and your authentication credentials. After gaining access, you can generate an API key in the development section of StreamLayer Studio. This key authenticates your application with StreamLayer servers and is required for all interactions.

Once authenticated, you can view, create content for, and moderate events using StreamLayer Studio. See About StreamLayer Studio for an overview.

Integration Steps

1. Complete the Core Integration

To enable a partial integration such as ads-only mode, you must first complete the full core integration. Follow the setup instructions for your architecture:

Only after completing the base integration should you proceed with the advertising-only customization below.

2. Configure the StreamLayer View for Ads Only

Add the following keys inside the getViewConfig() function's return object in your integration:

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

    // 🔽 Additional optional view configuration:
    integrationMode: "ADS_ONLY",           // 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
  }
}

3. Configure L-Bar Mode

If L-bar squeeze-back formats are desired, set the lbarMode property in your view configuration:

    lbarMode: "FULL"/"FULLFLEXIBLE"

FULL mode — The L-bar always occupies the lower space regardless of whether a banner is present. This keeps the reserved space constant even when no banner is displayed.

FULLFLEXIBLE mode — The L-bar only occupies space when a banner is present. If no banner is displayed, the content fully utilizes the available space.

Integration Guide — Complete SDK setup instructions
Test Integration: Ads + Inplay Game — Advertising with gamification test setup
Test Integration: Advertising (Android) — Android advertising test setup
Test Integration: Advertising (iOS) — iOS advertising test setup