GENERAL

Overview

ReactNative SDK version 1.0.0

The Appylar ReactNative SDK is a lightweight and easy-to-use library that allows you to integrate your apps with the Appylar service for showing ads in your apps. The ad types supported are banners, interstitials and videos. The following standard ad formats are available:

• Banner Small (320x50)
• Banner Large (728x90)
• Interstitial Small Landscape (480x320)
• Interstitial Small Portrait (320x480)
• Interstitial Large Landscape (1024x768)
• Interstitial Large Portrait (768x1024)
• Video Portrait
• Video Landscape

All static ad formats are provided in three different sizes (1x, 2x and 3x). Depending on the screen resolution of the device where the ad is shown, the SDK will automatically display the size that produces the best image quality. Please note that videos are considered as interstitials. That means that in the SDK, you can't choose whether it will be a static or a video ad that is displayed when showing an interstitial.

TIP! For examples of how to implement the SDK, please see the sample apps. There is one sample app using ReactNative SDK.

Requirement

• React Native Version >= 0.73.2
• iOS Version >= 12.x
• Android versions are 5.0 Lollipop (API level 21) and later

Implementation

**STEP 1: INSTALL THE SDK **

Open a terminal window, and type cd /YOUR_PROJECT_PATH/ to get to your project root directory and run following command:

npm install react-native-appylar-sdk

or

yarn add react-native-appylar-sdk

For iOS on terminal enter cd ios to navigate to iOS directory and run following command:

pod install

For Android open the terminal and sync gradle.

**STEP 2: INITIALIZE AND SET EVENT LISTENERS **

import React, { useEffect, useRef, useState } from 'react';
import {  Platform } from 'react-native';
// Import the Appylar library
import  Appylar, { AdType, AppylarBannerView } from 'react-native-appylar-sdk';
export default function App() {
    useEffect(() => {
    // Set event listener before initialization
        Appylar.eventEmitter.addListener('onInitialized', onInitialized);
        Appylar.eventEmitter.addListener('onError', onError);
        Appylar.eventEmitter.addListener('onBannerShown', onBannerShown);
        Appylar.eventEmitter.addListener('onNoBanner', onNoBanner);
        Appylar.eventEmitter.addListener(
              'onInterstitialShown',
              onInterstitialShown
        );
        Appylar.eventEmitter.addListener(
              'onInterstitialClosed',
              onInterstitialClosed
            );
        Appylar.eventEmitter.addListener(
              'onNoInterstitial',
              onNoInterstitial
        );
		
        // Initialize
         var adTypes = [AdType.banner, AdType.interstitial]; // The ad types that you want to show
         var appKey = "<your_project_key>" // The unique app key for your app
         var testMode = false; // Test mode, true for development, false for production
         await Appylar.initialize(appKey, adTypes, testMode); 
		
        return () => {
              Appylar.eventEmitter.removeAllListeners('onInitialized');
              Appylar.eventEmitter.removeAllListeners('onError');
              Appylar.eventEmitter.removeAllListeners('onBannerShown');
              Appylar.eventEmitter.removeAllListeners('onNoBanner');
              Appylar.eventEmitter.removeAllListeners('onInterstitialShown');
              Appylar.eventEmitter.removeAllListeners('onInterstitialClosed');
              Appylar.eventEmitter.removeAllListeners('onNoInterstitial');
        };
      }, []);
	  
      // Event listener triggered at successful initialization
      const onInitialized = (eventObj: any) => {
        console.log('App.tsx onInitialized', eventObj);
      };
	  
      // Event listener triggered if an error occurs in the SDK
      const onError = (eventObj: any) => {
        console.log('App.tsx onError', eventObj);
      };
	  
     // Event listener triggered when a banner is shown
      const onBannerShown = (eventObj: any) => {
        console.log('App.tsx onBannerShown', eventObj);
      };
	  
      // Event listener triggered when there are no banners to show
      const onNoBanner = (eventObj: any) => {
        console.log('App.tsx onNoBanner', eventObj);
      };
	  
      // Event listener triggered when an interstitial is shown
      const onInterstitialShown = (eventObj: any) => {
        console.log('App.tsx onInterstitialShown', eventObj);
      };
	  
      // Event listener triggered when an interstitial is closed
      const onInterstitialClosed = (eventObj: any) => {
        console.log('App.tsx onInterstitialClosed', eventObj);
      };
	  
      // Event listener triggered when there are no interstitials to show
      const onNoInterstitial = (eventObj: any) => {
        console.log('App.tsx onNoInterstitial', eventObj);
      };
}

