Integrate VAST Ads for Pre-Roll Mid-Roll Post-Roll

[FullstackJack]

Both Android and iOS possess the capability to integrate with third-party Video Ad Serving Tempaltes (VAST) services to pre-roll, mid-roll, and post-roll ads interspersed with video playback. If React Native is to be considered a serious replacement for native app development, we need a mechanism to generate ad revenue from video views.

As mentioned, there are pre-existing native solutions that exist for both iOS and Android platforms. Interactive Media Ads (IMA) SDK is one such solution which integrates with both. The IMA SDK is maintained by Google.

IMA SDK integrates with DoubleClick for Publishers (DFP), Google AdSense network, or any VAST-compliant ad server. Google Developers has documentation for integration on each platform.

IMA Platform Support Matrix Android Get Started iOS Get Started

[OrenMe]

Hi @FullstackJack, do you have an example of IMA SDK for Android or iOS that actually works? From a couple of experiments with Android it seems that if you wrap IMA SDK in a RN component then there are some weird quirks with the clocks and the outcome is that although ad request does load and also the ad creative (you can see it in a network sniffer) the IMA SDK always emits an error and ad playback fails.

[FullstackJack]

I wish I did, but I hadn't made it to that point before switching to a new project. I was working on a prototype and the company Ibwas building it for decided to spend a huge amount of money on full native versions instead. Maybe I'll come back to it someday.

[OrenMe]

Thanks @FullstackJack. I asked around with the IMA SDK team but unfourtounatly they are not supporting react native officially yet.

[brinkkemper]

I've spend the past couple of days trying to get this to work. If it works I could contribute to this project. However, I'm horribly stuck on this strange issue: Google IMA webview is not showing when used inside react native on android Perhaps someone here has the solution?

[benoit-ponsero]

Hi, any news on this feature ? it could be interesting to have

[riza]

Hi, any alternative for VAST on react-native? its very important feature of mobile apps.

[orhunkupeli]

Hi, Is there any improvements about issue?

[dbramwell]

Hi all. I've taken a stab at forking react-native-video and adding google's IMA SDK to the IOS Video player and Android Exoplayer.

It's very much a work in progress, but it'd be useful to get people's thoughts on it.

https://github.com/EndemolShineGroup/react-native-video-with-ads

[FullstackJack]

Hi all. Long time no see. I'm back with renewed hope that my employer will support my efforts to replace those expensive bifurcated app silos they built with a unified React Native solution so I'll try my hand at this as well. I just found out that ExoPlayer has a plug-in for DFP so that may resolve half the battle. Sorry I couldn't help much earlier.

[FullstackJack]

@dbramwell How did you work on this project locally? I've spent several hours trying to use a symlink module to no avail. Found out Metro Bundler doesn't like symlinks so I installed Haul and still having massive problems getting that to run. It now complains about Module Build Failed from thread-loader, I had to install react, react-native, in react-native-video. Would love to try the your solution as well, have you considered creating a PR?

[FullstackJack]

Ok, switched to using example projects and can get it running, but had to upgrade to API 26 and Gradle 4.6 since I have latest Android Studio installed. Now my problem is I can only get simple player working. ExoPlayer crashes

[dbramwell]

Hi @FullstackJack. Yeah I struggled to set it up locally also. I think in the end I just added react-native-video with yarn and then made changes directly to the code in node_modules. Obviously not the best workflow...

I've thought about a pull request, but I think the implementation is a bit sloppy at the moment. I pretty much just copied the samples from the IMA SDK site into the right places (for ios and exoplayer, didn't touch the others which is probably why simple player still works for you). This means it adds the google ad SDKs by default which isn't ideal for everyone.

