-
Notifications
You must be signed in to change notification settings - Fork 112
Docs for the push activity tracking #984
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
{ | ||
"icon": "Smartphone", | ||
"pages": ["adding-push", "..."] | ||
"pages": ["adding-push", "...", "push-activity-tracking"] | ||
} |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,152 @@ | ||||||
--- | ||||||
pageTitle: 'Push Notification Activity Tracking' | ||||||
title: 'Activity Tracking' | ||||||
description: 'Learn how to manually forward push notification events from your application to Novu for unified activity tracking.' | ||||||
--- | ||||||
|
||||||
Push notification providers typically do not offer native webhhoks support that can be used for activity tracking. To enable activity tracking for Push channels notifications, Novu supports a manual integration approach for push notifications. | ||||||
|
||||||
Where your application captures and forwards push notification events to the Novu. Once received, Novu processes and displays these events alongside other channels for a unified tracking experience. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The first sentence in this paragraph is incomplete. Is it supposed to be a continuation from the previous paragraph? |
||||||
|
||||||
## How it works | ||||||
|
||||||
The process involves four-step data flow from your subscriber's device to Novu's servers: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
1. **Client application listens:** Your application listens for push notification interactions (e.g., the user opening a notification). | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do not use e.g. or i.e. Also, the colon should be outside the bold formatting. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
2. **Event sent to your backend:** When an event occurs, your app sends a payload containing the event details to an endpoint on your own server. | ||||||
3. **Backend forwards to Novu:** Your server receives this data and uses the Novu SDK to securely forward the event to Novu's API. | ||||||
4. **Event appears in Novu:** Novu processes the event and displays it in the **Activity Feed**, alongside events from your other channels. | ||||||
Comment on lines
+7
to
+18
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix typos and fluent phrasing in the introduction. Please correct: “webhhoks” → “webhooks,” drop the extra “the” before “Novu,” and change “four-step data flow” → “a four-step data flow” for readability. 🤖 Prompt for AI Agents
|
||||||
|
||||||
|
||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
## Step 1: Enable push activity tracking in Novu | ||||||
|
||||||
First, you need to enable the feature in your Novu dashboard and retrieve the necessary credentials. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
1. Log in to the Novu dashboard. | ||||||
2. Navigate to the **Integration Store** page and select your push provider. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
3. Enable the **Push Activity Tracking** toggle. | ||||||
 | ||||||
