Quick Start with Google Admob

This walkthrough shows how to show Google Admob's Native Ads in story format with Storyly in your React Native application.

👍

You can also check out the demo on GitHub

Storyly Monetization Demo

📘

Before you begin

This walkthrough contains sample instance information. However, if you want to work with your own content as well, please login into Storyly Dashboard and get your instance token.

The sample instance information for testing purposes;

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NfaWQiOjc2MCwiYXBwX2lkIjo0MDUsImluc19pZCI6NDA0fQ.1AkqOy_lsiownTBNhVOUKc91uc9fDcAxfQZtpm3nj40

Also, you need to update required settings from Storyly Dashboard Ad Settings to enable Ads in the instance.

🚧

Warning

Please check Google AdMob Mobile Ads SDK for correct integration. When not implemented correctly, Storyly Monetization SDK won't work.

You need to create a Native Ad Unit Id or for testing purposes use Test Ads.

Installation

Storyly Monetization React Native package is available through npm. Source code is also available through the Storyly Monetization React Native Github page, contributions are more than welcomed 🙂

yarn add storyly-monetization-react-native

npm install --save storyly-monetization-react-native

🚧

Warning

Storyly Monetization SDK targets Android API level 19 (Android 4.4, KitKat) or higher.

🚧

Warning

You need to add Java 1.8 compatibility configuration as well. In your app’s module Gradle file (usually app/build.gradle), please add the following instructions:

Groovy

android {
    compileOptions {
        // You should add these two lines
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

🚧

Warning

You need configure project settings.gradle file (usually android/settings.gradle) with following instructions:

Groovy

// storyly-monetization-react-native's setting.gradle must be applied
apply from: file("../node_modules/storyly-monetization-react-native/android/settings.gradle")

🚧

Warning

Storyly Monetization SDK targets iOS 10 or higher.

Import Storyly Monetization

Importing Storyly Monetization in your React Native application is quite easy:

import { setStorylyAdViewProvider } from 'storyly-monetization-react-native';

Initialize StorylyAdProvider

You need to set a StorylyAdProvider to your StorylyView instance to enable monetization feature.

    let storylyAdViewProvider = {adMobAdUnitId: ADMOB_NATIVE_AD_ID}}
    setStorylyAdViewProvider(storylyView, storylyAdViewProvider)

Just hit the run. Now, you should be able to enjoy Storyly with ads 🎉!

Google AdMob Consent Management

📘

Before you begin

You may check Forward consent to the Google Mobile Ads SDK (Android) and Forward consent to the Google Mobile Ads SDK (iOS) documentation for details.

StorylyAdViewProviders provides a parameter, named adMobAdExtras, in its constructor to pass NetworkExtrasBundle via addNetworkExtrasBundle to Google AdMob.