# How to push notification "Firebase Cloud Messaging" for Shopify

## I. Create a Firebase project

### 1. Create a project

#### - Log in [Firebase](https://console.firebase.google.com/) and create a new project

<figure><img src="/files/uLm1OOTf4NztAGOzqXmU" alt=""><figcaption><p>Add new project</p></figcaption></figure>

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

<figure><img src="/files/pLmeyrtSutv8sC1PmGAV" alt=""><figcaption><p>Enter Name of project</p></figcaption></figure>

#### - Accept the privacy and create project

<figure><img src="/files/g1DTO8WvSDPTS0kNKA8b" alt=""><figcaption><p>Create project</p></figcaption></figure>

### 2. Build "Cloud Messaging"

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

<figure><img src="/files/T4EI4nW605PtWF7pZeIY" alt=""><figcaption><p>Cloud Messaging</p></figcaption></figure>

#### - Add firebase to your web app

<figure><img src="/files/nd4A12JM6zZwZiHfOruX" alt=""><figcaption><p>Add firebase to web app</p></figcaption></figure>

#### - Click "Register app"

<figure><img src="/files/gNiGARbQN5nAtcHXv88O" alt=""><figcaption><p>Register app</p></figcaption></figure>

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

<figure><img src="/files/6WverovaAMvDqNQYGcyj" alt=""><figcaption><p>Continue to Console</p></figcaption></figure>

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

<figure><img src="/files/kSvva7a62aZHl3M5rPKM" alt=""><figcaption><p>Project settings</p></figcaption></figure>

#### - Click "Cloud Messaging"

<figure><img src="/files/0xqozdBeaWhYfqxwLY4u" alt=""><figcaption><p>Cloud Messaging settings</p></figcaption></figure>

#### - Enable Cloud Messaging API

<figure><img src="/files/mzHMvLyGHayAONoHihQ1" alt=""><figcaption><p>Manage API</p></figcaption></figure>

<figure><img src="/files/A8cIcG7INeetBm7FnlbV" alt=""><figcaption><p>Click Enable</p></figcaption></figure>

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

<figure><img src="/files/gRN247VS1z9Yw89kJD8p" alt=""><figcaption><p>Server Key</p></figcaption></figure>

### 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/8.10.0/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/8.10.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"></script>
<script>
  var _cdpGetCookie = function (cookieName) {
    var cookiePattern = new RegExp("(^|;)[ ]*" + cookieName + "=([^;]*)");
    cookieMatch = cookiePattern.exec(document.cookie);
    return cookieMatch ? window.decodeURIComponent(cookieMatch[2]) : 0;
  };
​
  var _cdpSetCookie = function (cookieName, value, msToExpire, path, domain, secure) {
    var expiryDate;
    if (msToExpire != undefined) {
      expiryDate = new Date();
      expiryDate.setTime(expiryDate.getTime() + msToExpire);
    }
    var valueData = value + "";
    if (isNaN(value)) {
      valueData = window.encodeURIComponent(value);
    }
    var cookieInfo =
      cookieName +
      "=" +
      valueData +
      (msToExpire ? ";expires=" + expiryDate.toGMTString() : "") +
      ";path=" +
      (path || "/") +
      (domain ? ";domain=" + domain : "") +
      (secure ? ";secure" : "");
    document.cookie = cookieInfo;
  };
​
  var _cdpGetLeadTime = function () {
    var d = new Date();
    var m = d.getMonth() + 1;
    if (parseInt(m) < 10) {
      m = "0" + m;
    }
​
    var day = d.getDate();
    if (parseInt(day) < 10) {
      day = "0" + day;
    }
​
    var hour = d.getHours();
    if (parseInt(hour) < 10) {
      hour = "0" + hour;
    }
​
    var min = d.getMinutes();
    if (parseInt(min) < 10) {
      min = "0" + min;
    }
​
    var sec = d.getSeconds();
    if (parseInt(sec) < 10) {
      sec = "0" + sec;
    }
​
    var leadTime = d.getFullYear() + "-" + m + "-" + day + " " + hour + ":" + min + ":" + sec;
​
    return leadTime;
  };
​
  var _cdpTrackFirebaseDetail = function (clientToken) {
    console.log("CDP firebase clientToken : " + clientToken);
    var props = {
      extra: {
        identify_event: "firebase_subscribed",
        uid_firebase: clientToken,
        firebase_time: _cdpGetLeadTime(),
      },
    };
​
    var expireTime = 60 * 60 * 1000; // 60p
    var cookieName = "_uid_firebase";
​
    var cookieToken = _cdpGetCookie(cookieName);
    if (!cookieToken) {
      if (typeof web_event.track == "function") {
        web_event.track("firebase", "subscribed", props);
      } else {
        web_event.queue.push(["track", "firebase", "subscribed", props]);
      }
    } else if (cookieToken !== clientToken) {
      props.extra.identify_event = "firebase_refresh";
​
      if (typeof web_event.track == "function") {
        web_event.track("firebase", "subscribed", props);
      } else {
        web_event.queue.push(["track", "firebase", "subscribed", props]);
      }
    }
​
    _cdpSetCookie(cookieName, clientToken, expireTime, "/", "", 0);
  };