**STEP 3: CONFIGURE IOS & ANDROID SETTINGS **

• For iOS Set the NSAllowsArbitraryLoads key to YES under the NSAppTransportSecurity property in your info.plist file.

• For Android In the AndroidManifest.xml file, add the necessary permissions and your Application() subclass inside the application tag:

  <uses-permission android:name="android.permission.INTERNET" />

**STEP 4: ADD BANNERVIEW **

<AppylarBannerView show={true or false} placementId="" style={{marginVertical: 50}} />

**STEP 5: SHOW BANNER **

• You just need to set show attribute as true to show the banner and false to hide the banner.

**STEP 5: SHOW INTERSTITIALS **

• Call Appylar.showAd() to show interstitials.

**STEP 6: DEFINE EVENTS **

Define the events that can be triggered by the SDK.

The Appylar ReactNative SDK is now set up and ready to use. In the menu, you can find documentation on how to use the functions to display and hide ads, set parameters etc. For a complete example of how to implement the SDK using ReactNative, please see the sample apps.

Events

ReactNative SDK version 1.0.0

####Description

An event is a callback function that is triggered by a specific occurrence in the SDK. Using events, you can handle these occurrences and specify what should happen in each case. To implement an event, you create an override function with the name of the event you want to handle. Inside the event, you can then put whatever logic you want to handle the occurrence. These are the available events:

| Event Name | Description | | ------------ | ------------ | | onInitialized | Triggered when the SDK has been properly authenticated and initialized. | | onError | Triggered when an error has occurred. Provides a string with the error message. | | onBannerShown | Triggered when a banner is shown on the screen. | | onNoBanner | Triggered when the SDK tried to show a banner, but there were none available. | | onInterstitialShown | Triggered when an interstitial is shown on the screen. | | onInterstitialClosed | Triggered when an interstitial has been closed by the user. | | onNoInterstitial | Triggered when the SDK tried to show an interstitial, but there were none available. |

Examples

    Appylar.eventEmitter.addListener('onInitialized', onInitialized);
    Appylar.eventEmitter.addListener('onError', onError);
    Appylar.eventEmitter.addListener('onBannerShown', onBannerShown);
    Appylar.eventEmitter.addListener('onNoBanner', onNoBanner);
    Appylar.eventEmitter.addListener(
      'onInterstitialShown',
      onInterstitialShown
    );
    Appylar.eventEmitter.addListener(
      'onInterstitialClosed',
      onInterstitialClosed
    );
    Appylar.eventEmitter.addListener(
      'onNoInterstitial',
      onNoInterstitial
    );

	// Event listener triggered at successful initialization
	const onInitialized = (eventObj: any) => {
		// Handle event
	};

	// Event listener triggered if an error occurs
	const onError = (eventObj: any) => {
		// Handle event
	};

	// Event listener triggered when a banner is shown
	const onBannerShown = (eventObj: any) => {
		// Handle event
	};

	// Event listener triggered when there are no banners to show
	const onNoBanner = (eventObj: any) => {
		// Handle event
	};

	// Event listener triggered when an interstitial is shown
	const onInterstitialShown = (eventObj: any) => {
		// Handle event
	};

	// Event listener triggered when an interstitial is closed
	const onInterstitialClosed = (eventObj: any) => {
		// Handle event
	};

	// Event listener triggered when there are no interstitials to show
	const onNoInterstitial = (eventObj: any) => {
		// Handle event
	};

Sample App

ReactNative SDK version 1.0.0

####Description

The sample app contains a complete and fully working implementation of the Appylar ReactNative SDK. In the app, you can see how the setup is done and how the SDK works. Just add an app key from one of your apps to the init() function before you start the sample app.

