How to push notification "Firebase Cloud Messaging" using CDP 365
I. Create a Firebase project
1. Create a project
- Log in Firebase and create a new project

- Enter the name of project and click "Continue"

- Accept the privacy and create project

2. Build "Cloud Messaging"
- Click dropdown "Build" and select "Cloud Messaging"

- Add firebase to your web app

- Click "Register app"

- Copy "firebaseConfig" and Click "Continue to console"

- Firebase config:
apiKey: "AIzaSyBUJrgxGjFUWld-q_zr_cVzrN9IaB4KfmE",
authDomain: "fir-clound-messaging-ab666.firebaseapp.com",
projectId: "fir-clound-messaging-ab666",
storageBucket: "fir-clound-messaging-ab666.appspot.com",
messagingSenderId: "974234323980",
appId: "1:974234323980:web:03d23bee74ed48eb5c7229",
measurementId: "G-EE955NEBKJ"
- Click settings icon and select "Project settings"

- Click "Cloud Messaging"

- Enable Cloud Messaging API


- After that, we have the data of Server Key

3. Add script to source code of website
- Copy and paste these scripts into the bottom of your <body> tag
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-messaging.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
*firebaseConfig*
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const messaging = firebase.messaging()
navigator.serviceWorker.register('firebase-messaging-sw.js')
.then((register) => {
messaging.requestPermission().then(() => {
messaging.getToken()
.then((fcmToken) => {
console.log(fcmToken)
messaging.onMessage((payload) => {
console.log("onMessage event fired",payload)
})
});
});
})
</script>
- Add file in source firebase-messaging-sw.js (located in public/global folder)
importScripts('https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.16.1/firebase-messaging.js');
var firebaseConfig = {
*firebaseConfig*
};// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
};
return self.registration.showNotification(notificationTitle, notificationOptions);
});
self.addEventListener('notificationclick', event => {
console.log(event)
});
- *firebaseConfig* is the data of firebase config in section 2
II. Create destination "Firebase Cloud Messaging"
1. Hover your mouse over Settings and go to the Channel Integration menu

2. Click + button and select Web Push

3. Select Destination catalog: Firebase Cloud Messaging


Server Token: we can copy server token as instruction in previous section
- Get To Client Tokens
Visit the website, press F12 and go to Console to get To Client Tokens

Copy To Client Tokens and paste to destination setting
Click Save to save destination
Note: After client finish creating Firebase Cloud Messaging, Antsomi team will collect the data and update To Client Tokens attribute in CDP system.
III. Push "Firebase Cloud Messaging" notification via Journey
1. Hover your mouse over Marketing and go to All Channels menu

We have 2 channels that supporting to send Firebase Cloud Messaging. These are Web Push and Orchestration

2. Click + button to Create Journey, add Destination node and select Firebase Cloud Messaging destination


Fill in the required information


Click Save to finish
3. Click Activate to activate the journey

PreviousHow to Send SMS using "Klasik SMS" in CDP 365NextHow to Send email using "Amazon SES" in CDP 365
Last updated
Was this helpful?