Skip to main content

Advertisement

Start by reading the Interactive Advertising and Moderation - Promotions

The StreamLayerSDKAdvertisement component is a React component that allows you to render advertisements in your application. It is designed to display advertisement cards in various formats based on the advertisement card type. Also it render advertisement notifications.

Usage​

General​

We control which component is rendered. You should place sidebar, overlay and banner components and define direction.

import { StreamLayerProvider } from '@streamlayer/react'
import { StreamLayerSDKAdvertisement } from '@streamlayer/react/advertisement'

...
<StreamLayerProvider {...providerProps}>
  <div class="advertisement">
      <div class="sidebar">
          <StreamLayerSDKAdvertisement sidebar="left" layoutMode="side-by-side" />
      </div>
      <div class="banner">
          <StreamLayerSDKAdvertisement banner="bottom" layoutMode="side-by-side" />
      </div>
      <div class="overlay">
          <StreamLayerSDKAdvertisement />
      </div>
  </div>
</StreamLayerProvider>
...
  • sidebar and banner: for the L-Bar format
  • overlay: for the Overlay format
Show overlay format in sidebar and sidebar format in overlay​

In some cases you may want to render all advertisements in the sidebar or overlay no matter, and to avoid the need to render several components, you can use the skipTypeCheck prop.

<StreamLayerSDKAdvertisement sidebar="left" skipTypeCheck /> // render sidebar format and overlay format as sidebar
<StreamLayerSDKAdvertisement skipTypeCheck /> // render overlay format and sidebar format as overlay

Notification​

Before show the full advertisement, we can show the notification. To do this, moderator can configure notification for advertisement card, and you should configure it in the StreamLayerSDKAdvertisement component.

Follow this steps:

  1. Configure StreamLayerProvider
<StreamLayerProvider withAdNotification /> // enable rendering notifications for advertisement
  1. Place StreamLayerSDKAdvertisement
<StreamLayerSDKAdvertisement notification /> // render ad notification

Other options​

Show advertisement each time​

We mark the advertisement as viewed and then we doesnt show it again. If you want to show the advertisement each time, you can use the skipAutoClose` prop.

<StreamLayerSDKAdvertisement persistent />
Different layout based on the device type​

For desktop and mobile devices we can use different layouts. By default we render desktop variant. If you want to render mobile variant, you can use the isMobileScreen prop.

<StreamLayerSDKAdvertisement isMobileScreen />
Auto close mode​

Moderator can set the auto close mode for the advertisement.

With enabled auto close timer in the card, the advertisement card has next behavior:

  • The card is closed after the configured time.
  • The card close button disabled during the timer.

You can skip this behavior by using the skipAutoClose prop.

<StreamLayerSDKAdvertisement skipAutoClose />

Handling activated advertisements​

The StreamLayerProvider provides a onContentActivate callback that is triggered when an advertisement is activated with next params:

type Params = {
  stage: 'activate' | 'deactivate'
  id: string
  isViewed?: boolean
  hasNotification?: boolean
  hasBanner?: boolean
  type: 'advertisement'
}

You can use this callback to track the activation of the advertisement card and perform any necessary actions without rendering the StreamLayerSDKAdvertisement component.

For example you can use it to track the activation of the advertisement card and render StreamLayerSDKAdvertisement component only when it is activated.