​
  // 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();
  let enableForegroundNotification = true;
​
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", () => {
      navigator.serviceWorker
        .register(
          "/apps/firebase-messaging-sw?apiKey=" +
            firebaseConfig.apiKey +
            "&authDomain=" +
            firebaseConfig.authDomain +
            "&projectId=" +
            firebaseConfig.projectId +
            "&storageBucket=" +
            firebaseConfig.storageBucket +
            "&messagingSenderId=" +
            firebaseConfig.messagingSenderId +
            "&appId=" +
            firebaseConfig.appId +
            "&measurementId=" +
            firebaseConfig.measurementId
        )
        .then((register) => {
          messaging.useServiceWorker(register);
          messaging.requestPermission().then(() => {
            messaging.getToken().then((fcmToken) => {
              _cdpTrackFirebaseDetail(fcmToken);
​
              messaging.onMessage((payload) => {
                console.log("onMessage event fired", payload);
                if (enableForegroundNotification) {
                  console.log(payload);
                  let notification = payload.notification;
                  notification.data = {
                    url: notification.click_action,
                  };
                  navigator.serviceWorker.getRegistrations().then((registration) => {
                    console.log("$$$$,", notification);
                    registration[0].showNotification(notification.title, notification);
                  });
                }
              });
            });
          });
        });
    });
  }
</script>
```

#### - \*firebaseConfig\* is the data of [firebase config](#firebase-config) in section 2

#### - Install custom app (Contact us before taking this step)

* At this step, we need you to provide the link of your domain website in Shopify&#x20;

<figure><img src="/files/revDDrtrGoo62TBBdsmc" alt=""><figcaption></figcaption></figure>

* Copy and send it to us then we will give you a link to install a custom app&#x20;
* We need to install an app, so please contact us before you install the app.
* Example link to install app: <https://demo.myshopify.com/admin/oauth/install_custom_app?client_id=******&signature=*******%3D--3f7929dda8***2972bb59>
* Click the link then press Install app

<figure><img src="/files/gokas0rGSwLpf5AsuMMx" alt=""><figcaption></figcaption></figure>

#### - We have done with the set up on your website. Next, we will continue with set up in CDP

## II. Create destination "Firebase Cloud Messaging"

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

<figure><img src="/files/VSVBQ8WgauyUBUiYRIYA" alt=""><figcaption><p>Destination</p></figcaption></figure>

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

<figure><img src="/files/pfAjoYnttLeiuFR2qZkY" alt=""><figcaption><p>Web Push-Notification</p></figcaption></figure>

### 3. Select "Destination catalog": "Firebase Cloud Messaging"&#x20;

<figure><img src="/files/JwQHALt8ZeMDcHHoWmZ1" alt=""><figcaption><p>Firebase Cloud Messaging Destination #1</p></figcaption></figure>

&#x20;

<figure><img src="/files/1SdAxH2jKDt3hd248dFA" alt=""><figcaption><p>Firebase Cloud Messaging Destination #2</p></figcaption></figure>

* **Server Token**: we can copy server token as instruction in [previous section](#after-that-we-have-the-data-of-server-key)

#### - Get "To Client Tokens"

* Visit the website, press F12 and go to Console to get "To Client Tokens"

<figure><img src="/files/Hao5CUNjH24XUso2Sl7Y" alt=""><figcaption><p>To Client Tokens</p></figcaption></figure>

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

<figure><img src="/files/MlpEgSPP1xfn0WXxkc7k" alt=""><figcaption><p>Customer Journeys</p></figcaption></figure>

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

<figure><img src="/files/j5Z9R8jsTEk5MkF9bOaH" alt=""><figcaption><p>Web Push-Notification &#x26; Journey Orchestration</p></figcaption></figure>

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

<figure><img src="/files/VZY9VzTT1x1FehpUPfGr" alt=""><figcaption><p>Add destination "Firebase Cloud Messaging"</p></figcaption></figure>

* Fill in the required information

<figure><img src="/files/4hPeDwqy2wdpwjGnxPCM" alt=""><figcaption><p>Campaign setting</p></figcaption></figure>

<figure><img src="/files/JBPSdC7Z0Dgp2tC430Q8" alt=""><figcaption><p>Variant setting</p></figcaption></figure>

* Click "Save change" to Save the journey

### 3. Click Activate to activate the journey

<figure><img src="/files/JGb5F0xXxAxRrEdyr2vz" alt=""><figcaption><p>Activate journey</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.antsomi.com/cdp-365-user-guide/quick-start-guide/how-to-push-notification-firebase-cloud-messaging-for-shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
