Jetpack Compose

Things to keep handy before starting your integration with Apxor

Please have the following handy before beginning the integration:

• Application identifier generated on the Apxor dashboard for your app (Read more on how to fetch the application identifier from Apxor dashboard)

• App Bundle Id : Every android app has a unique application ID that looks like com.example.myapp. This id uniquely identifies the app on the device and also on the google play store.

Note

Please add .apxor as suffix to the bundle id

eg.

com.example.myapp.apxor

(Know more about bundle ids here)

• The list of events to setup triggers and track goals, user properties that allows to personalize messages and to target better. (Read more on how you can setup here)

• Firebase Cloud Messaging (FCM) Server Key : For tracking uninstalls, Apxor sends silent push notifications to measure your campaign outcomes. (Read more on how to fetch firebase credentials that are used to setup uninstall tracking during integration here)

Understanding dependencies to add to your project

Plugin Name	Description	Example
apxor-android-sdk-core	Core Plugin is used to track events for to measure their results and consists of essential information that controls other plugins.	How many of my users have clicked on the cart icon after showing them a nudge Sample Event : 'ViewCart'
apxor-android-sdk-qe	plugin is used to setup behavioural triggers for the campaigns which helps to setup campaign rules.	Show a campaign to users who land on the home screen and add an item to the cart.
apxor-android-sdk-rtm	plugin is used for the show experiences created from the design library using the Apxor dashboard.	Show a tooltip on the cart icon with messaging "Tap here to view items"
surveys	plugin is used to show surveys created using the Apxor dashboard.	An NPS survey that would ask the user to rate the app experience on a scale of 1-10.
wysiwyg	plugin is used to facilitate creation of campaigns by mirroring your mobile screen to identify the right UI element to show the campaign.	Casting your mobile screen to the dashboard and selecting the hamburger icon
apxor-jetpack-compose	plugin is used to find and extract view ids	Displaying a tooltip on one of the UI element "Subscribe"

Step 1: Add Apxor Repository

Add Maven URL in project level build.gradle file to load the plugins.json file you will create in Step 3.

Path: <project>/build.gradle:

allprojects {
    repositories {
        // ...
        maven {
           url "https://repo.apxor.com/artifactory/list/libs-release-android/"
        }
        // ...
    }
}

Step 2: Add ApxorSDK

Add plugin dependencies to your application build.gradle file

Path: <project>/<app-module>/build.gradle:

Check the latest release notes here.

AndroidX

dependencies {
//...

    // Event tracking and a must have dependency for other plugins
    implementation 'com.apxor.androidx:apxor-android-sdk-core:3.1.0@aar'


    // Add these for Realtime Actions and Surveys
    implementation 'com.apxor.androidx:apxor-android-sdk-qe:1.7.5@aar'
    implementation 'com.apxor.androidx:apxor-android-sdk-rtm:2.4.8@aar'
    implementation 'com.apxor.androidx:surveys:2.1.8@aar'


    // Helper plugin to create walkthroughs
    implementation 'com.apxor.androidx:wysiwyg:1.5.6@aar'
    
    // Add the below two dependencies to establish SSE connection for WYSIWYG
    implementation 'com.squareup.okhttp3:okhttp:4.9.0'
    implementation 'com.launchdarkly:okhttp-eventsource:2.5.0'
    
    //Jetpack compose plugin
    implementation 'com.apxor.androidx:apxor-jetpack-compose:1.0.2@aar

    // Add this to track uninstalls from Apxor dashboard
    implementation('com.apxor.androidx:apxor-android-sdk-push-v2:1.3.1@aar') 
    {
    exclude group: 'com.google.firebase'
    }
    
//...
}

Step 3: Create Apxor Configuration File

Create an assets folder in android app module and create the plugins.json that contains the below code.

This is used to initialise the dependencies that are used while adding Apxor SDK in the third step.

Path: src/main/assets/plugins.json:

AndroidX

{
  "plugins": [
    {
      "name": "rtm",
      "class": "com.apxor.androidsdk.plugins.realtimeui.ApxorRealtimeUIPlugin"
    },
    {
      "name": "push-v2",
      "class": "com.apxor.androidsdk.plugins.push.v2.PushPlugin"
    },
    {
      "name": "surveys",
      "class": "com.apxor.androidsdk.plugins.survey.SurveyPlugin"
    },
    {
      "name": "wysiwyg",
      "class": "com.apxor.androidsdk.plugins.wysiwyg.WYSIWYGPlugin"
    }
  ]
}

Step 4: Add exoplayer in your app (optional)

Exoplayer enables to configure Picture In Picture videos from Apxor dashboard and typically increases the app size by ~1Mb, if you are already using exoplayer in your app this step is not needed else add the following dependency in the application build.gradle file

com.apxor.androidx:apxor-android-sdk-rtm:2.3.6@aar version onwards