4. Once enabled, your unique **Environment ID** and **Integration ID** will be displayed. Copy both of these; you will need them for your backend code. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
5. Click **Save Changes**. | ||||||
|
||||||
## Step 2: Listen for push events in your app | ||||||
|
||||||
Next, when push notifications are delivered or interacted with, your app needs to capture those events and forward them to your backend. The exact code implementation will depends on the push provider you use. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
The goal is to capture the event and send a JSON payload to your backend. The two most important fields to send are: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This implies there are more than two fields. As a reader, I want to know what they are. |
||||||
- `eventType`: A string describing the event (for example, `opened`, `clicked`). | ||||||
- `eventId`: The unique identifier for the notification, which Novu includes in the push payload as `__nvMessageId`. | ||||||
|
||||||
Comment on lines
+34
to
+39
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Tighten the wording in Step 2. Change “will depends” to “will depend” to keep the prose grammatically correct. 🤖 Prompt for AI Agents
|
||||||
<Tabs items={['Expo', 'FCM', 'APNs', 'OneSignal']}> | ||||||
<Tab value="expo"> | ||||||
```jsx | ||||||
import * as Notifications from 'expo-notifications'; | ||||||
import Constants from 'expo-constants'; | ||||||
import { Platform } from 'react-native'; | ||||||
|
||||||
// Listen for notification interactions | ||||||
Notifications.addNotificationResponseReceivedListener(async (response) => { | ||||||
const eventData = { | ||||||
eventType: "opened", | ||||||
eventId: response.notification.request.content.data?.__nvMessageId, | ||||||
timestamp: new Date().toISOString(), | ||||||
actionIdentifier: response.actionIdentifier, | ||||||
content: { | ||||||
title: response.notification.request.content.title, | ||||||
body: response.notification.request.content.body, | ||||||
data: response.notification.request.content.data, | ||||||
}, | ||||||
// Optional device context | ||||||
deviceId: Constants.sessionId, | ||||||
platform: Platform.OS, | ||||||
}; | ||||||
|
||||||
await fetch("https://your-api.com/api/notifications/events", { | ||||||
method: "POST", | ||||||
headers: { "Content-Type": "application/json" }, | ||||||
body: JSON.stringify(eventData), | ||||||
}); | ||||||
``` | ||||||
</Tab> | ||||||
<Tab value="fcm"> | ||||||
```js | ||||||
import messaging from '@react-native-firebase/messaging'; | ||||||
|
||||||
messaging().onNotificationOpenedApp((remoteMessage) => { | ||||||
const eventData = { | ||||||
eventType: "opened", | ||||||
eventId: remoteMessage.data?.__nvMessageId, | ||||||
timestamp: new Date().toISOString(), | ||||||
content: { | ||||||
title: remoteMessage.notification?.title, | ||||||
body: remoteMessage.notification?.body, | ||||||
}, | ||||||
deviceId: remoteMessage.messageId, | ||||||
platform: 'android', | ||||||
}; | ||||||
|
||||||
fetch("https://your-api.com/api/notifications/events | ||||||
", { | ||||||
method: "POST", | ||||||
headers: { "Content-Type": "application/json" }, | ||||||
body: JSON.stringify(eventData), | ||||||
}); | ||||||
}); | ||||||
``` | ||||||
</Tab> | ||||||
<Tab value="apns">APNs</Tab> | ||||||
<Tab value="onesignal"> | ||||||
```js | ||||||
import OneSignal from 'react-native-onesignal'; | ||||||
|
||||||
OneSignal.setNotificationOpenedHandler((openedEvent) => { | ||||||
const { notification } = openedEvent; | ||||||
|
||||||
const eventData = { | ||||||
eventType: "opened", | ||||||
eventId: notification.additionalData?.__nvMessageId, | ||||||
timestamp: new Date().toISOString(), | ||||||
content: { | ||||||
title: notification.title, | ||||||
body: notification.body, | ||||||
}, | ||||||
deviceId: notification.notificationId, | ||||||
platform: 'ios', | ||||||
}; | ||||||
|
||||||
fetch("https://your-api.com/api/notifications/events", { | ||||||
method: "POST", | ||||||
headers: { "Content-Type": "application/json" }, | ||||||
body: JSON.stringify(eventData), | ||||||
}); | ||||||
}); | ||||||
``` | ||||||
</Tab> | ||||||
</Tabs> | ||||||
|
||||||
## Step 3: Forward events to Novu from your backend | ||||||
|
||||||
Finally, create an endpoint on your backend that receives the event data from your application and uses the Novu SDK to forward it to Novu. | ||||||
|
||||||
```typescript | ||||||
import { Novu } from '@novu/api'; | ||||||
|
||||||
const novuClient = new Novu({ | ||||||
apiKey: process.env.NOVU_API_KEY, | ||||||
}); | ||||||
|
||||||
// Your backend API endpoint that receives events from your mobile app | ||||||
app.post('/api/notifications/events', async (req, res) => { | ||||||
// Forward the event data to Novu | ||||||
const response = await novuClient.activity.track({ | ||||||
environmentId: process.env.NOVU_ENVIRONMENT_ID, | ||||||
integrationId: process.env.NOVU_INTEGRATION_ID, | ||||||
requestBody: req.body, | ||||||
}); | ||||||
|
||||||
res.status(200).json({ success: true, data: response }); | ||||||
}); | ||||||
``` | ||||||
<Callout>Both `Integration ID` and `Environment ID` can be found in the Integration Store under your push provider instance (after enabling Push Activity Tracking).</Callout> | ||||||
|
||||||
Once these steps are completed, your application will begin sending push notification engagement data to Novu, giving you a complete, unified view of your notification performance in the Activity Feed. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 27 words. Break this sentence up. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.