I guess in IOS we could do something similar to how the VideoCaching module works (Objective C is a massive black box for me. This is the first time I've as much as read it, let alone tried to program in it)? Not sure how it'd work with ExoPlayer. Do you have any thoughts on this?

Do you get any specific errors when Exoplayer crashes?

[brinkkemper]

Check out this app. Me and the team got it working super smooth up from iphone 4s and android 4.0

https://play.google.com/store/apps/details?id=be.persgroep.android.news.mobilead

Its a commercial project and I can't open source the code. But it is definitly possible.

Op ma 22 okt. 2018 03:19 schreef Kyle Bedell notifications@github.com:

Ok, switched to using example projects and can get it running, but had to upgrade to API 26 and Gradle 4.6 since I have latest Android Studio installed.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/react-native-community/react-native-video/issues/488#issuecomment-431721573, or mute the thread https://github.com/notifications/unsubscribe-auth/AHXsdVsvCEzHb9ANEv6uQHoVNxw0yyCVks5unR0GgaJpZM4L9mAD .

[FullstackJack]

@dbramwell I haven't tried running your solution yet, just wanted to get the basic example working first which I now have working after lots of Gradle changes for Gradle 4.6, SDK 28 and Java 8. I will try to run yours, but I am hoping we can have a comprehensive solution. Is there a way to allow ads to be additive code that only gets included if uncommented in Gradle? How about with iOS? I'll look into this.

[aamirnbs]

Hi all. I've taken a stab at forking react-native-video and adding google's IMA SDK to the IOS Video player and Android Exoplayer.

It's very much a work in progress, but it'd be useful to get people's thoughts on it.

https://github.com/EndemolShineGroup/react-native-video-with-ads

@dbramwell I was about to integrate react-native-video-with-ads in my application. As you said it is very much work in progress, do you know how much it supports for ads (Google ad manager ads etc.) or what are their TO-DOs. It will be very helpful. Thanks

[dbramwell]

Hi @aamirnbs, my focus changed at work so I've not played with this for a while. I had it working with some VAST sample ads on both IOS and Android. There are samples here: https://developers.google.com/interactive-media-ads/docs/sdks/html5/tags

If I remember rightly the VPAID ones didn't work, but I'm not sure.

[zikwall]

Hi! I would like to know if the implementation of advertising in the player works? I just can’t start...

https://github.com/EndemolShineGroup/react-native-video-with-ads

[robbywh]

Hello,

i have create a PR to play ad url on react-native-video with ima SDK : https://github.com/react-native-community/react-native-video/pull/1839

Please review for my code

[zikwall]

Hi @RobbyWH, Will there be support for event props in the future?

[robbywh]

Hello @zikwall , I have no plans for that in the near future

[Utkarshkataria]

Anyone can asnwer how to add the ads in react native video player??

[Utkarshkataria]

Hello @zikwall , I have no plans for that in the near future

Hello @RobbyWH are you gonna add the VAST tag in library in near Future now? Thanks

[robbywh]

hello @Utkarshkataria, i still wait for review, so i can merge this PR, after the review is OK.. This is my PR : https://github.com/react-native-community/react-native-video/pull/1839

if you want to add the ads, maybe you can use my branch for a while : https://github.com/RobbyWH/react-native-video/tree/implement-ima-sdk

[Utkarshkataria]

hello @Utkarshkataria, i still wait for review, so i can merge this PR, after the review is OK.. This is my PR : #1839

if you want to add the ads, maybe you can use my branch for a while : https://github.com/RobbyWH/react-native-video/tree/implement-ima-sdk

is it working? because i am adding a fast tag url to adtag prop but nothing happening.

[robbywh]

@Utkarshkataria Have you tried my sample code ?

const adTagUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/"
+ "ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp"
+ "&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite"
+ "%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=";

adTagUrl={adTagUrl}

and add it in your package.json, with spesific branch

   "react-native-video": "git://github.com/RobbyWH/react-native-video.git#implement-ima-sdk",

[Utkarshkataria]

https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/"

• "ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp"
• "&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite"
• "%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=

yes i even did npm install after adding this "react-native-video": "git://github.com/RobbyWH/react-native-video.git#implement-ima-sdk" in package.json and used that adtag prop but not showing the ad's in starting or ending.

[robbywh]

@Utkarshkataria : Have you used the right prop? the right prop is adTagUrl not adTag

[Utkarshkataria]

@Utkarshkataria : Have you used the right prop? the right prop is adTagUrl not adTag

Yes i have used the exact prop you have given in documentation. when are u gonna merge it in your main branch?

[robbywh]

@Utkarshkataria : what platform do you use? i only implement IMA SDK in android exoplayer and iOS

i think i'm not gonna merge it in my main branch, i hope i can merge it in the react-native-video immediately, after the review is OK

[Utkarshkataria]

@Utkarshkataria : what platform do you use? i only implement IMA SDK in android exoplayer and iOS

i think i'm not gonna merge it in my main branch, i hope i can merge it in the react-native-video immediately, after the review is OK

i am working on react native i have installed your library react-native -video with a specific branch as well and using the specific prop from documentation.

[robbywh]

@Utkarshkataria i mean what device you use for testing ? (iOS/Android)

if you use android device, it is only working if you use android exoplayer

you must set this on your android/settings.gradle :

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

you can check the complete step in this : https://github.com/react-native-community/react-native-video/blob/2738892631fda1b9cebc894ce51cb875f5dddd9a/README.md#android-installation

[Utkarshkataria]

include ':react-native-video' project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

yes android device, Android X wont add these by itself? otherwise i'll add it manually and check again. Thanks for helping man. And great Library @RobbyWH :)

[robbywh]

no @Utkarshkataria , we must setup manually, if we want use the android exoplayer in react-native-video

Your welcome @Utkarshkataria

[FullstackJack]

In case you really need ads and are open to hack solutions. Our team abandoned trying to use this module and just wrote a simple WebView video player using an HTML5 player. If you think about it, the browsers are built with native-backed code, i.e. ExoPlayer and AVFoundation. All you have to do is build a mobile friendly iframe video player, pass through some URLs and blamo! It actually works pretty well and you can bring in IMA SDK. We tested performance and it actually performs better than our own attempt to build a React Native Video Player with Ads natively. We did this because we couldn't afford any more time to make the native approach work. I'm not recommending this a hard and fast approach, but it's at least a stopgap measure to satisfy the business requirements.

[Utkarshkataria]

no @Utkarshkataria , we must setup manually, if we want use the android exoplayer in react-native-video

Your welcome @Utkarshkataria

hello @RobbyWH i am having issue with PictureInPicture prop too its not working by adding PIP prop true.. do it also require some manual code in android ? thanks.

[robbywh]

@Utkarshkataria Hello, i think pictureInPicture prop only working for iOS platform right now. If you want to make it work for android, you must adding native code in android

[luiscerqueira]

@RobbyWH I tested this branch on android with some ads (google test ads + other vast ads) and it's working.

Is there anything missing for this feature to be merged?

@Utkarshkataria I don't know which react-native version you are using, but maybe this can help:

react-native.config.js

module.exports = {
  dependencies: {
    'react-native-video': {
      platforms: {
        android: {
          sourceDir: '../node_modules/react-native-video/android-exoplayer',
        },
      },
    },
  },
};

You need to tell react-native to use the react-native-video exoplayer implementation

[robbywh]

hello @luiscerqueira , i still wait my PR to be approved by reviewer, but no response until now : https://github.com/react-native-community/react-native-video/pull/1839

[arslan-akh]

@Utkarshkataria : what platform do you use? i only implement IMA SDK in android exoplayer and iOS

i think i'm not gonna merge it in my main branch, i hope i can merge it in the react-native-video immediately, after the review is OK

Hello, @RobbyWH I try to use your branch for integrate ads for iOS but same problem as @Utkarshkataria nothing happening after adding prop adTagUrl

[arslan-akh]

And there are any progress for ads integration for react native video in core as extension or something else?

[robbywh]

hello @arslan-akh what platform do you use?

you can check this PR to see the progress : https://github.com/react-native-community/react-native-video/pull/1839 https://github.com/react-native-community/react-native-video/pull/1740

[arslan-akh]

hello @arslan-akh what platform do you use?

you can check this PR to see the progress :

https://github.com/react-native-community/react-native-video/pull/1839

https://github.com/react-native-community/react-native-video/pull/1740

Hello, I try on iOS 13.4

[robbywh]

@Utkarshkataria Have you tried my sample code ?

const adTagUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/"
+ "ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp"
+ "&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite"
+ "%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=";

adTagUrl={adTagUrl}

and add it in your package.json, with spesific branch

   "react-native-video": "git://github.com/RobbyWH/react-native-video.git#implement-ima-sdk",

hello @arslan-akh have you tried this ?

[arslan-akh]

@Utkarshkataria Have you tried my sample code ?

const adTagUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/"

+ "ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp"

+ "&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite"

+ "%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=";

adTagUrl={adTagUrl}

and add it in your package.json, with spesific branch

   "react-native-video": "git://github.com/RobbyWH/react-native-video.git#implement-ima-sdk",

hello @arslan-akh have you tried this ?

Yes of course. Also I did integration ima sdk from zero with fresh fork of react-native-video and I use your pr as reference but ad not started. Now I use react-native-with-ads it’s work but I want use fresh react native video version.

[arslan-akh]

@Utkarshkataria I don’t no why but [adsManager start] not started ads and I did debug requestAds method in RCTVideo I see adTagUrl link and I think ad requested but not started through adsManager

[robbywh]

@arslan-akh have you tried the basic example : https://github.com/RobbyWH/react-native-video/tree/implement-ima-sdk/examples/basic ?

i have updated the basic sample code

[arslan-akh]

@arslan-akh have you tried the basic example : https://github.com/RobbyWH/react-native-video/tree/implement-ima-sdk/examples/basic ?

i have updated the basic sample code

Hello, thank you it works but only in native or embed mode but not on custom skin mode is it ok? I have custom skin with my own implementation, should it reason why ad not working for me?

[robbywh]

@arslan-akh Maybe the reason why it is not working because the custom skin, because i never tested the code with the custom skin

Beside of that, I have hold my MR, because the contributors don't want make IMA SDK a required dependency for all users of react-native-video, they are want add the IMA SDK via an extension mechanism

[Buddikazz]

@RobbyWH hello,thank you for your update can i play ad every 10 minutes using your basic sample

[Buddikazz]

@RobbyWH can u help me on playing ad every 10 minutes without vmap.Your sample is working