Sending Push Notifications Through Firebase | Reactiv Support Center

Sending Push Notifications Through Firebase

Everything you need to get started with Firebase Messaging

Setting up a Push Notification Campaign

Note: Steps 1-3 should be complete if you have already integrated Firebase with Reactiv. See Setting Up Firebase & GA4 With Reactiv

Step 1: Set Up Firebase Project

1. Go to the Firebase Console.

2. Click Add Project and follow the setup steps.

3. Once created, go to Project Settings > Cloud Messaging to access your Firebase server key and sender ID.

Go to the Firebase Console.

Click Add Project and follow the setup steps.

Once created, go to Project Settings > Cloud Messaging to access your Firebase server key and sender ID.

Step 2: Integrate Firebase SDK into Your App

1. iOS: Add Firebase SDK via CocoaPods or Swift Package Manager.

2. Android: Add Firebase to your Android project by adding the google-services.json file to your app directory and updating your build.gradle files.

iOS: Add Firebase SDK via CocoaPods or Swift Package Manager.

Android: Add Firebase to your Android project by adding the google-services.json file to your app directory and updating your build.gradle files.

Step 3: Set Up FCM in Your App Code

Add the necessary code to handle FCM tokens and receive notifications.

1. iOS:

   • Request user permission to show notifications.

   • Implement UNUserNotificationCenterDelegate to handle notifications.

2. Android:

   • Initialize Firebase and set up FCM in your Application class.

   • Handle notifications in FirebaseMessagingService.

iOS:

Request user permission to show notifications.

Implement UNUserNotificationCenterDelegate to handle notifications.

Android:

Initialize Firebase and set up FCM in your Application class.

Handle notifications in FirebaseMessagingService.

Step 4: Enable Cloud Messaging API

1. In the Firebase Console, go to Project Settings > Cloud Messaging.

2. Enable the Cloud Messaging API for your project.

In the Firebase Console, go to Project Settings > Cloud Messaging.

Enable the Cloud Messaging API for your project.

Step 5: Send a Notification from Firebase Console

1. Go to Run > Messaging in Firebase Console.

   1. 

2. Click on New Campaign > Notifications. (Note that In-App Messaging is not currently supported)

   1. 

3. Enter your Notification title and Notification text.

4. Optionally, you can add in a Notification Image aswell. Keep in mind that this will appear quite small on a users device

   1. Optimal Size: Image should be at least 720px (width) by 240px (height) with an aspect ratio of 3:1. Max Size of 500KB

5. Once you are happy with the Notification content, click Next

6. Under Target, select either a specific user segment or app instance.

   • Segment: Target specific user properties or audiences.

   • App instance: Target individual device tokens (e.g., for testing).

Go to Run > Messaging in Firebase Console.

Click on New Campaign > Notifications. (Note that In-App Messaging is not currently supported)

Enter your Notification title and Notification text.

Optionally, you can add in a Notification Image aswell. Keep in mind that this will appear quite small on a users device

Optimal Size: Image should be at least 720px (width) by 240px (height) with an aspect ratio of 3:1. Max Size of 500KB

Once you are happy with the Notification content, click Next

Under Target, select either a specific user segment or app instance.

Segment: Target specific user properties or audiences.

App instance: Target individual device tokens (e.g., for testing).

⭐️ Reactiv Tip: To simply target all app users, match the below criteria.

Step 6: Configure Notification Options

• Set the Delivery Time (e.g., immediate, or scheduled).

• Define Conversion Events if you want to track specific actions after users open the notification.

Set the Delivery Time (e.g., immediate, or scheduled).

Define Conversion Events if you want to track specific actions after users open the notification.

Deep Link Configuration:

To make your notification navigate to a specific product or collection when opened, add one of the following configurations under Custom Data:

Option 1: URL-Based Deep Link

• Key: url

• Value: The full URL of the product or collection you want to link to

• Example: https://yourstore.com/products/summer-dress

Key: url

Value: The full URL of the product or collection you want to link to

Example: https://yourstore.com/products/summer-dress

Option 2: Structured Deep Link

• Key: type
  ​Value: The type of resource (e.g., product, collection)

• Key: value
  ​Value: The handle or unique identifier of the resource

Key: type
​Value: The type of resource (e.g., product, collection)

Key: value
​Value: The handle or unique identifier of the resource

Example:
For a product deep link, use:
​type: product
​value: summer-dress-blue
​

Step 7: Preview and Send Notification

1. Use the Preview feature to see how the notification will look.

2. Click Send or Schedule (if you specified a scheduled time).

Use the Preview feature to see how the notification will look.

