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"

- 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"

2. Click "+" button and select "Web Push-Notification"

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

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

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

Fill in the required information

Click "Save change" to Save the journey

3. Click Activate to activate the journey

PreviousHow to define zone in website for improve web personalize performance NextHow to Send SMS using "Telerivet SMS" in CDP 365

Last updated 3 years ago

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"

- Add firebase to your web app

- Click "Register app"

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

- Firebase config:

- 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

- Add file in source firebase-messaging-sw.js (located in public/global folder)

- firebaseConfig is the data of firebase config in section 2

II. Create destination "Firebase Cloud Messaging"

1. Access the "MARKETING HUB" app and go to the "Destinations" menu

2. Click "+" button and select "Web Push-Notification"

3. Select "Destination catalog": "Firebase Cloud Messaging"

- Get "To Client Tokens"

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. Access "MARKETING HUB" app and go to "Customer Journey" menu

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

3. Click Activate to activate the journey

hashtagI. Create a Firebase project

hashtag1. Create a project

hashtag- Log in Firebasearrow-up-right and create a new project

hashtag- Enter the name of project and click "Continue"

hashtag- Accept the privacy and create project

hashtag2. Build "Cloud Messaging"

hashtag- Click dropdown "Build" and select "Cloud Messaging"

hashtag- Add firebase to your web app

hashtag- Click "Register app"

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

hashtag- Firebase config:

hashtag- Click settings icon and select "Project settings"

hashtag- Click "Cloud Messaging"

hashtag- Enable Cloud Messaging API

hashtag- After that, we have the data of Server Key

hashtag3. Add script to source code of website

hashtag- Copy and paste these scripts into the bottom of your <body> tag

hashtag- Add file in source firebase-messaging-sw.js (located in public/global folder)

hashtag- *firebaseConfig* is the data of firebase config in section 2

hashtagII. Create destination "Firebase Cloud Messaging"

hashtag1. Access the "MARKETING HUB" app and go to the "Destinations" menu

hashtag2. Click "+" button and select "Web Push-Notification"

hashtag3. Select "Destination catalog": "Firebase Cloud Messaging"

hashtag- Get "To Client Tokens"

hashtagNote: After client finish creating "Firebase Cloud Messaging", Antsomi team will collect the data and update "To Client Tokens" attribute in CDP system.

hashtagIII. Push "Firebase Cloud Messaging" notification via Journey

hashtag1. Access "MARKETING HUB" app and go to "Customer Journey" menu

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

hashtag3. Click Activate to activate the journey

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:

- 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

- Add file in source firebase-messaging-sw.js (located in public/global folder)

- firebaseConfig is the data of firebase config in section 2

II. Create destination "Firebase Cloud Messaging"

1. Access the "MARKETING HUB" app and go to the "Destinations" menu

2. Click "+" button and select "Web Push-Notification"

3. Select "Destination catalog": "Firebase Cloud Messaging"

- Get "To Client Tokens"

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. Access "MARKETING HUB" app and go to "Customer Journey" menu

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

3. Click Activate to activate the journey