Guides
Start typing to search…

Test Integration: Ads + Inplay Game

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 SDK.
  • Add StreamLayer SDK components to your application.
  • Configure the StreamLayer SDK to enable ads and inplay game features.
  • Set up an “Event” in StreamLayer Studio.
  • Position the overlay within your video experience.

Prerequisites

The StreamLayer SDK requires a valid SDK API key and a correctly configured environment. To enable partial integration (e.g., ads-only mode), you must first complete the full core integration. Before you start, follow the steps in the Prerequisites section of the Integration Guide.

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

Partial Integration Steps

1. Familiarize and Choose Your Features

Follow the Basic Terminology and Introduction sections in the Integration Guide

2. Place and Configure StreamLayer

Wrap only the parts of your app that require StreamLayer features.

Important:

  • Only one StreamLayerProvider is allowed in your app.
  • Do not use CSS to hide or show StreamLayerProvider. Use conditional rendering based on state or props.
  • The SDK core initializes once when StreamLayerProvider mounts and destroys on unmount.
  • Initialization loads required resources. For a smooth experience, render StreamLayerProvider in advance.

Advertising test integration

This integration is available to quickly integrate StreamLayer’s advertising capabilities. Follow the Advertising Integration Guide to set up the advertising features.

Snippets of code to integrate ads

1. Controlling Ads automatically by StreamLayer SDK

If you prefer not to select which UI to render, you can include a sidebar, banner, and overlay component in your layout. These components will only appear if the corresponding advertisements are activated.

import { StreamLayerProvider, StreamLayerSDKReact } from '@streamlayer/react'
import '@streamlayer/react/style.css'

export const Main = () => (
  <div className="main-container">
    <StreamLayerProvider sdkKey="your-sdk-key" event="your-event-id" containerId="SL-Ad-Container">
      <div className="content-container" id="SL-Ad-Container">
        <div className="ads-banner-container">
          <video />

          <div>
            <StreamLayerSDKAdvertisement banner='bottom' />
          </div>
        </div>

        <div className="ads-sidebar-container">
          <StreamLayerSDKAdvertisement sidebar='right' />
        </div>
      </div>
    </StreamLayerProvider>
  </div>
)
import { StreamLayerProvider, StreamLayerSDKReact } from '@streamlayer/react'
import '@streamlayer/react/style.css'

export const Main = () => (
  <div className="main-container">
    <StreamLayerProvider sdkKey="your-sdk-key" event="your-event-id" containerId="SL-Ad-Container">
      <div className="content-container" id="SL-Ad-Container">
        <video />

        <div>
          <StreamLayerSDKAdvertisement />
        </div>
      </div>
    </StreamLayerProvider>
  </div>
)
import { StreamLayerProvider, StreamLayerSDKReact } from '@streamlayer/react'
import '@streamlayer/react/style.css'

export const Main = () => (
  <div className="main-container">
    <StreamLayerProvider sdkKey="your-sdk-key" event="your-event-id" containerId="SL-Ad-Container">
      <div className="content-container" id="SL-Ad-Container">
        <video />

        <div>
          <StreamLayerSDKAdvertisement notification />
        </div>
      </div>
    </StreamLayerProvider>
  </div>
)

2. Controlling Ads manually through StreamLayer hooks

If you prefer to control the ads layout manually, you can use the useStreamLayerUI hook to manage the ad display. This allows you to show or hide ads based on your application logic. Context of this hook is described in the StreamLayer SDK React UI Context section.

To use this method, you need to configure the skipTypeCheck prop to true in the StreamLayerSDKAdvertisement component. This allows you to bypass type checks for the ad components, enabling more flexible usage.

import { StreamLayerProvider, StreamLayerSDKReact, useStreamLayerUI } from '@streamlayer/react'
import '@streamlayer/react/style.css'

const SdkApp = () => {
  const uiState = useStreamLayerUI()

  return (
    <div className="content-container" id="SL-Ad-Container">
      <div className="ads-banner-container">
        <video />

        {uiState.promotionBanner && (
          <div>
            <StreamLayerSDKAdvertisement banner='bottom' skipTypeCheck />
          </div>
        )}
      </div>

      {uiState.promotionSidebar && (
        <div className="ads-sidebar-container">
          <StreamLayerSDKAdvertisement sidebar='right' skipTypeCheck />
        </div>
      )}

      {uiState.promotionNotification && (
        <div className="ads-notification-container">
          {/* for notification skipTypeCheck is not required */}
          <StreamLayerSDKAdvertisement notification />
        </div>
      )}
    </div>
  )
}

export const Main = () => (
  <div className="main-container">
    <StreamLayerProvider sdkKey="your-sdk-key" event="your-event-id" containerId="SL-Ad-Container">
      <SdkApp />
    </StreamLayerProvider>
  </div>
)

Updated 5 months ago