Wiki source code of React native integration

Version 16.1 by Developer on 2020/01/03 09:15
Show last authors
1 {{box cssClass="floatinginfobox" title="**Page Contents**"}}
2 {{toc/}}
3 {{/box}}
4
5 = 1. Overview =
6
7 The plugin is located at npmjs repositories [[(npm repositories)>>https://www.npmjs.com/package/react-native-mobigate]]
8 This plugin is built for:
9
10 * Mobigate SDK version 1.0.4
11
12 = 2. Adding SDK to the project =
13
14 **First, install library from the repository with**
15
16 {{code language=""}}
17 yarn add react-native-mobigate
18 {{/code}}
19
20 or
21
22 {{code language=""}}
23 npm install react-native-mobigate --save
24 {{/code}}
25
26 **Link newly added plugin**
27
28 * **React Native >= 0.60**
29 Starting from React Native 0.60, [[autolinking>>https://github.com/react-native-community/cli/blob/master/docs/autolinking.md]] makes the installation process simpler
30
31 * **React Native <= 0.59**
32 ** Mostly automatic installation:
33 {{code language=""}}react-native link react-native-mobigate{{/code}}
34 ** Manual installation:{{showhide id="1" showmessage="Manually link the library on Android" hidemessage="Manually link the library on Android"}}* Add to: android/settings.gradle
35
36 {{code language="groovy"}}
37 include ':react-native-mobigate'
38 project(':react-native-mobigate').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mobigate/android')
39 {{/code}}
40 * Add to: android/app/build.gradle
41
42 {{code language="groovy"}}
43 dependencies {
44 implementation project(':react-native-mobigate')
45 }
46 {{/code}}
47 * Add the MobigatePackage class to your list of exported packages into: android/app/src/main/.../MainApplication.java
48
49 {{code language="java"}}
50 ...
51 import pl.spicymobile.reactmobigate.MobigatePackage;
52
53
54 @Override
55 protected List<ReactPackage> getPackages() {
56 return Arrays.<ReactPackage>asList(
57 new MainReactPackage(),
58 new MobigatePackage()
59 );
60 }
61 {{/code}}{{/showhide}}
62
63 = 3. Api methods =
64
65 To use any method from the plugin add import:
66
67 {{code language="javascript"}}
68 import Mobigate from 'react-native-mobigate'
69 {{/code}}
70
71 == 3.1 SDK initialization ==
72
73 You must initialize the library before running it. Use //init(apiKey, options, onSuccess, onError)// method for that:
74
75 **Mobigate.init(apiKey, options, onSuccess, onError)**
76
77 (% class="table-bordered table-hover" style="border-color:powderblue" %)
78 |=(% style="background-color:powderblue" %)Parameter|=(% style="background-color:powderblue" %)Type|=(% style="background-color:powderblue" %)Description
79 |apiKey|String|Api key provided by your business partner
80 |options|Json Object|SDK configuration
81 |onSuccess|Function|returns callback object
82 |onError|Function|returns callback object
83
84 {{showhide id="2" showmessage="Options" hidemessage="Options"}}
85 (% class="table-bordered table-hover" style="border-color:powderblue" %)
86 |=(% style="background-color:powderblue" %)Name|=(% style="background-color:powderblue" %)Type|=(% style="background-color:powderblue" %)Default|=(% style="background-color:powderblue" %)Description
87 | appIdentifier|String| | Application identifier
88 |appInstallationSource |String| | App installation source e.g., google-play, organic.
89 |email |String | | Set's user email.
90 |customUserId |String | | You may use your custom userID for marking data. By default we are using device ID and emails for matching. Set it before starting the service using MobigateSDk.Builder method.
91 | enableUserFields|Json Array | | Enable custom fields in user data. By default MobienceSDK is gathering all identifiers, which it can read. You can choose one of these field: ["email", "imei", "imsi", "msisdn", "mac", "serial"] DODAĆ LINKA DO CONSTANTS.
92 | dataGatherPolicy| Json Object| | Enable custom data gater policy. By default MobienceSDK gather all data it can read and hide notification icon. Check below DataGatherPolicy options for more details.
93 | enableIdProfiles|Boolean |false | turns on / off the IDs profiles system.
94 {{/showhide}}
95
96 {{showhide id="3" showmessage="DataGatherPolicy options" hidemessage="DataGatherPolicy options"}}
97 (% class="table-bordered table-hover" style="border-color:powderblue" %)
98 |=(% style="background-color:powderblue" %)Name|=(% style="background-color:powderblue" %)Type|=(% style="background-color:powderblue" %)Default|=(% style="background-color:powderblue" %)Description
99 | monitorState|String| | Possible monitor states: DODAĆ LINKA DO CONSTANTS. More info about gathering data [[here>>https://wiki.spicymobile.pl/wiki/mobigatesdk/view/Main/mobigatesdkintegrationforandroiddevelopers/#H5.8Datagatherpolicy]]
100 |notificationText|String| | if state = Mobigate.DATA_GATHER_POLICY_DEFAULT you can pass custom foreground service notification text
101 {{/showhide}}
102
103
104 When the library is already initialized run it. Use //startSDK(onSuccess, onError)// method for that:
105
106 **Mobigate.startSDK(onSuccess, onError)**
107
108 (% class="table-bordered table-hover" style="border-color:powderblue" %)
109 |=(% style="background-color:powderblue" %)Parameter|=(% style="background-color:powderblue" %)Type|=(% style="background-color:powderblue" %)Description
110 |onSuccess|Function|returns callback object
111 |onError|Function|returns callback object
112
113 {{showhide id="3" showmessage="Example" hidemessage="Example"}}
114 {{code language="javascript"}}
115 initLibrary = () => {
116 if (Platform.OS === 'android') {
117 Mobigate.init("V0K6jhiIfem6CRWHYZ59Nmj3oFBBKbJsnSsWfR2JNq7ktblOUXwbJoBQTpWnw2uSwW76gpiu2kun50jweTY69B",
118 {
119 /*custom options, check docs for more details
120 appIdentifier: 'customUserAppIdentifier',
121 appInstallationSource: "customAppInstallationSourcexyz",
122 email: 'testemail@gmail.com',
123 userAgent: 'customUserAgent',
124 customUserId: 'customUserId',*/
125 }, (success) => {
126 /* You can configure custom collectors after init
127 Mobigate.disableAllDataCollector()
128 Mobigate.configureDataCollectors(true, [Mobigate.DATA_COLLECTOR_APPS_LIST,
129 Mobigate.DATA_COLLECTOR_BATTERY,
130 Mobigate.DATA_COLLECTOR_PHONE_INFO])*/
131
132 Mobigate.startSDK((result) => {
133 this.setState({
134 status: 'started',
135 });
136
137 }, (errorResult) => {
138 this.setState({
139 status: errorResult,
140 });
141 })
142 }, (initError) => {
143 this.setState({
144 status: initError,
145 });
146 })
147 }else{
148 this.setState({
149 status: 'Mobigate SDK supports only Android'
150 })
151 }
152 }
153 {{/code}}
154 {{/showhide}}
155
156 == 3.2 Tracking in app events ==
157
158 In-App Events provide insight on what is happening in your app. It is recommended to take the time and define the events you would like to measure.
159
160 === 3.2.1 Overview ===
161
162 An event consists of two fields that you (% style="display:none" %) (%%)can use to describe a user's interaction with your app content:
163
164 (% class="table-bordered table-hover" %)
165 |(% style="background-color:powderblue; width:200px" %)**Field name**|(% style="background-color:powderblue; width:200px" %)**Type**|(% style="background-color:powderblue; width:200px" %)**Required**|(% style="background-color:powderblue; width:200px" %)**Description**
166 |(% style="width:200px" %)Category|(% style="width:200px" %)String|(% style="width:200px" %)yes|(% style="width:200px" %)Event category
167 |(% style="width:200px" %)Parameter|(% style="width:200px" %)String|(% style="width:200px" %)no|(% style="width:200px" %)Event parameter. 
168 There can be more than one
169
170 You can use any event category or parameter string of your choice. However, react-native-mobigate plugin contains recommended event categories and parameters via String constants (see [[Event categories>>doc:||anchor="H3.2.3Eventcategories"]] and [[Event parameters>>doc:||anchor="H3.2.4Eventparameters"]]).
171
172 === 3.2.2 Implementation ===
173
174 Tracking in-app events is performed by two methods:
175
176 **Mobigate.trackEvent(options)**
177
178 {{showhide id="2" showmessage="Options" hidemessage="Options"}}
179 (% class="table-bordered table-hover" style="border-color:powderblue" %)
180 |=(% style="background-color:powderblue" %)Name|=(% style="background-color:powderblue" %)Type|=(% style="background-color:powderblue" %)Default|=(% style="background-color:powderblue" %)Description
181 |name|String | | Event category name.
182 |parameters|Json array| | Array of parameters. Look below on example.
183 {{/showhide}}
184
185 {{showhide id="3" showmessage="Example" hidemessage="Example"}}
186 {{code language="javascript"}}
187 sendTrackEvent = () => {
188 if (Platform.OS === 'android') {
189 Mobigate.trackEvent({
190 name: Mobigate.CATEGORY_PURCHASE,
191 parameters: {
192 [Mobigate.PARAMETER_CONTENT_ID]: 42313532,
193 [Mobigate.PARAMETER_PRICE]: 43.23,
194 [Mobigate.PARAMETER_QUANTITY]: 2,
195 'userCustomParameterName':'simpleName'
196 },
197 })
198 }
199 }
200 {{/code}}
201 {{/showhide}}
202
203
204 **Mobigate.trackAppInstall(timestamp)**
205
206 (% class="table-bordered table-hover" style="border-color:powderblue" %)
207 |=(% style="background-color:powderblue" %)Parameter|=(% style="background-color:powderblue" %)Type|=(% style="background-color:powderblue" %)Description
208 |timestamp|double|Unix timestamp in milliseconds
209
210 {{showhide id="3" showmessage="Example" hidemessage="Example"}}
211 {{code language="javascript"}}
212 sendTrackEvent = () => {
213 if (Platform.OS === 'android') {
214 Mobigate.trackAppInstall(1578042916000)
215 }
216 }
217 {{/code}}
218 {{/showhide}}
219
220 === 3.2.3 Event categories ===
221
222 === 3.2.4 Event parameters ===
223
224 == 3.3 Remaining methods ==
225
226
227
228
229
230 (% class="table-bordered table-hover" style="border-color:powderblue" %)
231 |=(% style="background-color:powderblue" %)Name|=(% style="background-color:powderblue" %)Type|=(% style="background-color:powderblue" %)Default|=(% style="background-color:powderblue" %)Description
232 | | | |
233
234 = 4. Constants =
235
236 = 5. Sample app =

MobigateSDK Center

Spicy Mobile
spicymobile.pl