Hello World React Native + Adobe Launch + Adobe Analytics
During the 2019 Adobe Summit, Adobe showed us how to use Adobe Launch to implement Adobe Analytics on native apps. Using Adobe Launch for native apps allows developers to manage libraries and configurations without having to rebuild and resubmit the app to App Store. This ensures the app is always using the latest version of Adobe Mobile SDK and has the latest configurations. I’ve been working with Adobe SDK 4.xx for a long time, and I want to experience this new approach, so what better way to experience it than to build my own app and implement Adobe Analytics in the app.
I am not an app developer, I don’t even like using command line and terminal. But following the Getting Started Guide from React Native, I managed to create a Hello World iOS app. Then I implemented Adobe Launch, and re-wrote a React Native bridge library for the new Adobe Mobile SDK. This post outlined all the high level steps, and they are intended for someone who is already familiar with Adobe Launch and Adobe Mobile SDK 4.xx.
1. Install Homebrew
2. Install node
3. Install Watchman
4. Install React Native CLI – Command Line Tool
5. Install and Configure Xcode
6. Create AwesomeProject application
7. Create New Property In Adobe Launch
8. Podfile
9. Implement CollectLifeCycle/LifecycleStart
10. Re-write a bridge library for trackAction & trackState
11. Implement a trackAction
1. Install Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"Here is the screen for successful installation.
2. Install Node
brew install node
3. Install Watchman
brew install watchman
4. Install React Native CLI – Command Line Tool
npm install -g react-native-cli
5. Install and Configure Xcode
Apple only allows iOS app development on Mac with Xcode, even if I use React Native, I’ll still need Xcode to build the app. The easiest way to install Xcode is using the App Store. After installing Xcode, then go to Preference->Location to make this update:
6. Create AwesomeProject application
In terminal, first navigate to the directory that you want to create the Hello World project, then run:
react-native init AwesomeProject
When everything is ran smoothly, this is the success screen.
7. Create and publish the new property In Adobe Launch
When creating the new property, make sure to select Mobile, and add the Adobe Analytics Extension in addition to Mobile Core which is already included. Publishing workflow is same as for web property. If you are not yet familiar with Adobe Launch, here are the tutorials – https://www.youtube.com/watch?v=YZMApEMdolw
8. Podfile
In terminal, go to ios directory of the newly created AwesomeProject, and run:
pod init
Once completed, a Podfile will be created in the directory.
Now we need to open this file using code editor, and update it. Copy the dependencies code from Adobe Launch interface, and paste them onto the Podfile, and uncomment a few line.
Here is what I have, and in reality, there should be more dependencies than just ACPAnalytics and ACPCore. It depends on how many Extensions you’ve added in Adobe Launch.
Save the Podfile, go back to terminal, and run the install command:
pod install
The result should look something like this:
After this is done, there will be a new project file created with .xcworkspace extension, we’ll be using this new project file from now.
9. Implement CollectLifeCycle/LifecycleStart
Copy and paste the initialization code to the AppDelegte.m file in Xcode. I believe this is equivalent to including ADMobile.h in Adobe Mobile SDK 4.xx.
Now we can add CollectLifeCycle within the didFinishLaunchingWithOptions method, so each time the app launches, Adobe will get some basic data about the app, such as Device Type, App Crash, App Launch/Initiation, etc. For more information about LifeCycle Data, here is the documentation from Adobe, https://marketing.adobe.com/resources/help/en_US/mobile/ios/metrics.html
Again, this is very similar to the old Adobe Mobile SDK 4.xx. There are more codes to place here compare to SDK 4.xx because this is where the downloading of Launch Extensions happens. No longer we’ll need to include the old ADMobileConfig.json, because the configurations is manage remotely by Launch.
But wait, aren’t we using ReactNative? Why are we using Objective-C codes? I’ll re-write an existing bridge library for trackState and trackAction, so they can be used in ReactNative codes. We could have a bridge for CollectLifeCycle as well, so React Native can take advantage of the remote managed configurations upon app initiation. For this Hello World app, I am just going to use Objective-C for CollectLifeCycle to make sure everything is working first.
Now rebuild the app in Xcode, and Adobe Analytics beacon will appears in the console. Make sure to comment out the first line of the code above to disable the debug log for your production app.
10. Re-write a bridge library for TrackState & TrackAction
As of May 2019, Adobe does not have an official bridge library for the React Native. I hope Adobe will add this to their product road map. Fortunately, there are several 3rd-party React Native to Adobe Analytics bridge libraries available:
https://github.com/odemolliens/react-native-adobe-analytics
https://github.com/smalltownheroes/react-native-adobe-analytics
https://github.com/vivekparekh8/react-native-omniture
The problem is all of these bridge libraries are written using Adobe Mobile SDK 4.xx, so we will have to re-write them for the new Adobe Mobile SDK, because that is what Adobe Launch uses.
For example, instead of:
#import "ADBMobile.h"
We’ll change it to:
#import "ACPCore.h"
#import "ACPAnalytics.h"
#import "ACPIdentity.h"
#import "ACPLifecycle.h"
#import "ACPSignal.h"
...
Instead of:
[ADBMobile trackAction:actionName data:contextData];
We’ll replace it by:
[ACPCore trackAction:actionName data:contextData];
For this Hello World app, I am going to re-write trackState and trackAction only. Thanks to Vivek Parekh, who originally wrote these codes for Adobe SDK 4.xx. I used his library simply because it is easiest one for me to understand.
As you can see below, we are simply exporting Object-C methods to React Native framework.
10. Implement a trackAction
With the bridge library, we can use Javascript liked codes to call trackState and trackAction in React Native.
Once trackAction is working, it should easy to replicate the steps for trackState, trackLocation, and whatever methods you’ll need to use. For a list of Adobe Mobile SDK method, visit Adobe Mobile SDK docs – https://github.com/Adobe-Marketing-Cloud/acp-sdks/
That’s all. Again, I am not exactly an app developer, so if I misunderstood any code and concept, please let me know by LinkedIn, or in the Measure Slack – @chinaweboptimization