Complete guide on sending Push using Firebase Cloud Messaging Console
Tags: firebase, cloud, push, notification
Published: 2019-09-24 09:53:25

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="7429" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="b7b1" class="graf graf--p graf-after--figure">This post is concerned with the usage of Firebase Cloud Messaging console to send various types of push notification. We will also explore all the features of Cloud Messaging console available with Firebase.</p><h4 name="e824" class="graf graf--h4 graf-after--p">Why send Push using Firebase?</h4><p name="6a6e" class="graf graf--p graf-after--h4">If you don’t know much about Firebase&nbsp;… you need to catch up with latest tech news. Firebase is the hot stuff in the market today to create quick mobile app back-ends, with a ton of built-in and ready-to-integrate features.</p><p name="17b0" class="graf graf--p graf-after--p">The most used feature of Firebase is as a back-end. But along with this back-end, some of the other popular features are</p><ul class="postList"><li name="4785" class="graf graf--li graf-after--p">Push notifications</li><li name="320b" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Cloud functions</strong></li><li name="952e" class="graf graf--li graf-after--li">Analytics</li><li name="90e4" class="graf graf--li graf-after--li">Ad-mob</li><li name="f6b2" class="graf graf--li graf-after--li">Crashlytics</li><li name="c424" class="graf graf--li graf-after--li">In-app messages</li><li name="a560" class="graf graf--li graf-after--li">Remote config</li><li name="c5ce" class="graf graf--li graf-after--li">Social Logins</li><li name="432a" class="graf graf--li graf-after--li">…… and more</li></ul><p name="23c6" class="graf graf--p graf-after--li is-selected">One might wonder why to integrate Push notifications in an app. Push notification is the <strong class="markup--strong markup--p-strong">single biggest feature </strong>to keep your users engaged with your app. People are obsessed with notifications. People keep checking their phones regularly so they don’t miss any notification. If your app sends regular (and interesting) push, your users will be happy, and you’ll see much less app uninstalls than you’ll see without push notifications.</p><p name="3ece" class="graf graf--p graf-after--p">There are many <a href="https://thetool.io/2018/top-push-notifications-tools"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">push notification integration services</a> available in the market. But Firebase being a Google product, is essentially THE service to use for reliable push notifications. It is the better version of GCM (Google Cloud messaging) and essentially a default for all kinds of apps.</p><h3 name="501b" class="graf graf--h3 graf-after--p">Firebase Push Messaging Console</h3><p name="7165" class="graf graf--p graf-after--h3">Once push notifications are integrated in an app, sending them can have multiple ways</p><ul class="postList"><li name="6031" class="graf graf--li graf-after--p">Trigger notifications manually</li><li name="74dc" class="graf graf--li graf-after--li">Trigger notifications using a CRON job</li><li name="2313" class="graf graf--li graf-after--li">Trigger notifications using a Cloud function, based on user actions</li></ul><p name="359d" class="graf graf--p graf-after--li">Manual triggering is often used for a large number of apps. This avoids writing complex logic to send notifications to users, and allows easy testing as well. For this purpose, Firebase provides a Messaging console, which you can use to send all kinds of push messages, filter target users, schedule messages and much more.</p><p name="ab81" class="graf graf--p graf-after--p">Let’s have a deeper look at the options available in Firebase Push Messaging console. Needless to say, your app should have Firebase integration to avail these features 😄. We’ll go through following topics</p><ol class="postList"><li name="13de" class="graf graf--li graf-after--p">Notification history</li><li name="1bcb" class="graf graf--li graf-after--li">Notification reports</li><li name="6e36" class="graf graf--li graf-after--li">Creating new Notifications</li><li name="f693" class="graf graf--li graf-after--li">Creating a notification experiment</li></ol><h3 name="4a82" class="graf graf--h3 graf-after--li">1. Notification History</h3><figure tabindex="0" contenteditable="false" name="b621" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 336px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48%;"></div><img class="graf-image" data-image-id="1*4arolKOxXC3py39mpaSWhw.png" data-width="1389" data-height="667" src="https://cdn-images-1.medium.com/max/800/1*4arolKOxXC3py39mpaSWhw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase Cloud messaging console</figcaption></figure><p name="d8e8" class="graf graf--p graf-after--figure">Cloud messaging console is shown in the above screenshot. It contains two tabs&#8202;—&#8202;Notifications and Reports</p><p name="654a" class="graf graf--p graf-after--p">Inside the <strong class="markup--strong markup--p-strong">Notification</strong> tab, you can see a list of previously sent messages, their start/send time, send count and open count. This is very useful information for someone who regularly sends notifications to users.</p><h3 name="caa3" class="graf graf--h3 graf-after--p">2. Notification Reports</h3><p name="c864" class="graf graf--p graf-after--h3">If you regularly send notifications, and in huge quantities, you would like to have a more graphical interface to look at the data. Notification reports provide you just that</p><figure tabindex="0" contenteditable="false" name="5884" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*F52mXkjaZkJlhfmocu0Y1w.png" data-width="1387" data-height="767" src="https://cdn-images-1.medium.com/max/800/1*F52mXkjaZkJlhfmocu0Y1w.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase Notification reports</figcaption></figure><p name="87c9" class="graf graf--p graf-after--figure">You can see a global overview of your messages and how they were received/opened by users. You can also filter these results by date, and export the data as CSV.</p><h4 name="5b4a" class="graf graf--h4 graf-after--p">Filter report&nbsp;data</h4><p name="9b8b" class="graf graf--p graf-after--h4">You can filter report data based on platforms or apps you have in your Firebase project, to get a more clear idea of things</p><figure tabindex="0" contenteditable="false" name="7cc0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 369px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 52.6%;"></div><img class="graf-image" data-image-id="1*FiGnDHY8cRca2ru9qgXY6g.png" data-width="1001" data-height="527" src="https://cdn-images-1.medium.com/max/800/1*FiGnDHY8cRca2ru9qgXY6g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Filter messaging reports with platform or&nbsp;apps</figcaption></figure><h3 name="eda2" class="graf graf--h3 graf-after--figure">3. Create Notifications</h3><p name="d51e" class="graf graf--p graf-after--h3">Clicking <strong class="markup--strong markup--p-strong">New notification</strong> in the Notifications tab, opens up a form where you can compose your notifications.</p><figure tabindex="0" contenteditable="false" name="ff5c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 424px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 60.6%;"></div><img class="graf-image" data-image-id="1*yKQu_y55nymnhNEbeQkk3Q.png" data-width="1440" data-height="873" src="https://cdn-images-1.medium.com/max/800/1*yKQu_y55nymnhNEbeQkk3Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Compose notification form</figcaption></figure><p name="889e" class="graf graf--p graf-after--figure">The compose form has 5 sections, we’ll go through each of them</p><ul class="postList"><li name="8585" class="graf graf--li graf-after--p">Notification</li><li name="4104" class="graf graf--li graf-after--li">Target</li><li name="8ea7" class="graf graf--li graf-after--li">Scheduling</li><li name="7915" class="graf graf--li graf-after--li">Conversion Events</li><li name="3fb6" class="graf graf--li graf-after--li">Additional options</li></ul><h4 name="a19d" class="graf graf--h4 graf-after--li">3A. NOTIFICATION SECTION</h4><figure tabindex="0" contenteditable="false" name="880e" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 302px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 43.2%;"></div><img class="graf-image" data-image-id="1*UkgjAc55oFF7wQMeFXkJCg.png" data-width="987" data-height="426" src="https://cdn-images-1.medium.com/max/800/1*UkgjAc55oFF7wQMeFXkJCg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Notification section in Compose&nbsp;form</figcaption></figure><ul class="postList"><li name="226b" class="graf graf--li graf-after--figure">Notification Title&#8202;—&#8202;This is the title that shows up in the push message in Android devices. iOS does not show this title on push messages</li><li name="35c8" class="graf graf--li graf-after--li">Notification Text&#8202;—&#8202;This is the main body of the message. This is the text content that users see in the push notification.</li></ul><p name="5778" class="graf graf--p graf-after--li">If you send the above notification to your app, it will appear as follows in an Android device</p><figure tabindex="0" contenteditable="false" name="a197" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 400px; max-height: 329px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 82.3%;"></div><img class="graf-image" data-image-id="1*lnP8XQSn1_67eavjvCZ4Wg.png" data-width="400" data-height="329" src="https://cdn-images-1.medium.com/max/800/1*lnP8XQSn1_67eavjvCZ4Wg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Push showing title and&nbsp;message</figcaption></figure><ul class="postList"><li name="fda4" class="graf graf--li graf-after--figure">Notification name&#8202;—&#8202;It is just a dummy name used by Firebase to identify different messages</li></ul><h4 name="2b25" class="graf graf--h4 graf-after--li">Sending test&nbsp;message</h4><p name="3bb7" class="graf graf--p graf-after--h4">Suppose your app has thousands of users, and you made some changes in the notifications which you want to test. In such case, you won’t be sending data to all users for sure. In such a case, it is very handy to test the notifications on a test device.</p><p name="2bcf" class="graf graf--p graf-after--p">Click <strong class="markup--strong markup--p-strong">Send Test Message</strong> in the notification section. You will be presented with the following popup</p><figure tabindex="0" contenteditable="false" name="3c55" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 402px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.49999999999999%;"></div><img class="graf-image" data-image-id="1*-xrc8PfpnHGxhne9cFY1mw.png" data-width="764" data-height="439" src="https://cdn-images-1.medium.com/max/800/1*-xrc8PfpnHGxhne9cFY1mw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enter your device token to send a test&nbsp;push</figcaption></figure><p name="2913" class="graf graf--p graf-after--figure">You need to find out your device’s <strong class="markup--strong markup--p-strong">device_token </strong>and enter that here. Click <strong class="markup--strong markup--p-strong">Send</strong> to send a test push to ONLY your device. So handy, right?</p><h4 name="0eb8" class="graf graf--h4 graf-after--p">3B. TARGET&nbsp;SECTION</h4><p name="3f3a" class="graf graf--p graf-after--h4">There are often cases where you want to send certain notifications to only iOS users, or only Android users, or with some other parameters. Target section is a great way to filter target users who will receive the push.</p><p name="28b3" class="graf graf--p graf-after--p">There are two major ways to filter users here.</p><ol class="postList"><li name="21fb" class="graf graf--li graf-after--p">By user segment</li><li name="65e5" class="graf graf--li graf-after--li">By topic</li></ol><h4 name="ecdd" class="graf graf--h4 graf-after--li">3B. 1. By user&nbsp;segment</h4><p name="c439" class="graf graf--p graf-after--h4">Here you can filter users based on apps, user properties, language, country etc.</p><p name="0eeb" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Filter by App</strong></p><figure tabindex="0" contenteditable="false" name="fb88" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 255px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 36.4%;"></div><img class="graf-image" data-image-id="1*tiEzJ8acJi3Gq9kL0DzheQ.png" data-width="1019" data-height="371" src="https://cdn-images-1.medium.com/max/800/1*tiEzJ8acJi3Gq9kL0DzheQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Filter users by&nbsp;app</figcaption></figure><p name="ce30" class="graf graf--p graf-after--figure">You can select which app users should receive the notifications. To add both iOS and Android apps at once (let’s say), you can click <strong class="markup--strong markup--p-strong">Target another app </strong>and add other apps to the target.</p><p name="00ca" class="graf graf--p graf-after--p">Once you have selected the app, you can hit the “<strong class="markup--strong markup--p-strong">and</strong>” button on the right. You get a dropdown to select the next criterion from.</p><figure tabindex="0" contenteditable="false" name="1f49" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 352px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50.3%;"></div><img class="graf-image" data-image-id="1*V_1ZRSdaHBNX2MpdlsrSaw.png" data-width="1053" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*V_1ZRSdaHBNX2MpdlsrSaw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">More filtering criteria for&nbsp;targets</figcaption></figure><p name="f325" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Filter by Version</strong></p><p name="03cd" class="graf graf--p graf-after--p">You can filter targets by the version of the app you are targeting. Essentially you can send different notifications to different versions. This is useful when you want old app users to upgrade to new versions. These versions are captured by Firebase automatically.</p><figure tabindex="0" contenteditable="false" name="d299" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 327px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.7%;"></div><img class="graf-image" data-image-id="1*UZPxiCUvCsQJzWapCwucSA.png" data-width="1026" data-height="479" src="https://cdn-images-1.medium.com/max/800/1*UZPxiCUvCsQJzWapCwucSA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Filter by app&nbsp;version</figcaption></figure><p name="40f7" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Filter by language</strong></p><p name="4927" class="graf graf--p graf-after--p">You can filter your target users by language as well. The list of language is automatically created by Firebase based on the user demographic (based on user’s default region language)</p><figure tabindex="0" contenteditable="false" name="5a22" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 342px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.8%;"></div><img class="graf-image" data-image-id="1*ZHkh2ZshVlTAPhl4iVETbQ.png" data-width="1018" data-height="497" src="https://cdn-images-1.medium.com/max/800/1*ZHkh2ZshVlTAPhl4iVETbQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Filter your target by&nbsp;language</figcaption></figure><p name="db48" class="graf graf--p graf-after--figure">You can see that Firebase gives you an approximate idea of how many users per language you have. Also, you can see the final number of users who will receive the notification in the highlighted blue box.</p><p name="bf4a" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Filter by Country</strong></p><figure tabindex="0" contenteditable="false" name="72e4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 345px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.3%;"></div><img class="graf-image" data-image-id="1*K8DnFtvZHvtMcpSK_JA1wg.png" data-width="1006" data-height="496" src="https://cdn-images-1.medium.com/max/800/1*K8DnFtvZHvtMcpSK_JA1wg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Filter targets by&nbsp;Country</figcaption></figure><p name="c743" class="graf graf--p graf-after--figure">Similar to language, you can filter your target users by country as well. The list of countries is automatically created by Firebase based on the user demographic. Again, Firebase gives you an approximate idea of how many users exist per option.</p><p name="7a68" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Filter by User Properties</strong></p><p name="8a3b" class="graf graf--p graf-after--p">User properties are an intelligent way to provide custom properties in the filtering process. You can provide as many user properties as you want inside your app’s code.</p><p name="d847" class="graf graf--p graf-after--p">E.g. If a user buys a certain product, you can assign a property <code class="markup--code markup--p-code">productbought= product_name</code> to the user. Then at the time of sending push, you can filter all such users to create a product-specific notification for them</p><figure tabindex="0" contenteditable="false" name="7731" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 444px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.4%;"></div><img class="graf-image" data-image-id="1*k0rhcG-bAvS8cAYmGVJaPQ.png" data-width="999" data-height="633" src="https://cdn-images-1.medium.com/max/800/1*k0rhcG-bAvS8cAYmGVJaPQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Filter by User Properties</figcaption></figure><p name="8755" class="graf graf--p graf-after--figure">Some meaningful user properties can be</p><ul class="postList"><li name="6e8d" class="graf graf--li graf-after--p">isLoggedIn</li><li name="b901" class="graf graf--li graf-after--li">isRegistered</li><li name="8da4" class="graf graf--li graf-after--li">isPremiumUser</li><li name="772d" class="graf graf--li graf-after--li">isFreeUser</li><li name="cf8a" class="graf graf--li graf-after--li">isOldUser</li><li name="9899" class="graf graf--li graf-after--li">isReferredUser&nbsp;…. and so on</li></ul><p name="07ae" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Filter by Last App Engagement</strong></p><p name="43d8" class="graf graf--p graf-after--p">It is often very useful to send push notifications to users who have not used your app for quite some time. In such a case, you don’t need to create a separate userProperty. Firebase gives you an option to filter users by <strong class="markup--strong markup--p-strong">Last App Engagement</strong></p><figure tabindex="0" contenteditable="false" name="a7bc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 275px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 39.300000000000004%;"></div><img class="graf-image" data-image-id="1*n_bgpxof9nL9lrK_r5wWig.png" data-width="981" data-height="386" src="https://cdn-images-1.medium.com/max/800/1*n_bgpxof9nL9lrK_r5wWig.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Filter users by last app engagement&#8202;—&#8202;wake up your&nbsp;users!</figcaption></figure><p name="08d6" class="graf graf--p graf-after--figure">Similar to <strong class="markup--strong markup--p-strong">Last App Engagement, </strong>you also get a choice to filter users by <strong class="markup--strong markup--p-strong">First Open</strong> property, which is pretty much self-explanatory.</p><p name="bd5b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Note</strong>- You can combine more than one filtering criteria to arrive at the exact target users you are aiming for a particular notification.</p><h4 name="1ecf" class="graf graf--h4 graf-after--p">3B. 2. By&nbsp;topic</h4><p name="90a2" class="graf graf--p graf-after--h4">In your app, you can subscribe your users automatically to certain channels based on their activity, or give them a choice to subscribe to certain topics. When sending push, you can simply select these topics and send the notifications. These topics work across multiple apps, so you don’t have to select multiple times.</p><p name="ff8a" class="graf graf--p graf-after--p">E.g. If you are a news app, you might give your users a choice to subscribe to tech news, or fashion news, or political news&#8202;—&#8202;each attributed to a different “topic”. Depending on who subscribes to what, they will get relevant notifications, whether they are on iOS or Android</p><figure tabindex="0" contenteditable="false" name="1147" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 205px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 29.299999999999997%;"></div><img class="graf-image" data-image-id="1*_ORaWNHIggB8cGyEmsfXqA.png" data-width="996" data-height="292" src="https://cdn-images-1.medium.com/max/800/1*_ORaWNHIggB8cGyEmsfXqA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Filter your push simply by&nbsp;topics</figcaption></figure><p name="88fc" class="graf graf--p graf-after--figure">Note that there is up to one day delay between new topic creation and when it becomes available as a target.</p><h4 name="ef58" class="graf graf--h4 graf-after--p">3C. SCHEDULING SECTION</h4><p name="08c2" class="graf graf--p graf-after--h4">It is important to send your notifications at the right time, when they can engage your users the most e.g. on weekends, in the evening when they come back from work etc.</p><p name="1ec1" class="graf graf--p graf-after--p">Firebase provides a good number of options to schedule your notifications</p><figure tabindex="0" contenteditable="false" name="5a30" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 349px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.8%;"></div><img class="graf-image" data-image-id="1*qEq74f8vndBr_L8w-XN2xA.png" data-width="986" data-height="491" src="https://cdn-images-1.medium.com/max/800/1*qEq74f8vndBr_L8w-XN2xA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Schedule your notifications as you&nbsp;want</figcaption></figure><ul class="postList"><li name="f789" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">Send now&#8202;</strong>—&#8202;Send all notification immediately</li><li name="0903" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Schedule</strong>&#8202;—&#8202;Select from calendar</li><li name="52e3" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Daily</strong>&#8202;—&#8202;Notifications will be sent daily at a custom time. You can specify the start and end date</li></ul><figure tabindex="0" contenteditable="false" name="701a" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 285px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 40.8%;"></div><img class="graf-image" data-image-id="1*JkLPU6rHXUvZKCdDfMc5GA.png" data-width="986" data-height="402" src="https://cdn-images-1.medium.com/max/800/1*JkLPU6rHXUvZKCdDfMc5GA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Schedule push with a daily&nbsp;schedule</figcaption></figure><ul class="postList"><li name="1cb7" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">Custom schedule</strong>&#8202;—&#8202;You can also use custom schedule for notifications</li></ul><figure tabindex="0" contenteditable="false" name="9923" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 293px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 41.9%;"></div><img class="graf-image" data-image-id="1*3ha4WgPWoyGfI6s_eMGh4A.png" data-width="929" data-height="389" src="https://cdn-images-1.medium.com/max/800/1*3ha4WgPWoyGfI6s_eMGh4A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Schedule push with a custom schedule in the&nbsp;week</figcaption></figure><h4 name="5907" class="graf graf--h4 graf-after--figure">3D. CONVERSION EVENT&nbsp;SECTION</h4><p name="35b1" class="graf graf--p graf-after--h4">Firebase already provides notifications <strong class="markup--strong markup--p-strong">Sent</strong> and <strong class="markup--strong markup--p-strong">Opened</strong> events. You can make use of these to estimate your campaign effectiveness. But sometimes you also want to check if certain activity happened via notification. E.g. You might want to if a user actually did the activity he/she was supposed to do after receiving the notification. For this purpose, you can use the <strong class="markup--strong markup--p-strong">Conversion events</strong></p><figure tabindex="0" contenteditable="false" name="8e2e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 569px; max-height: 336px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 59.099999999999994%;"></div><img class="graf-image" data-image-id="1*KVQ_620FeL0Y9HbbldQLjA.png" data-width="569" data-height="336" src="https://cdn-images-1.medium.com/max/800/1*KVQ_620FeL0Y9HbbldQLjA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enable conversion events for better campaign effectiveness estimation</figcaption></figure><p name="0a56" class="graf graf--p graf-after--figure">You can combine conversion events with Analytics and ads to create an effective campaign to track what converts and what doesn’t</p><h4 name="637c" class="graf graf--h4 graf-after--p">3E. ADDITIONAL OPTIONS&nbsp;SECTION</h4><p name="b99e" class="graf graf--p graf-after--h4">Firebase also provides you option to attach additional data in your push notifications. This data goes in a key-value pair manner. You can attach multiple such key-value pair to transfer more meaningful data via your notifications.</p><figure tabindex="0" contenteditable="false" name="3ddd" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 466px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.60000000000001%;"></div><img class="graf-image" data-image-id="1*er20SYLSDnqsYMaw0k1rFg.png" data-width="1125" data-height="749" src="https://cdn-images-1.medium.com/max/800/1*er20SYLSDnqsYMaw0k1rFg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Implement additional options in your notification campaign</figcaption></figure><p name="7f40" class="graf graf--p graf-after--figure">You can also change the following settings of your push notifications in this section</p><ul class="postList"><li name="a5b5" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Priority</strong>&#8202;—&#8202;Priority is an indication of how much of the user’s valuable attention should be consumed by this notification. Low-priority notifications may be hidden from the user in certain situations, while the user might be interrupted for a higher-priority notification.<br>E.g. If a device has a <strong class="markup--strong markup--li-strong">gaming mode, </strong>low-priority notifications may get hidden when the user is in <strong class="markup--strong markup--li-strong">gaming mode.</strong></li><li name="7516" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Sound</strong>&#8202;—&#8202;Whether or not your notifications should notify the user with sound</li><li name="df76" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Expires</strong>&#8202;—&#8202;This tells the system how long to retry sending a notification if the previous tries failed for some reason</li></ul><h3 name="bf2b" class="graf graf--h3 graf-after--li">4. Creating a notification experiment</h3><p name="4759" class="graf graf--p graf-after--h3">Firebase has introduced a new way to implement A/B testing using notifications.</p><p name="67fe" class="graf graf--p graf-after--p">Essentially, in an experiment, you create different groups of users and try different things on them (by sending notifications). This gives you a good idea of how good a strategy works compared to others.</p><p name="1365" class="graf graf--p graf-after--p">In the <strong class="markup--strong markup--p-strong">Notifications</strong> tab, click <strong class="markup--strong markup--p-strong">Create Experiment</strong> to compose a new experiment.</p><h4 name="5aca" class="graf graf--h4 graf-after--p">4a. Experiment Basics</h4><figure tabindex="0" contenteditable="false" name="82fa" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 368px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 52.6%;"></div><img class="graf-image" data-image-id="1*X_AlMIdaOx5gCX8XQN7gMg.png" data-width="1044" data-height="549" src="https://cdn-images-1.medium.com/max/800/1*X_AlMIdaOx5gCX8XQN7gMg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Compose an experiment</figcaption></figure><p name="56bf" class="graf graf--p graf-after--figure">Enter basic details of the experiment, select which app you want to perform the experiment on. Once again, you can filter your target audience by all the filters as described in previous sections.</p><p name="9018" class="graf graf--p graf-after--p">Notice that you need to select the % of users you’ll be experimenting on. These users will be randomly chosen. Keep the percentage low so you don’t meet any surprises in the experiment.</p><h4 name="1668" class="graf graf--h4 graf-after--p">4b. Variants</h4><figure tabindex="0" contenteditable="false" name="2e44" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 248px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.4%;"></div><img class="graf-image" data-image-id="1*2JWfLNXWNi30WME7WsMB5A.png" data-width="1011" data-height="358" src="https://cdn-images-1.medium.com/max/800/1*2JWfLNXWNi30WME7WsMB5A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create experiment variations</figcaption></figure><p name="e657" class="graf graf--p graf-after--figure">In the variant section, you define different push messages for different section. The <strong class="markup--strong markup--p-strong">control group</strong> is a subset of your users that experience normal app behavior. Other variants’ behavior is compared with the control group. You can add multiple variants</p><h4 name="c6e8" class="graf graf--h4 graf-after--p">4c. Goal</h4><p name="903d" class="graf graf--p graf-after--h4">In this section, you can define the goal of your experiment. This is the parameter which will be compared between Control group and other variants</p><figure tabindex="0" contenteditable="false" name="d4ef" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 401px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.3%;"></div><img class="graf-image" data-image-id="1*QRvxL2_UDQDre3-tcj1XKg.png" data-width="1069" data-height="613" src="https://cdn-images-1.medium.com/max/800/1*QRvxL2_UDQDre3-tcj1XKg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Choose your goal for comparison purpose</figcaption></figure><p name="1158" class="graf graf--p graf-after--figure">There are various default goals available in Firebase.</p><h4 name="ee53" class="graf graf--h4 graf-after--p">4d. Message&nbsp;Options</h4><p name="f85c" class="graf graf--p graf-after--h4">This section is exactly same as the Additional Options section of a normal compose notification form.</p><figure tabindex="0" contenteditable="false" name="30ee" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 537px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 76.7%;"></div><img class="graf-image" data-image-id="1*UCWQbD72LV9Kiv87tO6YUw.png" data-width="1068" data-height="819" src="https://cdn-images-1.medium.com/max/800/1*UCWQbD72LV9Kiv87tO6YUw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Additional options for experiment messages</figcaption></figure><p name="d7c5" class="graf graf--p graf-after--figure">You can create additional key-value pairs here, define expiry or message, set priority and turn sound ON/OFF</p><p name="2906" class="graf graf--p graf-after--p">Once you are done with setting up the experiment, click <strong class="markup--strong markup--p-strong">Review. </strong>It will show you an overview of the setup so you can review before starting the experiment. You can always go back and <strong class="markup--strong markup--p-strong">Edit</strong> the experiment. Once you are ready, you can start the experiment. The notifications will be sent as per the settings you selected in the experiment setup.</p><figure tabindex="0" contenteditable="false" name="5e36" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 414px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 59.199999999999996%;"></div><img class="graf-image" data-image-id="1*_oSyqaMKud0XhvOjDJlumg.png" data-width="1297" data-height="768" src="https://cdn-images-1.medium.com/max/800/1*_oSyqaMKud0XhvOjDJlumg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Review the experiment before starting&nbsp;it!</figcaption></figure><h3 name="0647" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="3c62" class="graf graf--p graf-after--h3">I know, I know, this was a long post. But Firebase push notifications deserve such a post to explain things in detail. It is such an awesome tool for developers. Imagine how life would have been if this tool wasn’t there to compose and send notifications!</p><p name="a480" class="graf graf--p graf-after--p">So in summary, we learned how to compose notifications in Firebase console, along with various options of filtering target audience, scheduling, and other notification options. We also learned the new Experiment feature of Firebase, which allows you to setup an experiment using notifications and provides you a comparison to gauge the effectiveness of the campaign.</p><p name="430b" class="graf graf--p graf-after--p">How this will prove useful to you!</p><p name="fbf0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Stay tuned for more interesting app blogs!</strong></p><h3 name="f57d" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned how to send all kinds of push notifications using Firebase, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic 4 Full app for your next awesome&nbsp;app</figcaption></figure><p name="a261" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>