Cordova, formerly called as PhoneGap, is a platform to build native mobile applications using HTML5, CSS and JavaScript. It acts a container for running a web application written in HTML, CSS, JS. Ionic uses Cordova to deploy native apps.
Here's how you can integrate the WebEngage SDK with your hybrid app:
1. Install WebEngage plugin
Use the below command to install WebEngage plugin for both Android and iOS platforms.
cordova plugin add cordova-plugin-webengage --fetch
Steps for iOS
Step 1: Download the SDK file here. Extract the downloaded ZIP file.
- You will find two directories in the extracted ZIP:
xc10
andxc11
. If you are using Xcode 10 use theWebengage.framework
within thexc10
directory. For Xcode 11 and above use the one inxc11
.
Step 2: Select the name of the project in the project navigator. The project editor appears in the Editor area of the Xcode workspace window.
Step 3: Click on the General tab at the top of project editor.
Step 4: In the section Embedded Binaries click on the "+" button to open the file chooser for your project. Open WebEngage.framework
and select Copy if needed option. This will copy the framework to your project directory.
Step 5: Under Linked Frameworks and Libraries click the "+" button and add SystemConfiguration.framework
and CoreLocation.framework
.


Step 6: In the 'Build Settings' tab of the project editor, search for Other Linker Flags
option. Add -lsqlite3
and -ObjC
under it as shown below.


Step 7: Enable Push Notifications.
a. Enter Project Navigator view.
b. Select your main app target from the expanded sidebar or from the dropdown menu, then select the Capabilities tab.
c. If Push Notifications isn't enabled, click the switch to add the "Push Notifications" entitlement to your app. If you are using Xcode 8 or above, ensure that a YOUR-APP-NAME.entitlements
file has been added to your project.


2. Integrate the SDK
Step 1: Open the config.xml
file from the root directory of your project and add the following code snippet.
<widget ... xmlns:android="http://schemas.android.com/apk/res/android">
...
<!-- For Android -->
<platform name="android">
<config-file parent="/manifest/application" target="AndroidManifest.xml">
...
<meta-data android:name="com.webengage.sdk.android.key" android:value="YOUR_WEBENGAGE_LICENSE_CODE" />
<meta-data android:name="com.webengage.sdk.android.debug" android:value="false" />
</config-file>
</platform>
<!-- For iOS -->
<platform name="ios">
...
<config-file parent="WEGLicenseCode" target="*-Info.plist">
<string>YOUR_WEBENGAGE_LICENSE_CODE</string>
</config-file>
<config-file parent="WEGLogLevel" target="*-Info.plist">
<string>DEFAULT</string>
</config-file>
<.platform>
</widget>
Please ensure that you replace YOUR_WEBENGAGE_LICENSE_CODE
in the above code snippets (for Android & iOS) with your license code. As highlighted below, if can be found under the Account Setup section of your dashboard.


Locating your WebEngage license code
Please Note: Debug is Optional
Debug logs from WebEngage SDK are printed if:
The value of
com.webengage.sdk.android.debug
tag istrue
for Android.The value of the
WEGLogLevel
tag isVERBOSE
for iOS.(Default value of the corresponding tags is
false
for Android andDEFAULT
for iOS.)
Step 2: Add the meta-data
tag and config-file
tag under config.xml
if you're using WebEngage's India Data Center.
<platform name="android">
<config-file parent="/manifest/application" target="AndroidManifest.xml">
............
<meta-data android:name="com.webengage.sdk.android.environment" android:value="in" />
.......
</config-file>
</platform>
<platform name="ios">
.......
<config-file parent="WEGEnvironment" target="*-Info.plist">
<string>IN</string>
</config-file>
......
</platform>
IMPORTANT: Identifying Your Data Center
If your WebEngage dashboard URL starts with
dashboard.webengage.com
, then it means you're using our Global Data Center. (All data is stored here by default).If you have specifically asked for your data to be stored in our India Data Center in your contract with WebEngage, then your dashboard URL will start with
dashboard.in.webengage.com
.
3. Initialize the SDK
In your onDeviceReady
callback, call webengage.engage
.
onDeviceReady: function() {
/**
Additional WebEngage options and callbacks to be
registered here before calling webengage.engage()
**/
webengage.engage();
}
Attribution Tracking (Android only)
Add the following install-referrer library in /platforms/android/app/build.gradle
file.
dependencies {
...
implementation 'com.android.installreferrer:installreferrer:1.1.1'
}
Please note
App Installed
event andFirst Acquisition Details
data in user profile will not be tracked on your Android app unless you follow the above step.
4. Additional steps (Optional)
For other integration such as location tracking, please refer to the Advanced section.
Congratulations!
You have successfully integrated WebEngage with your Hybrid app and are sending user session data to WebEngage. Please note that it may take up to a few minutes for data to reflect in your dashboard.
Please feel free to drop in a few lines at [email protected] in case you have any further queries. We're always just an email away!
Updated 4 months ago
So, what's next?
We recommend that you implement the following integrations with your hybrid app before releasing it with WebEngage for the first time:
Track User Properties as User Attributes |
Track User Actions as Events |
Configure Push Messaging |
Configure In-app Messaging |