This documentation is deprecated

Please see here for up-to-date documentation.

Introduction

To use the AddApptr SDK, please sign up for an account.

General integration instructions

NPM Installation

1. Install the package.

#!

npm i @addapptr/react-native-aatkit

2. Follow additional steps to complete the installation for Android platform. Please see them here.

Importing modules

There are three modules you can import to use AATKit:

RNAatkit - main module which allows to initialize plugin. Also provides API to reload and show interstitial ads.
RNAatkitBanner - the banner ad component.
RNAatkitNativeAd - the native ad component.

Example of importing modules:

#!javascript

import {
    RNAatkit,
    RNAatkitBanner,
    RNAatkitNativeAd
} from '@addapptr/react-native-aatkit'

Initialize AATKit

Use initWithConfiguration function from RNAatkit module to initialize AATKit. This operation should be run only once during the application lifecycle. You can pass JSON object as the parameter to set desired configuration. You can find all configuration options here. Please see the example below where AATKit is initialized with test mode using ID 136:

#!javascript

componentWillMount() {
    RNAatkit.initWithConfiguration({
        testModeAccountID: 136,
        consent: {
            type: RNAatkit.ConsentType_ManagedCMPGoogle
        }
    });
}

Adding optional networks

Optional networks are disabled by default. If you want to include them to the build, follow instructions below.

Android

Find node_modules/@addapptr/react-native-aatkit/android/build.gradle file.
Comment out network dependencies which should be indluced to the build.

iOS

Find node_modules/@addapptr/react-native-aatkit/RNAatkit.podspec file.
Comment out network dependencies which should be indluced to the build.

App Tracking Transparency & iOS 14.5

Starting with iOS 14.5 publishers have to use the App Tracking Transparency framework when accessing the IDFA. This is why you should present the app-tracking authorization request to the end user. It can be achieved for example by using react-native-permissions.

Using the CMP through AddApptr provided wrapper

With the introduction of IAB TCF2.0, AddApptr will no longer act as a CMP. Instead, we provide wrappers allowing for easily integrating third-party CMPs. Please note that the CMPs need a server-side configuration, please contact support@addapptr.com if you need support.

There are following functions for Managed Consent:

There are following events related to Managed Consent:

CMP Implementations

For now, we provide two CMP implementations:

CMP Google

Android requires appId to be added to Manifest, like

#!javascript
<meta-data
          android:name="com.google.android.gms.ads.APPLICATION_ID"
          android:value="YOUR-APP-ID"/>

For iOS you need to set the GADApplicationIdentifier value to the Info.plist file, like:

#!javascript
<key>GADApplicationIdentifier</key>
<string>YOUR-APP-ID</string>

Code example:

#!javascript
RNAatkit.initWithConfiguration({
    consent: {
        "type": RNAatkit.ConsentType_ManagedCMPGoogle
    }
})

CMP Ogury

Requires Asset Key as configuration parameter when initializing AATKit.

Code example:

#!javascript
RNAatkit.initWithConfiguration({
    consent: {
        "type": RNAatkit.ConsentType_ManagedCMPOgury,
        "assetKeyCMPOgury": "your-asset-key"
    }
})

Not using the AddApptr CMP wrapper

If for some reason you do not want to use AddApptr CMP wrappers, AATKit also provides another methods for GDPR compliance. The consentRequired configuration parameter allows you to inform AATKit if the user is subject to the GDPR laws:

#!javascript
RNAatkit.initWithConfiguration({
    "consentRequired": true
})

For publishers not using the Managed Consent, we have introduced another type of Consent for GDPR-compliance, allowing to pass network-specific consent status. To use it, you need to initialize AATKit with consent type set as RNAatkit.ConsentType_Vendor. Also you should pass the list of networks which should have consent set as obtained. AATKit will set consent as withheld for another networks.

#!javascript
RNAatkit.initWithConfiguration({
    consent: {
        "type": RNAatkit.ConsentType_Vendor,
        "consentForAddapptr": RNAatkit.SimpleConsent_Obtained,
        "vendorConsentObtainedNetworks": [RNAatkit.AdNetwork_ADCOLONY, RNAatkit.AdNetwork_DFP, RNAatkit.AdNetwork_UNITYADS]
    }
})

To define if the user has given or withheld consent for the collection and use of personal data (used for non-IAB partners) set configuration type parameter as RNAatkit.ConsentType_SimpleConsent and use nonIABConsent parameter as:

RNAatkit.SimpleConsent_Obtained if the user has given the consent.
RNAatkit.SimpleConsent_Withheld if the user has declined.

If SimpleConsent is used, it will automatically read the IAB Consent String stored (by third-party CMP) in SharedPreferences (if available).

