React Native Ampli Wrapper
Overview¶
The Ampli Wrapper is a generated, strongly typed API for tracking Analytics events based on your Tracking Plan in Amplitude Data. The tracking library exposes a function for every event in your team’s tracking plan. The function’s arguments correspond to the event’s properties.
Ampli can benefit your app by providing autocompletion for events & properties defined in Data and enforce your event schemas in code to prevent bad instrumentation.
Amplitude Data supports tracking analytics events from React Native apps written in JavaScript (ES6 and higher) and TypeScript (2.1 and higher). The generated tracking library is packaged as a CJS module.
Ampli React Native Resources
Ampli Wrapper versus the Amplitude SDK
We recommend using the Ampli wrapper for all the benefits mentioned above. However, if you want to send events without creating a tracking plan in Amplitude Data, you can learn more about the underlying Amplitude SDK in our SDK Quickstart Guide. Visit the Amplitude React Native SDK documentation.
Enable real-time type checking for JavaScript
Because JavaScript isn't a type-safe language, static type checking isn't built in like TypeScript. Some common IDEs allow for real-time type checks in JavaScript based on JSDoc. For a better development experience Ampli generates JSDocs for all methods and classes.
To enable real-time type checking in VSCode for JavaScript:
- Go to Preferences > Settings then search for checkJs.
- Select JS/TS > Implicit Project Config: Check JS.
After it's activated, type errors appear directly in the IDE.
Jetbrains provides similar support:
- Go to Preferences > Editor > Inspections > JavaScript and TypeScript > General.
- In Signature mismatch and Type mismatch, set the Severity to Warning or Error based on your desired level of strictness.
Linting with Prettier
To prevent linting errors for eslint and tslint, the SDK-generated files have the following to diasable the linters:
/* tslint:disable */
/* eslint-disable */
There's no corresponding “in-code” functionality with Prettier. Instead, add the generated path/to/ampli
to your .prettierignore
file. You can get the path with ampli pull
. See the Prettier documentation for more information.
Quick Start¶
-
(Prerequisite) Create a Tracking Plan in Amplitude Data
Plan your events and properties in Amplitude Data. See detailed instructions here
-
npm install @amplitude/analytics-react-native @react-native-async-storage/async-storage
-
npm install -g @amplitude/ampli
-
Pull the Ampli Wrapper into your project
ampli pull [--path ./src/ampli]
-
import { ampli } from './src/ampli'; ampli.load({ environment: 'production' });
-
Identify users and set user properties
ampli.identify('user-id', { userProp: 'A trait associated with this user' });
-
Track events with strongly typed methods and classes
ampli.songPlayed({ songId: 'song-1' }); ampli.track(new SongPlayed({ songId: 'song-2' });
-
Flush events before application exit
ampli.flush();
-
Verify implementation status with CLI
ampli status [--update]
Installation¶
Install the Amplitude SDK¶
If you haven't already, install the core Amplitude SDK dependencies.
npm install @amplitude/analytics-react-native @react-native-async-storage/async-storage
yarn add @amplitude/analytics-react-native @react-native-async-storage/async-storage
Install the Ampli CLI¶
You can install the Ampli CLI from Homebrew or NPM.
brew tap amplitude/ampli
brew install ampli
npm install -g @amplitude/ampli
Pull the Ampli Wrapper into your project¶
Run the Ampli CLI pull
command to log in to Amplitude Data and download the strongly typed Ampli Wrapper for your tracking plan. Ampli CLI commands are usually run from the project root directory.
ampli pull
API¶
Load¶
Initialize Ampli in your code.
The load()
function accepts an options object to configure the SDK's behavior:
Option |
Description |
---|---|
environment |
Required. String. Specifies the environment the Ampli Wrapper is running in. For example, production or development . Create, rename, and manage environments in Amplitude Data.Environment determines which API token is used when sending events. If a client.apiKey or client.instance is provided, environment is ignored, and can be omitted. |
disabled |
Optional. Boolean . Specifies whether the Ampli Wrapper does any work. When true , all calls to the Ampli Wrapper are no-ops. Useful in local or development environments.Defaults to false . |
client.apiKey |
Optional. String . Specifies an API Key. This option overrides the default, which is the API Key configured in your tracking plan. |
client.instance |
Optional. AmpltitudeClient . Specifies an Amplitude instance. By default Ampli creates an instance for you. |
client.configuration |
Optional. Amplitude.Config . Overrides the default configuration for the AmplitudeClient. |
Example of initialization with load
to override the default configuration:
ampli.load({
environment: 'development',
client: {
configuration: {
minIdLength: 10,
}
}
});
ampli.load({
environment: 'development',
client: {
configuration: {
minIdLength: 10,
}
}
});
Identify¶
Call identify()
to identify a user in your app and associate all future events with their identity, or to set their properties.
Just as the Ampli Wrapper creates types for events and their properties, it creates types for user properties.
The identify()
function accepts an optional userId
, optional user properties, and optional options
.
For example, your tracking plan contains a user property called role
. The property's type is a string.
ampli.identify('user-id', {
role: 'admin'
});
ampli.identify('user-id', {
role: 'admin'
});
The options argument allows you to pass Amplitude fields for this call, such as deviceId
.
ampli.identify('user-id', {
role: 'admin'
}, {
deviceId: 'my-device-id'
});
ampli.identify('user-id', {
role: 'admin'
}, {
deviceId: 'my-device-id'
});
Group¶
Note
This feature is available for Growth customers who have purchased the Accounts add-on.
Call setGroup()
to associate a user with their group (for example, their department or company). The setGroup()
function accepts a required groupType
, and groupName
.
ampli.client.setGroup('groupType', 'groupName');
ampli.client.setGroup('groupType', 'groupName');
Amplitude supports assigning users to groups and performing queries, such as Count by Distinct, on those groups. If at least one member of the group has performed the specific event, then the count includes the group.
For example, you want to group your users based on what organization they're in by using an 'orgId'. Joe is in 'orgId' '10', and Sue is in 'orgId' '15'. Sue and Joe both perform a certain event. You can query their organizations in the Event Segmentation Chart.
When setting groups, define a groupType
and groupName
. In the previous example, 'orgId' is the groupType
and '10' and '15' are the values for groupName
. Another example of a groupType
could be 'sport' with groupName
values like 'tennis' and 'baseball'.
Setting a group also sets the groupType:groupName
as a user property, and overwrites any existing groupName
value set for that user's groupType, and the corresponding user property value. groupType
is a string, and groupName
can be either a string or an array of strings to indicate that a user is in multiple groups.
Setting a group also sets the 'groupType:groupName' as a user property, and overwrites any existing groupName
value set for that user's groupType
, and the corresponding user property value. groupType
is a string, and groupName can be either a string or an array of strings to indicate that a user is in multiple groups. For example, if Joe is in 'orgId' '10' and '20', then the groupName
is '[10, 20]').
Your code might look like this:
ampli.client.setGroup('orgId', ['10', '20']);
ampli.client.setGroup('orgId', ['10', '20']);
Track¶
To track an event, call the event's corresponding function. Every event in your tracking plan gets its own function in the Ampli Wrapper. The call is structured like this:
ampli.eventName(
properties: EventNameProperties,
options: EventOptions
)
ampli.eventName(
properties: EventNameProperties,
options: EventOptions
)
The properties
argument passes event properties.
The options
argument allows you to pass to pass Amplitude fields, like price
, quanity
and revenue
.
For example, in the code snippet below, your tracking plan contains an event called songPlayed
. The event is defined with two required properties: songId
and songFavorited
.
The property type for songId
is string, and songFavorited
is a boolean.
The event has an Amplitude field defined: deviceId
. Learn more about Amplitude fields here.
ampli.songPlayed({
songId: 'songId', // string,
songFavorited: true, // boolean
}, {
deviceId: 'a-device-id',
});
ampli.songPlayed({
songId: 'songId', // string,
songFavorited: true, // boolean
}, {
deviceId: 'a-device-id',
});
Ampli also generates a class for each event.
const myEventObject = new SongPlayed({
songId: 'songId', // string,
songFavorited: true, // boolean
});
const myEventObject = new SongPlayed({
songId: 'songId', // string,
songFavorited: true, // boolean
});
Track Event objects using Ampli track
:
ampli.track(new SongPlayed({
songId: 'songId', // string,
songFavorited: true, // boolean
}));
ampli.track(new SongPlayed({
songId: 'songId', // string,
songFavorited: true, // boolean
}));
Flush¶
The Ampli wrapper queues events and sends them on an interval based on the configuration.
Call flush()
to immediately send any pending events.
The flush()
method returns a promise that can be used to ensure all pending events have been sent before continuing.
This can be useful to call prior to application exit.
ampli.flush();
ampli.flush();
Plugin¶
Plugins allow you to extend the Amplitude behavior, for example, modifying event properties (enrichment type) or sending to a third-party APIs (destination type).
First you need to define your plugin. Enrichment Plugin example:
import { Config, EnrichmentPlugin, Event, PluginType } from '"@amplitude/analytics-react-native"';
export class AddEventIdPlugin implements EnrichmentPlugin {
name = 'add-event-id';
type = PluginType.ENRICHMENT as const;
currentId = 100;
/**
* setup() is called on plugin installation
* example: client.add(new AddEventIdPlugin());
*/
setup(config: Config): Promise<undefined> {
this.config = config;
}
/**
* execute() is called on each event instrumented
* example: client.track('New Event');
*/
execute(event: Event): Promise<Event> {
event.event_id = this.currentId++;
return event;
}
}
export class AddEventIdPlugin {
name = 'add-event-id';
currentId = 100;
/**
* setup() is called on plugin installation
* example: client.add(new AddEventIdPlugin());
*/
setup(config) {
this.config = config;
}
/**
* execute() is called on each event instrumented
* example: client.track('New Event');
*/
execute(event) {
event.event_id = this.currentId++;
return event;
}
}
Add your plugin after init Ampli.
ampli.client.add(new AddEventIdPlugin())
ampli.client.add(new AddEventIdPlugin())
Ampli CLI¶
Pull¶
The pull
command downloads the Ampli Wrapper code to your project. Run the pull
command from the project root.
ampli pull
You will be prompted to log in to your workspace and select a source.
➜ ampli pull
Ampli project is not initialized. No existing `ampli.json` configuration found.
? Create a new Ampli project here? Yes
? Organization: Amplitude
? Workspace: My Workspace
? Source: My Source
Learn more about ampli pull
.
Status¶
Verify that events are implemented in your code with the status command:
ampli status [--update]
The output displays status and indicates what events are missing.
➜ ampli status
✘ Verifying event tracking implementation in source code
✔ Song Played (1 location)
✘ Song Stopped Called when a user stops playing a song.
Events Tracked: 1 missed, 2 total
Learn more about ampli status
.
Migrating from Ampli (Legacy) for the @amplitude/react-native
runtime¶
Migrate from Ampli for @amplitude/react-native
to Ampli for @amplitude/analytics-react-native
by following these steps.
-
Update Source runtime.
In the web app open the Sources page and select the React Native Source you want to update. In the modal, change the runtime from
TypeScript (Legacy)
toTypeScript
orJavaScript (Legacy)
toJavaScript
. -
Go to the Implementation page, then select the updated Source for detailed setup and usage instructions.
-
Remove legacy dependencies from your project.
yarn remove @amplitude/react-native
-
Add new dependencies.
yarn add @amplitude/analytics-react-native
-
Pull the latest Ampli Wrapper.
ampli pull
-
Find and replace.
Middleware is no longer support. It has been replaced by a new Plugin architecture. Migrating from Middleware to a Plugin is easy.
-
See more details on your Implementation page in the web app.