Part One: Introduction to Adobe Analytics Mobile Tools
There are two main reasons to install Adobe Analytics into your React Native Application.
First, you can track information about your users and gain an understanding around what screens they’re viewing and what actions they’re taking inside your app. You could find out if the new feature you just released is being used or if users are falling out at a certain step in your app’s flow, etc.
Second, you can collect metadata about the app’s usage in the form of what Adobe calls lifecycle metrics. These are events about the app that occur in the operating system such as installs, crashes, etc. These metrics can help you answer questions such as: How many users launch the app daily or how long are users spending inside the app? In general, these user event tracking and lifecycle metrics can help you answer questions about how users are using your app and how the app is performing.
This post will cover installing the Adobe Experience Platform (AEP) SDK, in a React Native application. It will also cover tracking states and actions via React Native Javascript and sending that data to Adobe Analytics via hard coding and the Launch UI. Finally, I will show you how to view Adobe beacons being sent by your application (that is running a phone simulator) in the Charles Proxy tool.
Although React Native apps work in both iOS and Android simultaneously (the selling point of developing in React Native), some work in each’s native code (Objective-C for iOS and Java for Android) is still necessary. I will cover how to install the Adobe React Native SDK on both iOS and Android native code.
Tools and Applications Needed
Before you get started, there are several tools and applications that are needed. You will also need access to your application’s source code. Being able to navigate using the terminal and being comfortable writing terminal commands will also be a big help. You will need:
- Xcode: Can be downloaded from the Mac App Store
- Android Studio: Android Development Kit
- NodeJS: Javascript runtime. Runs JS outside the browser in the terminal
- Homebrew: MacOS Package Manager
- Cocoapods: iOS dependency manager
- VSCode: Or any regular text editor you like
- Charles Proxy: View network traffic from your iOS device or simulator
- React Native Debugger (optional): Standalone debugger for React Native Apps
You will also need admin access to Adobe Analytics and Adobe Launch in order to create report suites and publish Launch libraries. Being familiar with the Launch publishing process and environments, and a little bit of general React knowledge will be beneficial as well.
Setup
I have a simple React Native app that I built following this YouTube tutorial (which I highly recommend watching if you are new to React Native). It has a home screen with a list of items and a button that opens a modal that appends items to that list. You can tap the items in the list to delete them.
The app was built using Expo. Expo is a workflow tool that makes writing React apps a lot simpler. There are many reasons to use Expo, but one of its downsides is that it does not support implementing native modules; which the AEP SDK and the official React Native ACPCore wrapper are.
No problem though. We can eject my app to get access to the native source code for iOS and Android. Read more on ejecting an Expo app.
My Code:
Pre Expo Ejection:
Post Expo Ejection:
Now that I have a clean React Native app, I can start implementing the AEP SDK and React Native Wrapper.
My app running in the iOS simulator:
My app running on the Android emulator:
Adobe Analytics Setup & Gathering Code
The process of installing Launch/AEP SDK on a mobile app is different from installing it on a website, and the process of installing Launch/AEP SDK on a React-Native app is different from installing it in a native mobile app. Therefore, we need to gather different code than what is provided in the Launch environment installation instructions. You’ll see what I mean as we progress.
Before beginning the process you should have a report suite set-up for a mobile application. This is different from a regular web report suite and requires admin access to create. For more information on mobile app report suites see this documentation.
I will start by creating a Launch property for my app called "test-mobile":
Once the property is created, I will install some extensions and build a development library. Note that I will not be utilizing all these extensions, but I want to illustrate how extensions get from Launch into the app.
When installing the Adobe Analytics extension, it is important to set up the correct report suite(s). The extension will check that the specified report suites are correctly configured for mobile app usage. If not, Launch will not allow you to install the Adobe Analytics extension.
Valid report suite:
Invalid report suite:
Once I have added all the changes to the library and built it for development, I’ll go to the Environments tab and open the installation modal for the Development Library to view the iOS and Android installation instructions.
The steps of the instructions are correct, but because I am using React Native, the code snippets needed are different. The actual code I need will be provided by the React Native wrapper. I will keep these instructions open in a separate tab so I can refer to them later.
iOS launch installation instructions:
I already have a Podfile (and odds are you will too). I won’t add anything to my Podfile or install my pods just yet.
Android installation instructions:
I believe Gradle is part of Android Studio, so you shouldn’t have to do anything extra to initialize a Gradle project.
Next Steps
For next steps, continue reading Part Two: React Native Wrappers for the Adobe and Adobe Experience Platforms.
