Quick Start with Google Admob

This walkthrough shows how to show Google Admob's Native Ads in story format with Storyly in your Flutter 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 Flutter package is available through pub.dev. Source code is also available through the Storyly Monetization Flutter Github page, contributions are more than welcomed 🙂

Please check the Installing tab of Storyly Monetization Flutter's pub.dev page for installing steps.

🚧

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

Storyly Monetization SDK targets iOS 10 or higher.

Import Storyly Monetization

Importing Storyly Monetization in your Flutter application is quite easy:

import 'package:storyly_monetization_flutter/storyly_monetization_flutter.dart';

Initialize StorylyAdProvider

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

    AdViewProvider adViewProvider = AdViewProvider(adMobAdUnitId: ADMOB_NATIVE_AD_ID);
    StorylyMonetization.setAdViewProvider(
        storylyViewController.getViewId(),
        adViewProvider
    );

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.

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