aiactiv-universal-sdk
TypeScript icon, indicating that this package has built-in type declarations

0.1.12 • Public • Published

AiactivUniversalSDK

NPM Version

Ads and Analytics Framework

Installation

To install AiactivUniversalSDK, run the following commands:

yarn add aiactiv-universal-sdk
npx pod-install

iOS

You need to add the following code to your Info.plist file and replace FILL_YOUR_WRITE_KEY_HERE with your write key:

<key>AiactivSDKConfig</key>
<dict>
  <key>writeKey</key>
	<string>FILL_YOUR_WRITE_KEY_HERE</string>
</dict>

By default, we use the same write key for both ads and analytics. If you want to use a different write key for ad network, you can add another key-value pair like this:

<key>AiactivSDKConfig</key>
<dict>
  <key>writeKey</key>
  <string>FILL_YOUR_WRITE_KEY_HERE</string>

  <key>writeKeyForAdNetwork</key>
  <string>FILL_YOUR_WRITE_KEY_HERE</string>
</dict>

Import the AiactivUniversalSDK module in your UIApplicationDelegate

#import <WebKit/WebKit.h>
#import <AiactivUniversalSDK/AiactivUniversalSDK-Swift.h>

Configure a AiactivUniversalSDK shared instance in your app delegate's application(_:didFinishLaunchingWithOptions:) method

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // Override point for customization after application launch.

  [Aiactiv startWithConfig:nil];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

Android

You need to add the following code to your app manifest file, inside the tag and replace FILL_YOUR_WRITE_KEY_HERE with your write key:

<meta-data
  android:name="io.aiactiv.sdk.WRITE_KEY"
  android:value="FILL_YOUR_WRITE_KEY_HERE" />

By default, we use the same write key for both ads and analytics. If you want to use a different write key for ad network, you can add another meta-data like this:

<meta-data
  android:name="io.aiactiv.sdk.WRITE_KEY"
  android:value="FILL_YOUR_WRITE_KEY_HERE" />

<meta-data
  android:name="io.aiactiv.sdk.WRITE_KEY_ADNETWORK"
  android:value="FILL_YOUR_WRITE_KEY_HERE" />

Usage

AdNetwork

Banner Ad

import { BannerAdView } from 'aiactiv-universal-sdk';

// ...
<BannerAdView
  ref={bannerAdRef}
  size="320x150"
  unitID={YOUR_INVENTORY_ID}
  context={{
    // This is optional
    title: 'Got Talents show',
    keywords: 'movie, show, hot',
    screen: 'Home',
  }}
  onAdLoaded={() => console.log('JS onAdLoaded')}
  onAdFailedToLoad={(e) => console.log('JS onAdFailedToLoad', e)}
  onAdClicked={(url) => {
    // If onAdClicked isn't declared, open browser automatically when user click Ad
    Linking.openURL(url);
  }}
/>;

// ...
bannerAdRef.current.reloadAd();

Predefined sizes:

AdSize Width x Height
banner 320x50
fullBanner 468x60
largeBanner 320x100
rectangle 250x250
mediumRectangle 300x250
video 480x360

Or custom any size in format widthxheight. Example: 640x480, 300x500...

Adaptive Banner Ad

import { BannerAdView } from 'aiactiv-universal-sdk';

// ...
<BannerAdView
  ref={bannerAdRef}
  size="320x150"
  unitID={YOUR_INVENTORY_ID}
  context={{
    // This is optional
    title: 'Got Talents show',
    keywords: 'movie, show, hot',
    screen: 'Home',
  }}
  adaptiveSize={Dimensions.get('window').width} // SDK will calculate height automatically base on Ad ratio
  onAdLoaded={() => console.log('JS onAdLoaded')}
  onAdFailedToLoad={(e) => console.log('JS onAdFailedToLoad', e)}
  onAdClicked={(url) => {
    // If onAdClicked isn't declared, open browser automatically when user click Ad
    Linking.openURL(url);
  }}
/>;

// ...
bannerAdRef.current.reloadAd();

Video Ad

To display a video ad, you need to use the VideoAdLoader function to get the vast tag URL from Aiactiv platform and then use your own player to play it.

import { VideoAdLoader } from 'aiactiv-universal-sdk';

VideoAdLoader.loadAd(YOUR_INVENTORY_ID, 'video')
  .then((vastTagUrl) => {
    console.log('JS onAdLoader', vastTagUrl);
    // Then using your own player to play this vastTagUrl
  })
  .catch((e) => {
    console.log('JS onAdFailedToLoad', e);
    // Or handle error occurs
  });

Analytics

Analytics will be initialized automatically and collect data for you. You can also manually track events with the following methods:

Track Events

import { Analytics } from 'aiactiv-universal-sdk';

Analytics.track(name: string, properties?: TrackPropertyType);

To track an event, you need to call the Analytics.track() method and pass in two parameters: name and properties.

  • The name parameter is a string to name the event, for example: "Post view", "Sign up", "Purchase", etc.
  • The properties parameter is an object to contain detailed information about the event, for example: post title, product type, order value, etc.
// Create an object to contain the properties of the event
const postViewEventProperties = {
  title: 'Post Title',
  category: 'Category 1, Category 2',
  keyword: 'Keyword 1, Keyword 2, ...',
  ...
};

// Track the event "Post view" with the properties created
Analytics.track('Post view', postViewEventProperties);

Identify Events

import { Analytics } from 'aiactiv-universal-sdk';

Analytics.identify(userId: string, traits?: IdentifyTraitType);

To identify a user, you need to call the Analytics.identify() method and pass in one parameter: userId.

  • The userId parameter is a string to identify your user, for example: "PartnerUserID-01".
  • You can also pass in another object to contain additional information about the user, for example: user name, user type, etc.
// Create an object to contain the properties of the user
const userTraits = {
    userName: 'Username 1',
    userType: 'Normal',
    ...
};

// Identify user with user ID and properties created
Analytics.identify('PartnerUserID-01', userTraits)

Screen Events

import { Analytics } from 'aiactiv-universal-sdk';

Analytics.screen(title: string, properties?: ScreenPropertyType);

To track a screen, you need to call the Analytics.screen() method and pass in one parameter: title.

  • The title parameter is a string to name the screen, for example: "Login Screen", "Home Screen", etc.
  • You can also pass in another object to contain detailed information about the screen, for example: login method, number of posts, etc.
// Create an object to contain the properties of the screen
const loginScreenProperties = {
    loginMethod: 'FACEBOOK/GOOGLE/OTP/QR',
    ...
};

// Track screen with screen name and properties created
Analytics.screen(title: "LoginScreen", properties: loginScreenProperties)

Author

AiACTIV TECH, tech@aiactiv.io

License

AiactivUniversalSDK is available under the MIT license. See the LICENSE file for more info.

Package Sidebar

Install

npm i aiactiv-universal-sdk

Weekly Downloads

0

Version

0.1.12

License

MIT

Unpacked Size

172 kB

Total Files

82

Last publish

Collaborators

  • huynhtansi
  • tech.aiactiv