# React ### Contents * [1 POKKT SDK v8.1.0 Integration Guide for React](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.1 Overview](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2 Project Configuration](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2.1 Android](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2.1.1 Dependencies](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2.1.2 Manifest](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2.1.3 Permissions Declarations](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2.1.4 Activity Declaration](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2.2 iOS](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2.2.1 Dependencies](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2.2.2 Framework](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.2.2.3 Info.plist](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3 Implementation Steps](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.1 Android SDK Configuration](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.2 Common Configuration](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.3 Ad Types](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.3.1 FullScreen Ads](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.3.2 Banner](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.4 Ad Delegates](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.5 Pokkt ad player configuration](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.6 User Details](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.7 Pokkt Server Callback Params](broken://pages/kFO7vVsCiTzyRYzS3EeP) * [1.3.8 Debugging](broken://pages/kFO7vVsCiTzyRYzS3EeP) ### POKKT SDK v8.1.0 Integration Guide for React Last Update: 15th November, 2021 Download Latest Version Here. *** #### Overview Thank you for choosing Pokkt SDK for React. This document contains all the information required to setup the SDK with your project. We also support mediation for various third party networks. To know the supported third party networks and their integration process go to mediation section on our Pokkt site. Before implementing plugins it is mandatory to go through project configuration and implementation steps, as these sections contain mandatory steps for basic SDK integration and are followed by every plugin. minSdkVersion supported is 11. ScreenId: This one parameter is accepted by almost all API’s of Pokkt SDK. This controls the placement of ads and can be created on Pokkt Dashboard. We will be referencing PokktReactDemo app provided with SDK during the course of explanation in this document. We suggest you go through the sample app for better understanding. *** #### Project Configuration **Android** In the package downloaded above you will find: 1. Docs: Contains step wise step integration for SDK. 2. PokktReactDemo app code. 3. SDK + Plugin: 1. JAR * PokktSDK\_v8.1.0.jar * pokktsdk360ext.jar * PAPReact.jar 2. PokktAds.js 3. Dependencies * google-play-services.jar minSdkVersionsupported is 11. **Dependencies** * Extract the provided file "react-plugin-pokkt.zip" into a directory. * Copy PokktAds.js to React app folder parallel to app.js. * Add Pokkt dependencies like PokktSDK\_v8.1.0.jar , pokktsdk360ext.jar and PAPReact.jar to your project. * We expect Google play services integrated in project, although it is optional but we recommend you to integrate it, as it is required to fetch AdvertisingID for device,which is useful to deliver targeted advertising to Android users. **Manifest** **Permissions Declarations** Add the following mandatory permissions to the android manifest of the generated studio project. 1. Mandatory permissions.
``` ``` * android.permission.INTERNET = Required for SDK communication with server. * android.permission.ACCESS\_NETWORK\_STATE = Required to detect changes in network, like if WIFI is available or not. **Activity Declaration** We have already added the following activity in your AndroidManifest for Pokkt SDK integration via plugin.xml ``` ``` You can change the android:screenOrientation="landscape"to of your choice, the way you want to display the ads. **iOS** In the package downloaded above you will find: 1. Docs: Contains documentations for step wise step integration for SDK. 2. PokktSDK\_v8.1.0: 1. PokktSDK.framework 2. PokktAds.js 3. PokktNativeExtension.mm **Dependencies** * Extract the provided file "react-plugin-pokkt.zip" into a directory. Link the pokkt library in the xcode project. * Copy PokktAds.js to React app folder parallel to app.js * Copy PokktNativeExtension.mm to your Xcode project. **Framework** ``` CoreData.framework Foundation.framework MediaPlayer.framework SystemConfiguration.framework UIKit.framework CoreTelephony.framework EventKit.framework AdSupport.framework CoreGraphics.framework CoreMotion.framework MessageUI.framework EventKitUI.framework CoreLocation.framework AVFoundation.framework libc++.tbd ``` **Info.plist** Add the below exceptions to your application info.plist. ``` NSAppTransportSecurity NSExceptionDomains pokkt.com NSIncludesSubdomains NSExceptionAllowsInsecureHTTPLoads NSExceptionRequiresForwardSecrecy NSExceptionMinimumTLSVersion TLSv1.2 NSThirdPartyExceptionAllowsInsecureHTTPLoads NSThirdPartyExceptionRequiresForwardSecrecy NSThirdPartyExceptionMinimumTLSVersion TLSv1.2 NSRequiresCertificateTransparency cloudfront.net NSIncludesSubdomains NSExceptionAllowsInsecureHTTPLoads NSExceptionRequiresForwardSecrecy NSExceptionMinimumTLSVersion TLSv1.2 NSThirdPartyExceptionAllowsInsecureHTTPLoads NSThirdPartyExceptionRequiresForwardSecrecy NSThirdPartyExceptionMinimumTLSVersion TLSv1.2 NSRequiresCertificateTransparency ``` *** #### Implementation Steps **Android SDK Configuration** 1. Add PokktPluginPackage in your Application which implements ReactApplication.
``` @Override protected List getPackages() { return Arrays.asList(new PokktPluginPackage()); } ``` **Common Configuration** 1. For all invocation of Pokkt SDK, developer will make use of methods available in PokktAds.js
``` //Add this to js file where you are using pokkt plugin. import { PokktExtension } from './PokktAds';//Step 1 import { DeviceEventEmitter,NativeEventEmitter } from ‘react-native'; //Step 2 For delegates. var pe = window.plugins.pokktExtension; //Step 3 declare the pokkt extension var emitter;//Step 4 declare the delegate ``` 2. Set Application Id and Security key in Pokkt SDK. You can get it from Pokkt dashboard from your account. These are unique per app registered.
``` pe.setPokktConfig(,); ``` 3. Set GDPR consent in Pokkt SDK. This must be called before calling any ad related API. Developers/Publishers must get the consent from user. For more information on GDPR please refer and . This API can again be used by publishers to revoke the consent. If this API is not called or invalid data provided then SDK will access the users personal data for ad targeting. ``` pe.setDataAccessConsent(, ); //GDPRApplicable true if GDPR is applicable. //GDPRConsentAvailable true if user has given consent to use personal details for ad targeting. ``` 4. If you are using server to server integration with Pokkt, you can also set Third Party UserId in PokktAds.
``` pe.setThirdPartyUserId(""); ``` 5. When your application is under development and if you want to see Pokkt logs and other informatory messages, you can enable it by setting setDebug to true. Make sure to disable debugging before release.
``` pe.setDebug(); ``` **Ad Types** **FullScreen Ads** * FullScreen Ads are of two types : Video and Interstitial. • FullScreen ads can be rewarded or non-rewarded. • FullScreen properties can be configured from the Pokkt dashboard. • You can either cache the ad in advance or directly call show for it. • We suggest you cache the ad in advance so as to give seamless play behaviour, In other case it will stream the video which may lead to unnecessary buffering delays depending on the network connection. 1. To cache fullscreen ad call:
``` pe.cacheAd(“”); ``` 2. To show fullscreen ad call:
``` pe.showAd(“"); ``` 3. To check if video ad is cached:
``` pe.isAdCached(, (result) => {pe.showToast("Ad is Cached : " + result}); ``` 4. Load banner
``` pe.showAd(,); ``` 5. Banner position values can be\
* TOP\_LEFT = "1" * TOP\_CENTER = "2" * TOP\_RIGHT = "3" * MIDDLE\_LEFT = "4" * MIDDLE\_CENTER = "5" * MIDDLE\_RIGHT = "6" * BOTTOM\_LEFT = "7" * BOTTOM\_CENTER = "8" * BOTTOM\_RIGHT = "9" 6. You can remove Banner using:
``` pe.destroyBanner(“”); ``` **Ad Delegates** Ad delegates are optional, but we suggest to implement them as it will help you to keep track of the status of your ad request. Register the listener in componentWillMount and remove the listener in componentWillUnmount. ``` const { PokktPluginEvent } = NativeModules; emitter = Platform.select({ios: new NativeEventEmitter(PokktPluginEvent), android: DeviceEventEmitter}); //FullScreen Ads delegates emitter.addListener('AdCachingResult', ); emitter.addListener('AdDisplayedResult', ); emitter.addListener('AdClicked', ); emitter.addListener(‘AdClosed', ); emitter.addListener('AdGratified', ); //Banner delegates emitter.addListener('AdDisplayedResult', ); emitter.addListener('AdClicked', ); ``` **Pokkt ad player configuration** Pokkt Ad player works the way App is configured at Pokkt dashboard, but we provide a way to override those settings using PokktAdPlayerViewConfig. Application should prefer configuration provided through code by developer or what’s configured for the app in dashboard, can be controlled any time through the dashboard itself. If you want to make changes to this configuration after your app distribution, you can contact Pokkt Teamto do the same for your app through admin console. ``` var adPlayerViewConfig = pe.createAdPlayerViewConfig(); // set properties values to adPlayerViewConfig pe.setAdPlayerViewConfig(JSON.stringify(adPlayerViewConfig)); ``` Various setters for the properties that can be managed through this are: 1. Back button\ Defines if user is allowed to close the Advertisement by clicking on back button or not.\ Setter Name: setBackButtonDisabled(boolean backButtonDisabled)\ Values:\ True = Back button is disabled and user cannot close the Ad.\ False = Back button is not disabled and user can close the Ad. 2. Default skip time\ Defines the time after which user can skip the Ad.\ Setter Name:setDefaultSkipTime(int defaultSkipTime)\ Values:\ Any Integer value.\ Default value is 10 seconds. 3. Should allow skip\ Defines if user is allowed to skip the Ad or not.\ Setter Name:setShouldAllowSkip(boolean shouldAllowSkip)\ Values:\ True = User can skip Ad.\ False = User can’t skip Ad. 4. Should allow mute\ Defines if user is allowed to mute the Video Ad or not.\ Setter Name:setShouldAllowMute(boolean shouldAllowMute)\ Values:\ True = User can mute video Ad.\ False = User can’t mute video Ad. 5. Should confirm skip\ Defines if confirmation dialog is to be shown before skipping the Ad.\ Setter Name:ShouldConfirmSkip\ Values:\ True = Confirmation dialog will be shown before skipping the video.\ False = Confirmation dialog will not be shown before skipping the video. 6. Skip confirmation message\ Defines what confirmation message to be shown in skip dialog.\ Setter Name:setShouldSkipConfirm(boolean shouldSkipConfirm)\ Values:\ Any String message.\ Default value is “Skipping this video will earn you NO rewards. Are you sure?”. 7. Affirmative label for skip dialog\ Defines what should be the label for affirmative button in skip dialog.\ Setter Name:setSkipConfirmYesLabel(String skipConfirmYesLabel)\ Values:\ Any String message.\ Default value is “Yes”. 8. Negative label for skip dialog\ Defines what should be the label for affirmative button in skip dialog.\ Setter Name:setSkipConfirmNoLabel(String skipConfirmNoLabel)\ Values:\ Any String message.\ Default value is “No”. 9. Skip timer message\ Defines message to be shown before enabling skip button. Don’t forget to add placeholder “ ## ” in your custom message.\ This placeholder is replaced by property “Default skip time” assigned above.\ Setter Name:setSkipTimerMessage(String skipTimerMessage)\ Values:\ Any String message.\ Default value is “You can skip video in ## seconds” 10. Incentive message\ Defines message to be shown during video progress, that after what time user will be incentivised.\ Setter Name:setIncentiveMessage(String incentiveMessage)\ Values:\ Any String message\ Default value is “more seconds only for your reward !” 11. Should collect feedback\ Defines message to be shown during video progress, that after what time user will be incentivised.\ Setter Name:setShouldCollectFeedback\ Values:\ True = If you want to collect feedback from the user for the Ad.\ False = If you don’t want to collect feedback from the user for the Ad. 12. Audio Enabled\ Provides a medium to disable audio for video ad without user interaction.\ Property name:setAudioEnabled\ Values:\ True = If you want to play audio for video ad.\ False = If you don’t want to play audio for video ad. **User Details** For better targeting of ads you can also provide user details to our SDK using. ``` var pokktUserDetails = pe.createPokktUserDetails(); pokktUserDetails.Name = ""; pokktUserDetails.Age = ""; pokktUserDetails.Sex = ""; pokktUserDetails.MobileNo = ""; pokktUserDetails.EmailAddress = ""; pokktUserDetails.Location = ""; pokktUserDetails.Birthday = ""; pokktUserDetails.MaritalStatus = ""; pokktUserDetails.FacebookId = ""; pokktUserDetails.TwitterHandle = ""; pokktUserDetails.Education = ""; pokktUserDetails.Nationality = ""; pokktUserDetails.Employment = ""; pokktUserDetails.MaturityRating = ""; pe.setUserDetails(pokktUserDetails); ``` **Pokkt Server Callback Params** Developer can set some values in POKKT SDK that they need to be sent to their server via POKKT Server callbacks. ``` var extraParams = {}; //set your values here. eg: network name can be given as pokkt extraParams.Network = "POKKT"; pe.setCallbackExtraParams(JSON.stringify(extraParams)); ``` **Debugging** Other than enabling debugging for Pokkt SDK, it can also be used to: 1. Export log Export your log to your desired location, we generally have it in root directory of SD card, if permission for external storage is provided and in cache folder otherwise. ``` pe.exportLog(); ``` 2. Export log to cloud You can also export log to cloud. ``` pe.exportLogToCloud(); ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wiki.pokkt.com/pokkt-sdk-plugins/react.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.