Storyly Documentation

# 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 (opens new window)

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 (opens new window) 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 (opens new window) to enable Ads in the instance.

Before you begin

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 (opens new window). Source code is also available through the Storyly Monetization React Native Github page. (opens new window), 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:




 
 



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:

// 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 🎉!

Before you begin

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

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

← Sending Events →