# 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](/getting-started-with-apxor/adding-a-new-app.md))
* **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.

{% hint style="info" %}
**Note**

Please add <mark style="background-color:blue;">**.apxor**</mark> as suffix to the bundle id&#x20;

eg.&#x20;

&#x20; **`com.example.myapp.apxor`**
{% endhint %}

[(Know more about bundle ids here)](https://developer.android.com/studio/build/configure-app-module)

* **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](broken://pages/l2KXXBeVSa1fIQTAMxr7))
* **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](/getting-started-with-apxor/firebase-credentials-optional.md))

**Understanding dependencies to add to your project**

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

### 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`**:

```java

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

<figure><img src="/files/Tuj8ho4phsLmB5qmCUEb" alt=""><figcaption></figcaption></figure>

### 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.](/getting-started-with-apxor/release-notes.md#android)

<details>

<summary>AndroidX</summary>

```java
dependencies {
//...

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


    // Add these for Realtime Actions and Surveys
    implementation 'com.apxor.androidx:apxor-android-sdk-qe:1.8.4@aar'
    implementation 'com.apxor.androidx:apxor-android-sdk-rtm:2.6.3@aar'
    implementation 'com.apxor.androidx:surveys:2.2.6@aar'


    // Helper plugin to create walkthroughs
    implementation 'com.apxor.androidx:wysiwyg:1.6.3@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'
    }
    
//...
}
```

</details>

### 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`**:

<details>

<summary>AndroidX</summary>

```java
{
  "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"
    }
  ]
}

```

</details>

### 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

<details>

<summary>com.apxor.androidx:apxor-android-sdk-rtm:2.3.6@aar version onwards</summary>

```gradle
dependendies {
  //... 

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


  //...
  }
```

</details>

<details>

<summary>com.apxor.androidx:apxor-android-sdk-rtm:2.3.5@aar and below</summary>

```gradle
dependendies {
  //... 

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

  //...
  }
```

</details>

<figure><img src="/files/BMQoL6soL1X6E8GmUgTs" alt=""><figcaption></figcaption></figure>

### Step 5: Disable Dexing Artifact Transformation

{% hint style="info" %}
**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.
{% endhint %}

Add the following properties `gradle.properties` file

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

```java
android.enableDexingArtifactTransform = false
```

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

{% hint style="info" %}
**Note**

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

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

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

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

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

For jetpack compose view component, add an <mark style="color:purple;">**apxorLabel**</mark> modifier. Add the import statement in all the files and the <mark style="color:purple;">**apxorLabel**</mark> to all the view ids where you want to display coachmarks, tooltips and badges.

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

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

{% hint style="info" %}
**Note**

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

### Step 7: Enable uninstall tracking for your users

{% hint style="info" %}
**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
{% endhint %}

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`**

<details>

<summary>Firebase Version >= 22.0.0</summary>

```java
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`**:

```java

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

```

**With This**

```java

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

</details>

<details>

<summary>Firebase Version &#x3C; 22.0.0</summary>

```java
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 :

```java
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](/getting-started-with-apxor/firebase-credentials-optional.md) on how to get your firebase sender ID and also FCM server key to share it with apxor to configure uninstall tracking.

</details>

### 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`**:

```java
<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](/getting-started-with-apxor/adding-a-new-app.md)

### 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 :

```java
ApxorSDK(v2**) successfully initialized for: APP_ID
```

<figure><img src="/files/YvXdm3C74F7yb5fcYmgP" alt=""><figcaption></figcaption></figure>

**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

```java
adb shell setprop log.tag.Apxor VERBOSE
```

<figure><img src="/files/sRoXlvsMhggAWYRwLrnC" alt=""><figcaption></figcaption></figure>


---

# 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://guides.apxor.com/getting-started-with-apxor/sdk/jetpack-compose.md?ask=<question>
```

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.