|
| 1 | +<img src="https://github.com/AppsFlyerSDK/appsflyer-html5-ctv-sdk/blob/master/images/CTV.png" width="400" > |
| 2 | + |
| 3 | +# appsflyer-html5-ctv-sdk |
| 4 | + |
| 5 | +[](https://opensource.org/licenses/MIT) |
| 6 | +[](https://badge.fury.io/js/appsflyer-html5-ctv-sdk) |
| 7 | +[](https://www.npmjs.com/package/appsflyer-html5-ctv-sdk) |
| 8 | + |
| 9 | +🛠 In order for us to provide optimal support, we would kindly ask you to submit any issues to [email protected] |
| 10 | + |
| 11 | +> *When submitting an issue please specify your AppsFlyer sign-up (account) email , your app ID , production steps, logs, code snippets and any additional relevant information.* |
| 12 | +
|
| 13 | +### <a id="plugin-build-for"> This SDK is built for |
| 14 | + |
| 15 | +- <img src="https://github.com/AppsFlyerSDK/appsflyer-html5-ctv-sdk/blob/master/images/tizen.png" alt="drawing" width="15"/> Samsung Tizen |
| 16 | +- <img src="https://github.com/AppsFlyerSDK/appsflyer-html5-ctv-sdk/blob/master/images/lg.png" alt="drawing" width="15"/> LG Webos |
| 17 | + |
| 18 | + ## 📖 Guides |
| 19 | +- [Adding the SDK to your project](#installation) |
| 20 | + - [Yarn](#yarn) |
| 21 | + - [appsflyerSdk.bundle.js](#bundle) |
| 22 | +- [Platforms dependecy](#platform-dependency) |
| 23 | + - [Samsung](#samsung) |
| 24 | + - [LG](#lg) |
| 25 | +- [Initializing the SDK](#integration) |
| 26 | +- [Launch event](#launch) |
| 27 | +- [In-app Events](#inappevents) |
| 28 | +- [Testing the integration](#testing) |
| 29 | + - [Response codes](#response-codes) |
| 30 | +- [Sample App](#demo) |
| 31 | + |
| 32 | + |
| 33 | +# |
| 34 | + |
| 35 | + |
| 36 | +## <a id="installation"> Adding the SDK to your project |
| 37 | + |
| 38 | + |
| 39 | +### <a id="yarn"> Yarn |
| 40 | + |
| 41 | +**Please make sure to use npm v16.16.0/yarn v1.21.0 and above!** |
| 42 | + |
| 43 | +``` |
| 44 | +$ yarn add appsflyer-html5-ctv-sdk |
| 45 | +``` |
| 46 | + |
| 47 | +### <a id="bundle"> appsflyerSdk.bundle.js |
| 48 | + |
| 49 | +Download the appsflyerSdk.bundle.js file from [here](dist/appsflyerSdk.bundle.js), and add it to your index.html file header: |
| 50 | + |
| 51 | +``` |
| 52 | +<script src="[bundle-js-location]"></script> |
| 53 | +``` |
| 54 | + |
| 55 | +## <a id="platform-dependency"> Platforms dependecy |
| 56 | + |
| 57 | +In order for the SDK to fetch device data from the relevant platform, make sure to follow the following instructions: |
| 58 | + |
| 59 | + |
| 60 | +### <a id="samsung"> Samsung |
| 61 | + |
| 62 | +1. Add the following script to your index.html file: |
| 63 | + |
| 64 | +``` |
| 65 | +<script type="text/javascript" src="$WEBAPIS/webapis/webapis.js"></script> |
| 66 | +``` |
| 67 | + |
| 68 | +2. Add the following dependecies through Tizen studio: |
| 69 | + |
| 70 | +``` |
| 71 | +<tizen:privilege name="http://tizen.org/privilege/internet"/> |
| 72 | +<tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/> |
| 73 | +<tizen:privilege name="http://developer.samsung.com/privilege/adinfo"/> |
| 74 | +``` |
| 75 | + |
| 76 | +### <a id="lg"> LG |
| 77 | + |
| 78 | +1. Download the [webOSTVjs](https://webostv.developer.lge.com/assets/library/webOSTVjs-v1.2.4.zip) to your project. |
| 79 | + |
| 80 | +2. Add the following script to your index.html file: |
| 81 | +``` |
| 82 | +<script type="text/javascript" src="[webOSTVjs-1.2.4-directory]"></script> |
| 83 | +``` |
| 84 | + |
| 85 | + |
| 86 | + ## <a id="integration"> 🚀 Initializing the SDK |
| 87 | + |
| 88 | +Initialize the SDK to enable AppsFlyer to detect installations, sessions (app opens) and updates.<br> |
| 89 | + |
| 90 | +```javascript |
| 91 | +import AppsFlyerSDK from 'appsflyer-html5-ctv-sdk' |
| 92 | + |
| 93 | +let appsflyer = new AppsFlyerSDK(); |
| 94 | +let config = { |
| 95 | + devKey: "RxutGo4bSB9MKkM7bMCjHP", |
| 96 | + appId: "3202204027284", |
| 97 | + isDebug: true, |
| 98 | + isSandbox: false |
| 99 | +} |
| 100 | + |
| 101 | +await appsflyer.init(config); |
| 102 | + |
| 103 | +``` |
| 104 | + |
| 105 | +| Setting | Description | |
| 106 | +| -------- | ------------- | |
| 107 | +| devKey | Your application [devKey](https://support.appsflyer.com/hc/en-us/articles/207032066-Basic-SDK-integration-guide#retrieving-the-dev-key) provided by AppsFlyer (required) | |
| 108 | +| appId | [App ID](https://support.appsflyer.com/hc/en-us/articles/207377436-Adding-a-new-app#available-in-the-app-store-google-play-store-windows-phone-store) you configured in your AppsFlyer dashboard (required) | |
| 109 | +| isDebug | Show Debug logs - set to `true` for testing only! | |
| 110 | +| isSandbox | Send events to sandbox endpoints - set to `true` for testing only! | |
| 111 | + |
| 112 | + |
| 113 | +## <a id="launch"> Launch event |
| 114 | + |
| 115 | + ```javascript |
| 116 | +appsflyer.start() |
| 117 | + .then((response)=>{ |
| 118 | + console.log("start API response success: " + JSON.stringify(response)); |
| 119 | + }).catch((err)=>{ |
| 120 | + console.log("start API response err: " + JSON.stringify(err)); |
| 121 | + }); |
| 122 | + ``` |
| 123 | + |
| 124 | + |
| 125 | +## <a id="inappevents"> In-app events |
| 126 | + |
| 127 | +**<a id="logEvent"> `logEvent(String eventName, Object eventValues)`** |
| 128 | + |
| 129 | +| parameter | type | description | |
| 130 | +| ----------- |----------|------------------------------------------ | |
| 131 | +| eventName | String | The event name, it is presented in your dashboard. | |
| 132 | +| eventValues | Object | The event values that are sent with the event. | |
| 133 | + |
| 134 | + ```javascript |
| 135 | +appsflyer.logEvent("af_purchase", {"af_revenue" : 1.99, "af_currency": "USD"}) |
| 136 | + .then((response)=>{ |
| 137 | + console.log("logEvent API response success: " + JSON.stringify(response)); |
| 138 | + }).catch((err)=>{ |
| 139 | + console.log("logEvent API response err: " + JSON.stringify(err)); |
| 140 | + }); |
| 141 | + ``` |
| 142 | + |
| 143 | +## <a id="testing"> Testing the integration |
| 144 | + |
| 145 | +- In order to check a succesful integration of the AppsFlyer SDK, please enable `isDebug` option to `true`; |
| 146 | + |
| 147 | +- The following request should be sent: |
| 148 | + |
| 149 | +``` |
| 150 | +// launch request: |
| 151 | +
|
| 152 | +AppsFlyerSDK :: Sending start request |
| 153 | +AppsFlyerSDK :: https://events.appsflyer.com/v1.0/c2s/session/app/tizen/3202204027284 |
| 154 | +AppsFlyerSDK :: {"device_ids":[{"type":"custom","value":"c6577bb9-d4d1-4adf-809e-c3abf7c76b58"}],"limit_ad_tracking":true,"device_model":"UKS9000","device_os_version":"5.0","customer_user_id":"15667737-366d-4994-ac8b-653fe6b2be4a","app_version":"1.0.5","request_id":"aa64ea40-6cda-4fde-b4c5-31f600e1b50f","timestamp":1662035187532} |
| 155 | +
|
| 156 | +// logEvent request: |
| 157 | +AppsFlyerSDK :: Sending logEvent request |
| 158 | +AppsFlyerSDK :: https://events.appsflyer.com/v1.0/c2s/inapp/app/tizen/3202204027284 |
| 159 | +AppsFlyerSDK :: {"device_ids":[{"type":"custom","value":"c6577bb9-d4d1-4adf-809e-c3abf7c76b58"}],"limit_ad_tracking":true,"device_model":"UKS9000","device_os_version":"5.0","customer_user_id":"15667737-366d-4994-ac8b-653fe6b2be4a","app_version":"1.0.5","request_id":"c55bb0fe-fed5-4c02-8e5d-c6031f56ecaf","timestamp":1662035187534,"event_name":"af_purchase","event_parameters":{"af_revenue":1.99,"af_currency":"USD"}} |
| 160 | +
|
| 161 | +``` |
| 162 | + |
| 163 | + |
| 164 | +- Check the response code is 202/200 |
| 165 | + |
| 166 | +``` |
| 167 | +AppsFlyerSDK :: start request success with status code: 202 Message: Success |
| 168 | +AppsFlyerSDK :: logEvent request success with status code: 202 Message: Success |
| 169 | +``` |
| 170 | + |
| 171 | +### <a id="response-codes"> Response codes |
| 172 | + |
| 173 | +| response code | description | |
| 174 | +| ----------- |------------------------------------------ | |
| 175 | +| 200/202 | Successful | |
| 176 | +| 400 | In case the authentication succeeded, if any of the mandatory fields in the message body are missing, or if any of the fields are invalid| |
| 177 | +| 401 | If the app doesn’t exist or the authentication failed | |
| 178 | +| 403 | In case app traffic should be blocked due to Zero package limit | |
| 179 | +| 404 | network error | |
| 180 | + |
| 181 | +## <a id="demo"> Sample app |
| 182 | + |
| 183 | +Try our demo app! |
| 184 | + |
| 185 | +1. Clone the repo |
| 186 | + |
| 187 | +2. Comment/uncomment the relevant config file for the relevant platform in example/main.js (LG/SAMSUNG) |
| 188 | + |
| 189 | +3. Execute the following: |
| 190 | + |
| 191 | +```bash |
| 192 | +$ yarn buildDev |
| 193 | +``` |
| 194 | + |
| 195 | +Open and run the following directory from your emulator/simulator or real device: |
| 196 | + |
| 197 | +``` |
| 198 | +appsflyer-html5-ctv-sdk/example/app |
| 199 | +``` |
| 200 | + |
| 201 | + |
0 commit comments