dependendies {
  //... 

  implementation 'androidx.media3:media3-exoplayer:1.1.1'
  implementation 'androidx.media3:media3-ui:1.1.1'


  //...
  }

com.apxor.androidx:apxor-android-sdk-rtm:2.3.5@aar and below

dependendies {
  //... 

  implementation 'com.google.android.exoplayer:exoplayer:2.14.0'

  //...
  }

Step 5: Disable Dexing Artifact Transformation

Note

In the Android Gradle Plugin 3.5.0, we desugar & dex using Gradle artifact tranforms, which allow more parallelism and caching. This mechanism relies on libraries having the correct Maven information, because we use dependencies specified in POM files to set up the desugaring classpath. In cases we are unable to see all dependencies when desugaring a class it is required to disable parallel transformation to faciliate the process by adding the property as mentioned below.

Add the following properties gradle.properties file

Path: <project>/<app-module>/gradle.properties:

android.enableDexingArtifactTransform = false

Step 6: Add the following in proguard-rules.pro

Note

If you use proguard to obfuscate the classes, you have to add the following to ignore obfuscation for Apxor SDK classes

Configure the below rules in your proguard-rules.pro file

Path: <project>/<app-module>/proguard-rules.pro:

-keep class com.apxor.** { *; }
-dontwarn com.apxor.**

Step 7: Configuring IDs for View (Mandotory for inlines)

For jetpack compose view component, add an apxorLabel modifier. Add the import statement in all the files and the apxorLabel to all the view ids where you want to display coachmarks, tooltips and badges.

import com.apxor.androidsdk.plugins.apxor_android_sdk_jc.Modifier

Text(text = "Hello world!", modifier = Modifier.apxorLabel(name)) 

Note

You will not be able to point UI elements (eg. Tooltips, Coachmarks) on any jetpack compose view without an apxorLabel.

Step 7: Enable uninstall tracking for your users

Note

Apxor does not support firebase-messaging >= 22.0 while using the push plugin that helps track uninstalls. If your applpication is using firebase-messaging >=22.0 please remove android-sdk-push during integration

Apxor uses your firebase server key to send silent push notifications to track uninstalls in order to measure outcomes of your campaign. To enable this please do the following :

Path : app/build.gradle

Firebase Version >= 22.0.0

dependencies {
  // Add this to track uninstalls from Apxor dashboard
  implementation('com.apxor.androidx:apxor-android-sdk-push-v2:1.2.8@aar') {
    exclude group: 'com.google.firebase'
  }
}

If you are using Firebase version >= 22.0.0 please replace the push plugin in your assets/plugins.json with the following

Replace the following

Path: src/main/assets/plugins.json:

{
  "plugins": [
    {
      "name": "push",
      "class": "com.apxor.androidsdk.plugins.push.PushPlugin"
    },
}

With This

{
  "plugins": [
    {
      "name": "push",
      "class": "com.apxor.androidsdk.plugins.push.v2.PushPlugin"
    },
}

Firebase Version < 22.0.0

dependencies {
  // Add this to track uninstalls from Apxor dashboard
  implementation('com.apxor.androidx:apxor-android-sdk-push:1.2.8@aar') {
    exclude group: 'com.google.firebase'
  }
}

If you are using Firebase version <22.0.0 firebase messaging service please handle the notifications like the following :

public class MyFirebaseMessagingService extends FirebaseMessagingService {
    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        // Creating Notification Channel
        ApxorPushAPI.createNotificationChannel(this.getApplicationContext(), "Apxor", "Apxor", "Apxor");
        if (remoteMessage.getFrom().equals(YOUR_FCM_SENDER_ID)) {
            // Push Notification receiver with your Sender Id
        } else {
            // Check if Push Notification received from Apxor
            if (ApxorPushAPI.isApxorNotification(remoteMessage)) {
                ApxorPushAPI.handleNotification(remoteMessage, getApplicationContext());
            } else {
                // Silent or Data push notification which you can send through Apxor dashboard
            }
        }
    }
}

Read here on how to get your firebase sender ID and also FCM server key to share it with apxor to configure uninstall tracking.

Step 8: Initialize SDK

To Auto initialize SDK (Recommended), add following meta-data tag inside your application tag in your AndroidManifest.xml file

Path: <project>/<app-module>/src/AndroidManifest.xml:

<application>
//...
    <meta-data android:name="APXOR_APP_ID" android:value="Enter Apxor Application Identifier generated in the dashboard"/>
//...
</application>

Here is how you can get the Apxor Application Identifier as mentioned in the Integration Essentials section

Step 9: Yay, Verify your SDK integration

We have to verify for two things as follows :

SDK Initialisation

On running your android project lookout for the following log in logcat :

ApxorSDK(v2**) successfully initialized for: APP_ID

Plugin Initialisation

By default, only error logs are enabled. To see debug logs for plugin initialisation and to confirm tracking event triggers, user properties. Please run the below command in terminal

adb shell setprop log.tag.Apxor VERBOSE