#!javascript
RNAatkit.initWithConfiguration({
    consent: {
        "type": RNAatkit.ConsentType_SimpleConsent,
        "nonIABConsent": RNAatkit.SimpleConsent_Obtained,
    }
})

Reusing the same banner placement within one screen.

Plugin allows you to reuse the same banner placement in various screens. However, you might want to reuse the same placement within one screen, for example when using tab view. In that case you can use visible property to determine which banner should be visible as two or more banners cannot be visible at once in the same screen. For sub-tabs scenario, you should detect which tab is active and set the proper value for visible property. Please see the example below how you might handle it.

#!javascript

let store = createStore(combineReducers({ 
    homeScreenBannerVisible: determineHomeBannerVisible,
    settingsScreenBannerVisible: determineSettingsBannerVisible,
}));

function determineHomeBannerVisible(state, action) {
    if (typeof state === 'undefined') {
        return true;
    }

    switch (action.type) {
        case 'HOME':
          return true;
        case 'SETTINGS':
          return false;
        default:
          return true;
      }
}

function determineSettingsBannerVisible(state, action) {
    if (typeof state === 'undefined') {
        return true;
    }

    switch (action.type) {
        case 'HOME':
          return false;
        case 'SETTINGS':
          return true;
        default:
          return true;
      }
}

let HomeScreenContainer = connect(state => ({ bannerVisible: state.homeScreenBannerVisible }))(HomeScreen);
let SettingsScreenContainer = connect(state => ({ bannerVisible: state.settingsScreenBannerVisible }))(SettingsScreen);

function HomeScreen({ bannerVisible }) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home screen</Text>
        <RNAatkitBanner
                name="BannerOne"
                size={RNAatkit.PlacementSize_Banner320x53}
                autoreload={true}
                visible={bannerVisible} />
      </View>
    );
}

function SettingsScreen({ bannerVisible }) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings screen</Text>
        <RNAatkitBanner
                name="BannerOne"
                size={RNAatkit.PlacementSize_Banner320x53}
                autoreload={true}
                visible={bannerVisible} />
      </View>
    );
}

export default function App() {
    return (
        <Provider store={store}>
            <NavigationContainer>
                <Tab.Navigator>
                    <Tab.Screen 
                        name="Home" 
                        component={HomeScreenContainer}
                        listeners={{
                            tabPress: e => {
                                store.dispatch({ type: 'HOME' });
                            }
                        }}
                    />
                    <Tab.Screen 
                        name="Settings" 
                        component={SettingsScreenContainer}
                        listeners={{
                            tabPress: e => {
                                store.dispatch({ type: 'SETTINGS' });
                            }
                        }}
                    />
                </Tab.Navigator>
            </NavigationContainer>
        </Provider>
    );
}

Navigating between screens

When the app navigates between screens, you should stop auto-reloading all ads which will not be visible. The best way to set this for banner ads is modifying autoreload property. Please see the example how it might be done when using react-navigation library.

Declare state object with boolean autoReloadBanner value.

#!javascript
    constructor(props) {
        super(props);
        this.state = { 
            autoReloadBanner: true
        };
    }

Use this autoReloadBanner value to set autoreload property.

#!javascript

<RNAatkitBanner
    reloadOnStart={true}
    autoreload={this.state.autoReloadBanner}
    name="Banner"
    size={RNAatkit.PlacementSize_Banner320x53}
    />

When navigating to another screen, update the state.

#!javascript

this.setState( {
    autoReloadBanner: false
});
navigate('SecondScreen');

Use react-navigation didFocus event to start auto-reloading banner again when user comes back to the screen.

#!javascript

 componentDidMount() {
    this._sub = this.props.navigation.addListener(
        'didFocus',
        () => {
            this.setState( {
                autoReloadBanner: true
            });
        }
    );
 }

 componentWillUnmount() {
    this._sub.remove();
 }

This documentation is deprecated

Introduction

Sign Up

General integration instructions

NPM Installation

Importing modules

Initialize AATKit

Adding optional networks

Android

iOS

App Tracking Transparency & iOS 14.5

GDPR - General Data Protection Regulation

Using the CMP through AddApptr provided wrapper

CMP Implementations

CMP Google

CMP Ogury

Not using the AddApptr CMP wrapper

Vendor Consent

Simple Consent

Reusing the same banner placement within one screen.

Navigating between screens

Adding placements

API

RNAatkit

Methods

[Deprecated] setFullscreenAdsMuted(placementName)

Events

RNAatkitBanner

Properties

string name [Required]

number size [Required]

Methods

Events

RNAatkitInFeedBanner

Properties

string name [Required]

Events

RNAatkitUnifiedNativeAd

Properties

string name [Required]