Skip to content

Commit be0d11e

Browse files
committed
feat: add branch metrics to react native dest. plugin catalog
1 parent f7c97b5 commit be0d11e

File tree

3 files changed

+89
-8
lines changed

3 files changed

+89
-8
lines changed

.tool-versions

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
ruby 2.7.8

src/connections/sources/catalog/libraries/mobile/react-native/destination-plugins/branch-react-native.md

Lines changed: 82 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,89 @@ title: Analytics React Native Branch Plugin
33
strat: react-native
44
---
55

6-
[Braze](https://www.braze.com/), formerly Appboy, is an engagement platform that empowers growth by helping marketing teams to build customer loyalty through mobile, omni-channel customer experiences.
7-
8-
Braze’s destination plugin code is open source and available on GitHub. You can view it [here.](https://github.com/braze-inc/analytics-swift-braze). This destination plugin is maintained by Braze. For any issues with the destination plugin code, please reach out to Braze's support.
6+
[Branch](https://branch.io/?utm_source=segmentio&utm_medium=docs&utm_campaign=partners) empowers you to increase mobile revenue with enterprise-grade links built to acquire, engage, and measure across all devices, channels, and platforms. An industry-leading mobile measurement and deep linking platform, trusted by the most top ranking apps to increase efficiency and revenue.
97

108
## Getting Started
119

10+
1. From the Segment web app, click **Catalog**.
11+
2. Search for "Branch Metrics" in the Catalog, select it, and choose which of your sources to connect the destination to.
12+
3. On Branch side you will need to [sign up for a free Branch account](http://branch.io/signup?bmp=segment) and follow the steps on their Dashboard to complete set up.
13+
4. Copy your `Branch Key` from the Settings page of your [Branch dashboard](https://dashboard.branch.io/#/settings).
14+
5. Paste the Branch Key in the destination settings and click **Save**.
15+
## Installation
16+
17+
You need to install the `@segment/analytics-react-native-plugin-branch` and the `react-native-branch` dependency.
18+
19+
Using NPM:
20+
```bash
21+
npm install --save @segment/analytics-react-native-plugin-branch react-native-branch
22+
```
23+
24+
Using Yarn:
25+
```bash
26+
yarn add @segment/analytics-react-native-plugin-branch react-native-branch
27+
```
28+
29+
Run `pod install` after the installation to autolink the Branch SDK.
30+
31+
See [`Branch React Native SDK`](https://github.com/BranchMetrics/react-native-branch-deep-linking-attribution) for more details of this dependency.
32+
## Usage
33+
34+
Follow the [instructions for adding plugins](https://github.com/segmentio/analytics-react-native#adding-plugins) on the main Analytics client:
35+
36+
In your code where you initialize the analytics client call the `.add(plugin)` method with an `BranchPlugin` instance:
37+
38+
```ts
39+
import { createClient } from '@segment/analytics-react-native';
40+
41+
import { BranchPlugin } from '@segment/analytics-react-native-plugin-branch';
42+
43+
const segmentClient = createClient({
44+
writeKey: 'SEGMENT_KEY'
45+
});
46+
47+
segmentClient.add({ plugin: new BranchPlugin() });
48+
```
49+
50+
## Identify
51+
52+
If you're not familiar with the Segment Specs, take a look to understand what the [Identify method](/docs/connections/spec/identify/) does. An example call would look like:
53+
54+
```ts
55+
const { identify } = useAnalytics();
56+
57+
identify('user-123', {
58+
username: 'MisterWhiskers',
59+
60+
plan: 'premium',
61+
});
62+
```
63+
64+
When you call `.identify('userId')`, Segment uses Branch's `setIdentity(userId)` method to send the `userId` that was passed in.
65+
66+
## Track
67+
68+
If you're not familiar with the Segment Specs, take a look to understand what the [Track method](/docs/connections/spec/track/) does. An example call would look like:
69+
70+
```ts
71+
const { track } = useAnalytics();
72+
73+
track('View Product', {
74+
productId: 123,
75+
productName: 'Striped trousers',
76+
});
77+
```
78+
79+
When you call `track`, Segment translates it automatically and sends the event to Branch's `logEvent()` endpoint.
80+
81+
## Screen
82+
If you're not familiar with the Segment Specs, take a look to understand what the [Page method](/docs/connections/spec/page/) does. An example call would look like:
83+
84+
```ts
85+
const { screen } = useAnalytics();
1286

13-
1. From the Segment web app, click **Catalog**.
14-
2. Search for "Braze" in the Catalog, select it, and choose which of your sources to connect the destination to.
15-
3. In the Destination Settings, add the **API Key**, found in the Braze Dashboard in *App Settings > Manage App Group*.
16-
4. Set up a new App Group REST API Key in the Braze Dashboard in *App Settings > Developer Console > API Settings*. For more information, see [Creating and Managing REST API Keys](https://www.braze.com/docs/api/basics/#creating-and-managing-rest-api-keys) in the Braze documentation.
17-
- Select the `users.track` endpoint in the **User Data** section.
87+
screen('ScreenName', {
88+
productSlug: 'example-product-123',
89+
});
90+
```
91+
Segment sends Screen Events to Branch's `logEvent()` endpoint.

src/connections/sources/catalog/libraries/mobile/react-native/destination-plugins/index.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ plugins:
2020
url: https://d3hotuclm6if1r.cloudfront.net/logos/appsflyer-default.svg
2121
mark:
2222
url: https://cdn.filepicker.io/api/file/AnJUEBvxRouLLOvIeQuK
23+
- name: Branch
24+
url: connections/sources/catalog/libraries/mobile/react-native/destination-plugins/branch-react-native/
25+
logo:
26+
url: https://cdn.filepicker.io/api/file/Svc4UAgORe668HOiiyjd
27+
mark:
28+
url: https://cdn.filepicker.io/api/file/MfCJKP6VRoaLMG7sMY5m
2329
- name: Braze
2430
url: connections/sources/catalog/libraries/mobile/react-native/destination-plugins/braze-react-native/
2531
logo:

0 commit comments

Comments
 (0)