Click Send or Schedule (if you specified a scheduled time).

Step 8: Monitor Notification Analytics

1. Go to Analytics > Events in the Firebase Console to track how users engage with your notification.

2. Use Cloud Messaging > Reports to view metrics on delivery, opens, and conversions.

Go to Analytics > Events in the Firebase Console to track how users engage with your notification.

Use Cloud Messaging > Reports to view metrics on delivery, opens, and conversions.

Events Tracked

This is a comprehensive list of all events that are tracked and sent to Firebase. These can be used for analytics purposes, creating user segments

ReactivEventName.ScreenViewedEvent → 'screen_view'

ReactivEventName.CollectionViewedEvent → 'view_item_list'

ReactivEventName.ShowProductEvent → 'show_item'

ReactivEventName.ProductViewedEvent → 'view_item'

ReactivEventName.SelectProductEvent → 'select_item'

ReactivEventName.CartViewEvent → 'view_cart'

ReactivEventName.CartItemAddedEvent → 'add_to_cart'

ReactivEventName.CartDiscountCodeAddedEvent → 'view_promotion'

ReactivEventName.CheckoutStartedEvent → 'begin_checkout'

ReactivEventName.CheckoutSuccessEvent → 'purchase'

ReactivEventName.CheckoutFailedEvent → 'checkout_failed'

ReactivEventName.SearchAppliedEvent → 'perform_search'

ReactivEventName.SearchFilterAppliedEvent → 'perform_filter'

ReactivEventName.SearchSortAppliedEvent → 'perform_sort'

ReactivEventName.WishListItemAddedEvent → 'add_to_wishlist'

ReactivEventName.WishListItemRemovedEvent → 'remove_from_wishlist' (NOT AN OFFICIAL EVENT)

ReactivEventName.CartItemUpdatedEvent → 'update_cart_item'

ReactivEventName.CartItemRemovedEvent → 'remove_from_cart'

ReactivEventName.CartDiscountCodeSeenEvent → 'viewed_promotion' (NOT AN OFFICIAL EVENT)

ReactivEventName.CartDiscountCodeRemovedEvent → 'remove_promotion' (NOT AN OFFICIAL EVENT)

ReactivEventName.AccountSignUpSuccessEvent → 'sign_up'

ReactivEventName.AccountSignUpFailedEvent → 'sign_up_failed'

ReactivEventName.AccountSignInSuccessEvent → 'login'

ReactivEventName.AccountSignInFailedEvent → 'login_failed'

ReactivEventName.AccountForgotPasswordEvent → 'forgot_password' (NOT AN OFFICIAL EVENT)

ReactivEventName.AccountRecoveredPasswordEvent → 'recover_password' (NOT AN OFFICIAL EVENT)

ReactivEventName.AccountAddressAddedEvent → 'add_address'

ReactivEventName.AccountAddressUpdatedEvent → 'update_address'

ReactivEventName.AccountAddressRemovedEvent → 'remove_address'

ReactivEventName.ExternalLinkClickedEvent → 'click_external_link' (NOT AN OFFICIAL EVENT)

ReactivEventName.WebpageViewedEvent → 'view_webpage'

ReactivEventName.SubscribedToMarketingEvent → 'subscribe_marketing' (NOT AN OFFICIAL EVENT)

ReactivEventName.QRCodeScannedEvent → 'scan_qr_code'

ReactivEventName.PushPermissionAcceptedEvent → 'mobile_app_accept_push' (NOT AN OFFICIAL EVENT)

ReactivEventName.PushPermissionDeclinedEvent → 'mobile_app_decline_push' (NOT AN OFFICIAL EVENT)

ReactivEventName.LocationPermissionAcceptedEvent → 'mobile_app_accept_location' (NOT AN OFFICIAL EVENT)

ReactivEventName.LocationPermissionDeclinedEvent → 'mobile_app_decline_location' (NOT AN OFFICIAL EVENT)

ReactivEventName.AdsTrackingPermissionAcceptedEvent → 'mobile_app_accept_ads_tracking' (NOT AN OFFICIAL EVENT)

ReactivEventName.AdsTrackingPermissionDeclinedEvent → 'mobile_app_decline_ads_tracking' (NOT AN OFFICIAL EVENT)

ReactivEventName.ApplicationInstalledEvent → 'mobile_app_install' (NOT AN OFFICIAL EVENT)

ReactivEventName.NotificationReceivedEvent → 'notification_received'

ReactivEventName.NotificationClickedEvent → 'notification_opened'

(NOT AN OFFICIAL EVENT) = namespace reserved event with google