jwplayer/jwplayer-react-native

[ASK] How to implement pre, mid and post rolls

Closed this issue · 6 comments

Solly74 commented

I've installed the latest version of this sdk and I'm using React Native v0.73.4

Previously we had a set up like this which worked on both iOS and Android for pre rolls:

JWConfig => ({ advertising: { adClient: 'ima', adSchedule: [{offset: 'pre', tag: Config.GOOGLE_ADTAG_URL}], }, autostart: false, backgroundAudioEnabled, category: 'Playback', categoryOptions: ['AllowBluetooth'], enableLockScreenControls: true, landscapeOnFullScreen: true, license: IS_ANDROID ? Config.JW_PLAYER_LICENSE_ANDROID : Config.JW_PLAYER_LICENSE_IOS, mode: 'SpokenAudio', pipEnabled: false, playlist: [ { file: videoURI ?? '', image: imageURI ?? undefined, title: '', }, ], portraitOnExitFullScreen: true, styling: videoStyle, });

With this SDK it only works on Android, on iOS no pre rolls play.

I tested some of the example code in the repo using:

JWConfig => ({ advertising: { client: 'googima', }, autostart: false, backgroundAudioEnabled, category: 'Playback', categoryOptions: ['AllowBluetooth'], enableLockScreenControls: true, landscapeOnFullScreen: true, license: IS_ANDROID ? Config.JW_PLAYER_LICENSE_ANDROID : Config.JW_PLAYER_LICENSE_IOS, mode: 'SpokenAudio', pipEnabled: false, playlist: [ { adschedule: { adBreak1: { ad: { source: 'googima', tag: Config.GOOGLE_ADTAG_URL, }, }, }, file: videoURI ?? '', image: imageURI ?? undefined, title: '', }, ], portraitOnExitFullScreen: true, styling: videoStyle, });

This allows pre rolls to work on both iOS and Android however,

  1. How do I get mid and post rolls working?
  2. This code results in typing errors, adschedule does not exist on type playlistItem and client does not exist on type Advertising
  3. Is 'googima' the correct source/client to use as opposed to 'ima'?
Jmilham21 commented

Hi @Solly74, what version of the React Native wrapper was this configuration working on? Was it in the now legacy repository, seen here? If so, you may want to review the changes in default configurations. If you use the prop forceLegacyConfig: true, your config from the older repository should still function as before.

  1. They do work when placed on the playlist or player item through the advertising prop in the schedule object. Please provide a specific configuration with your ad tag (if you do not have a sample ad tag, you can raise this issue with our support for confidential communication) and media so we can test as close to your configuration as possible.
  2. The type definition has been updated in 1.0.0, but we had to respect the legacy types, causing possible confusion. The new JwPlaylistItem has adschedule and schedule (array of objects or object of objects) props and the refreshed adclients do have the option for schedules.
  3. googima is the correct source/client when using our refreshed props as it's the expectation from our parsers on the native code. This is more in line with our other products.
  • 👍1
Solly74 commented

Thank you @Jmilham21 the forceLegacyConfig: true worked as previously. We were using the now legacy repository and we're switching over to this one.

  1. Using the legacy wrapper I've tried this with no luck. We have an ad tag that works for pre rolls but the same tag doesn't work for mid and post. However when only using mid and post then it works, the moment I add pre rolls, the mid and post don't play , only the pre rolls play and sometimes I can see the little stub in the seekbar for the mid roll but nothing plays. Is it ok to use the same ad tag for pre, mid and post?

  2. I've seen JwPlayListItem but the adschedule type is JwAdBreak[] and in the single example the adschedule is a single object. So not sure how to type the example?

I've tried using the refreshed props using the tag in the example and I face the same issue as I do in 1.

{ advertising: { client: 'googima', schedule: [ { ad: { source: 'googima', tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=', }, offset: 'pre', }, { ad: { source: 'googima', tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=', }, offset: 'mid', }, { ad: { source: 'googima', tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=', }, offset: 'post', }, ], }, autostart: false, backgroundAudioEnabled: true, category: 'Playback', categoryOptions: ['AllowBluetooth'], enableLockScreenControls: true, license: IS_ANDROID ? Config.JW_PLAYER_LICENSE_ANDROID : Config.JW_PLAYER_LICENSE_IOS, playlist: [ { file: 'https://content.bitsontherun.com/videos/q1fx20VZ-52qL9xLP.mp4', title: 'Single Inline Linear Preroll', }, ], title: 'Single Inline Linear Preroll', };

Does the above config look ok? Only the pre rolls work, if I remove the pre rolls then mid and post work fine.

Do you have an example of a video with pre, mid and post rolls that I could look at?

Jmilham21 commented

@ Solly74 iOS may not be parsing these tags correctly. I can verify your claim using your config. Your config works fine on Android and matches the pattern I expected. One thing to note is that don't use mid as an offset. If you want it in the middle, use 50%, or if you know a timestamp, you can set that.

I'm leaving this open and think this may be either a bug or bad documentation regarding how Android/iOS may parse advertising configs differently. I will let our iOS engineers know and ask them to take a look.

Solly74 commented

@Jmilham21 Thank you. I've tried 50% for iOS it doesn't work, however the timestamp does and 100% works. 50% and 100% both work for Android.

Another thing to note is the current ad tag we're using works for pre, 50% and 100% on Android but on iOS it only works for the pre roll. The sample ad tag found here works on iOS

Is there something specific we need to add to the tag for mid and post rolls or should it work on iOS considering it works on Android?

david-almaguer commented

Hey @Solly74! I have found this issue kinda strange to me because it's working in Android, but could you please try to add these query params to the preroll ad url &vpos=preroll&pod=1, these ones for the mid roll &vpos=midroll&pod=2, and, these ones for the post roll &vpos=postroll&pod=3.

Google hosts try to protect customers by preventing serving too many ads in a "short" period of time, so you need to specify certain query params to get the valid VAST ad info.
If you try to request this google's ad tag url multiple times in a browser https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=, you should get an empty VAST ad after the second attempt.

For more info: VAST Ad Tag Url Params
cc. @Jmilham21

  • 👍1
  • 🎉1
Solly74 commented

Thank you @david-almaguer
That was the issue.

This could be included in the documentation? @Jmilham21