The sample app can be downloaded from GitHub.

FUNCTIONS

initialize()

ReactNative SDK version 1.0.0

Description

The initialize() function is used for initializing the SDK. Before calling this function, make sure that you have set the event listeners, otherwise no initialization events can be triggered.

IMPORTANT! Initialization has to be done before any ads can be shown by the SDK. Therefore, make sure to call the init() function as soon as possible after the app has been started so that the SDK has time to finish the initialization before you want to show the ads.

Syntax

await Appylar.initialize(appKey, adType, testMode);

appKey(required)String

The unique key for your app.

adType(required) Array of Enums

The type of ads you want to show in the app. Valid values are specified in the AdType enum: banner and interstitial. One or multiple values can be given. Please note that you have to provide an array even if you only want one value.

testMode(required) boolean

Set to true while testing and then to false in production.

Return value

None

Events

onInitialized onError

Examples

import  Appylar, {AdType, AppylarBannerView} from 'react-native-appylar-sdk';

export default function App() {

useEffect(() => {
    Appylar.eventEmitter.addListener('onInitialized', onInitialized);
    Appylar.eventEmitter.addListener('onError', onError);
    initialize();
    return () => {
      Appylar.eventEmitter.removeAllListeners('onInitialized'); // Set event listener before initialization
      Appylar.eventEmitter.removeAllListeners('onError'); // Set event listener before initialization
    };
  }, []);

const initialize = async () => {
    var adTypes = [AdType.banner, AdType.interstitial]; // The ad types that you want to show.
    var appKey = "<Your App Key>";  //The unique app key for your app
	var testMode = false; // Test mode, true for development, false for production
    await Appylar.initialize(appKey, adTypes, testMode);
  };
}

canShowAd()

ReactNative SDK version 1.0.0

Description

The canShowAd() function checks if there are ads available to be shown or not. The function returns true if the SDK can show ads, otherwise false.

Syntax

await Appylar.canShowAd();

Return value

boolean (true if there are ads available to be shown, otherwise false)

Events

None

Examples

Appylar.canShowAd()

showAd()

ReactNative SDK version 1.0.0

Description

The showAd() function shows a banner or an interstitial on the screen.

For banners: once shown, a banner will remain on the screen until it is explicitly closed by calling the hideAd() function. Until then, it will be automatically renewed at regular intervals.

For interstitials: an interstitial will be shown until the user closes it by tapping on the close icon.

IMPORTANT! Make sure to check if there are ads available by calling the canShowAd() function before you call showAd().

Syntax

   showAd(placementId);

placementId(required)String

A placement id that has been specified for the app. Read more about placements.

Return value

None

Events

onBannerShown(), onNoBanner(), onInterstitialShown(), onNoInterstitial() Read more about events.

Examples

  // For Interstitial
   RNAppyar.showAd(<placementId)
   //For Banner
    <AppylarBannerView
          show={true} // Need to set this as true 
          placementId=""
          style={styles.box}
          ref={appylarViewRef}
        />

hideAd()

ReactNative SDK version 1.0.0

Description

The hideAd() function is used for hiding the banners. Please note that this function is only for banners; an interstitial is closed by the user tapping on the close icon.

Syntax

   hideAd();

Return value

None

Events

None

Examples

//For Banner <AppylarBannerView show={false} // Need to set this as flse placementId="" style={styles.box} ref={appylarViewRef} />

setParameters()

ReactNative SDK version 1.0.0

Description

The setParameters() function is used for setting parameters that change how the SDK behaves. If an empty value for a parameter is given, the value for that parameter is deleted from the settings.

Syntax

await Appylar.setParameters(parameters);

parameters(required) HashMap<String, String[ ]>

Valid keys are:

banner_height: Valid values are "50" or "90". This determines the height of the banners in device independent pixels (points). Depending on the value, the banners will be either 320 x 50 or 728 x 90 points. Default is "50".

age_restriction: Valid values are "12" , "15" , "18" . This sets the minimum age for viewing the ads. Default is "12".

Return value

None

Examples

 let parameteres = {
      banner_height: ['90'],
      age_restriction: ['18'],
    };
