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 <#488 (comment)>, 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 :
#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 : #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.

[olgunkaya]

Can you share your crash logs here ?

[Alexandrusandy]

@olgunkaya when it's building my project give me this error: ' cannot find symbol class MainReactPackage'
'cannot find symbol variable Arrays' in the MainApplication.java

[olgunkaya]

@olgunkaya when it's building my project give me this error: ' cannot find symbol class MainReactPackage'
'cannot find symbol variable Arrays' in the MainApplication.java

I dont think this really related to the module. But can you share your MainReactPackage including import statements ?

[Alexandrusandy]

The MainReactPackage was not imported i imported the package and now it's building the app and start but still no ads in the video

[olgunkaya]

Well to me this is more of classpath issue. What I see from your code piece. You are creating packages but not adding them to package list etc..

[Alexandrusandy]

Ok thank you for answering !

[olgunkaya]

you are wellcome, I can confirm our package inc-ads working in our apps. and nothing specific for the side project included in

[robbywh]

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

[fernandopascoalbr]

@robbywh i'm using your implementation, thats works fine.

I need now to show a banner that comes with the XML VAST. Your implementation only shows a black screen with audio, can you help me with this? or ima SDK does not support?

[robbywh]

@fpgce have you tried the @olgunkaya implementation: https://www.npmjs.com/package/react-native-video-inc-ads?
I'm sorry because I don't have enough time to do the research about this.

[olgunkaya]

Black screen with audio ? Either @robbywh 's impl or mine does shows video ads. If you are on an emulator that's a possibility to hear only the sound. But just possibility.
If you only need the banner, I would try to find a admob implementation. Have a look at https://techgaun.github.io/active-forks/index.html#https://github.com/sbugert/react-native-admob for the admob lib's latest/most up-to-date forks.

[Durkaen]

Hello @olgunkaya and @robbywh,

I would like to thank you for your effort and time.

I use @olgunkaya implementation and I have a weird problem on iOS side.

The ad continues to play even though I close the screen where the video player is located.

[olgunkaya]

@Durkaen ,

I did not face such issue tbh but as a workaround you can just set stopped for the player while exiting the view.

[krunal54]

Hi @robbywh,

My ads not showing even I perform all step:

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=';

<View style={styles.container}>
        <TouchableOpacity
          style={styles.fullScreen}
          onPress={() => this.setState({paused: !this.state.paused})}>
          <Video
            /* For ExoPlayer */
            ref={ref => {
              this.video = ref;
            }}
            source={{
              uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
              type: 'mp4',
            }}
            style={styles.fullScreen}
            adTagUrl={adTagUrl}
          />
        </TouchableOpacity>

Is there anything which I am missing?

One more thing I not understand is in Video.js you not handle adTagUrl props then how it can works?

[olgunkaya]

Hi @robbywh,

My ads not showing even I perform all step:

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=';

<View style={styles.container}>
        <TouchableOpacity
          style={styles.fullScreen}
          onPress={() => this.setState({paused: !this.state.paused})}>
          <Video
            /* For ExoPlayer */
            ref={ref => {
              this.video = ref;
            }}
            source={{
              uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
              type: 'mp4',
            }}
            style={styles.fullScreen}
            adTagUrl={adTagUrl}
          />
        </TouchableOpacity>

Is there anything which I am missing?

One more thing I not understand is in Video.js you not handle adTagUrl props then how it can works?

I don't have too much time and possibly will not be able to follow up from here but have you checked to make sure if you are using exoplayer ?

[krunal54]

Hi @Durkaen ,

Hi,

I saw that you have implemented @olgunkaya solution. When I tried to implement I get error in both android and iOS. Can you please post working demo project link.

In example folder of @olgunkaya has older version code and its not working.

Thanks

[olgunkaya]

@krunal54 since I am not working on this actively anymore, please submit a PR if you want to get that working on my version too.

[krunal54]

Hi @ALL,

Android works fine now ads is playing but in IOS getting error:

node_modules/react-native-video/ios/Video/RCTVideo.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler (in target 'react-native-video' from project 'Pods')

If anyone has any idea on it please share.

Thanks!

[krunal54]

I have investigated above comment issue and I fix as well.

If you got same error then please replace below 3 function as per below in:- Video/RCTVideo.m:

- (void)setupAdsLoader {
    self.adsLoader = [[IMAAdsLoader alloc] initWithSettings:nil];
    self.adsLoader.delegate = self;
}

- (void)requestAds {
  // Create an ad display container for ad rendering.
  IMAAdDisplayContainer *adDisplayContainer =
      [[IMAAdDisplayContainer alloc] initWithAdContainer:self
                                          viewController:self.reactViewController
                                          companionSlots:nil];
   // Create an ad request with our ad tag, display container, and optional user context.
  IMAAdsRequest *request = [[IMAAdsRequest alloc] initWithAdTagUrl:_adTagUrl
                                                adDisplayContainer:adDisplayContainer
                                                   contentPlayhead:self.contentPlayhead
                                                       userContext:nil];
  [self.adsLoader requestAdsWithRequest:request];
}

#pragma mark AdsLoader Delegates

- (void)adsLoader:(IMAAdsLoader *)loader adsLoadedWithData:(IMAAdsLoadedData *)adsLoadedData {
 // Grab the instance of the IMAAdsManager and set ourselves as the delegate.
  self.adsManager = adsLoadedData.adsManager;
  self.adsManager.delegate = self;
  // Create ads rendering settings to tell the SDK to use the in-app browser.
  IMAAdsRenderingSettings *adsRenderingSettings = [[IMAAdsRenderingSettings alloc] init];
  adsRenderingSettings.linkOpenerPresentingController  = self;
  // Initialize the ads manager.
  [self.adsManager initializeWithAdsRenderingSettings:adsRenderingSettings];
}

Reference link: https://github.com/googleads/googleads-ima-ios/blob/main/Objective-C/BasicExample/BasicExample/ViewController.m

[rohitsingh2410]

@krunal54 initially what was the issue, i also installed the library and not able to see any ads? any suggetions?

[krunal54]

Which platform? Android or iOS?

[rohitsingh2410]

@krunal54 Android

[rohitsingh2410]

@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 ?

if i do this after editing package.json i am getting

`Execution failed for task ':app:mergeDebugJavaResource'.

A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
More than one file was found with OS independent path 'META-INF/nanohttpd/mimetypes.properties'.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 33s

at checkExecSyncError (node:child_process:680:11)
at execFileSync (node:child_process:699:15)
at runOnAllDevices (/Users/deepak/Documents/vuc-device-android/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:39)
at buildAndRun (/Users/deepak/Documents/vuc-device-android/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:179:41)
at /Users/deepak/Documents/vuc-device-android/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:133:12
at processTicksAndRejections (node:internal/process/task_queues:93:5)
at async Command.handleAction (/Users/deepak/Documents/vuc-device-android/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:182:9)`

[hueniverse]

@krunal54 would you like to submit a PR with your proposed changes?

[avencat]

@hueniverse I opened a PR with those changes: #2923 (thank you @olgunkaya @krunal54 and @robbywh for pointing me in the right direction) If anyone wants to review, this could be merged! 🙂

Thank you all for your contributions!

[FR073N]

Good job @avencat . We also need this on or side and we were thinking of tweaking this MR. Good job, your PR seems to work on our side too !

[freeboub]

After 5 years of activity, I happy to say this ticket is closed !
Let's follow up in next ticket.
Thank you everybody !