Appylar.setParameters(parameteres);
	

USAGE

SDK Data Privacy

ReactNative SDK version 1.0.0

Collecting Data

No personal information is collected through the use of the SDKs. Also, neither IDFA (Identifier For Advertising) nor GAID (Google Advertising ID) are collected in the SDKs.

Sharing Data

No data that is collected through the use of the SDKs is shared with other companies or organizations outside Appylar.

Security

In all communication with the SDKs, data is encrypted in transit.

Content

All ads are reviewed and approved by Appylar to ensure that no objectionable, deceptive or harmful content is shown. To be approved, ads must conform with our ad policy.

Age Rating

All ads are rated by Appylar according to age appropriate groups. Following the Google Developer Policies and the App Store Agreements and Guidelines, you as an app developer are responsible for implementing age screening in your app so that only ads that are appropriate for the age of the users are shown. In our SDKs, you can set a parameter to indicate the minimum age for which ads should be shown in your app. For example, if you set the age parameter in the SDKs to "12", only ads that have been rated 12+ or below will be shown in your app.

SDK License

ReactNative SDK version 1.0.0

1. License

The software ("Software"), as defined below, is provided by Appylar ("Appylar") under the terms of this license ("License"). The Software is protected by copyright and/or other applicable law. Any use of the Software other than as authorized under this License or copyright law is prohibited. By using or exercising any rights to the Software, you accept to be bound of this License. After your acceptance of this License, Appylar grants you the rights contained in this License.

2. Software

The Software consists of all versions of all the software development kits ("SDK") that at any point in time have been made available by Appylar by any means. The SDKs are used for connecting third party software applications to the online services of Appylar. All executable computer programs and any related printed, electronic and online documentation and any other files that accompany the Software are included.

Subject to the terms and conditions of this document, Appylar hereby grants a worldwide, royalty-free, irrevocable, non-exclusive, non-transferable, perpetual (for the duration of the applicable copyright) license to use the Software for personal or commercial purposes.

Title, copyright, intellectual property rights and distribution rights of the Software remain exclusively with Appylar. This License constitutes a license for use only and is not in any way a transfer of ownership rights to the Software.

You may not:

• modify, reverse-engineer, or de-compile the Software in any manner through current or future available technologies,
• change the way the Software interacts with the device or other software systems,
• resell, redistribute, or otherwise make available any part of the Software to third parties,
• use the Software in ways which could reasonably be viewed as deceptive or fraudulent,
• use the Software in ways which violate our Terms or Privacy Policy,
• use the Software in ways which violate any of the Google Developer Policies or any of the App Store Agreements and Guidelines,
• use the Software in apps that have not been published on Google Play or the App Store except for pure testing purposes.

Failure to comply with any of the terms in this document will be considered a material breach of this License and lead to immediate termination of your access to the Appylar services.

3. Representations, Warranties and Disclaimer

Appylar offers the Software as-is and makes no representations or warranties of any kind concerning the Software, express, implied, statutory or otherwise, including, without limitation, warranties of title, merchantibility, fitness for a particular purpose, noninfringement, or the absence of latent or other defects, accuracy, whether or not discoverable.

Except to the extent required by applicable law, in no event will Appylar be liable to you on any legal theory for any special, incidental, consequential, punitive or exemplary damages arising out of this License or the use of the Software.

4. License fee

The Software is provided free of charge.

5. Termination

This License and the rights granted hereunder will terminate automatically upon any breach by you of the terms of this License. Notwithstanding the rights granted in this License, Appylar reserves the right to release the Software under different license terms or to stop distributing the Software at any time; provided, however, that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above.

6. Miscellaneous

If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.

No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent has been provided in writing by Appylar.

This License, together with the Terms on the website of Appylar, constitutes the entire agreement between the parties with respect to the Software licensed here. There are no understandings, agreements or representations with respect to the Software not specified here or on the website of Appylar. Appylar shall not be bound by any additional provisions that may appear in any communication from you.

Change Log

ReactNative SDK version 1.0.0

1.0.0

Initial release with iOS 2.3.2 and Android 2.4.3 native SDK support.