Source: https://medium.com/coding-blocks/exploring-firebase-in-app-messaging-e3cbcf3d6895
A great day, a great team behind Firebase announced that In-App-Messaging for Android and IOS users
In this Beta version, this new service allows you to display Alert Dialogs on a User’s device while they are using your App to give interaction or as a guide to perform an action in the App. For example, you can send In-App Messaging to users to register, watch videos, complete a level or buy an item.
You can see Firebase’s introduction: https://www.youtube.com/watch?v=5MRKpvKV2pg
Let’s try to explore it, They create a simple message to display a notice to the User to see about a match.
After completing each step And executing In-App messaging in the App, then the Message should look like this: https://firebase.google.com/docs/android/setup
Step 1: Connect to your App
This is a simple step to set firebase into your project. You can refer to the instructions here
Step 2: Integrate the SDK
In-App messaging requires you to add dependency to your App:
1 2 3 4 5 6 | dependencies <span class="token punctuation">{</span> <span class="token comment">//...</span> <span class="token comment">// In app message</span> implementation <span class="token string">'com.google.firebase:firebase-inappmessaging-display:17.0.0'</span> <span class="token punctuation">}</span> |
Create MyClickListenerBundles.class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | package com.friend.demoinapmessage import android.util.Log import com.google.firebase.inappmessaging.FirebaseInAppMessagingClickListener import com.google.firebase.inappmessaging.model.Action import com.google.firebase.inappmessaging.model.InAppMessage class MyClickListenerBundles : FirebaseInAppMessagingClickListener { override fun messageClicked(inAppMessage: InAppMessage, action: Action) { val url = action.actionUrl val metadata = inAppMessage.campaignMetadata val dataBundle = inAppMessage.data Log.d( "MyClickListener", "url: $url , metadata: ${metadata?.campaignId} - ${metadata?.campaignName} - $dataBundle" ) } } |
In MainActivity :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">package</span> com <span class="token punctuation">.</span> friend <span class="token punctuation">.</span> demoinapmessage <span class="token keyword">import</span> androidx <span class="token punctuation">.</span> appcompat <span class="token punctuation">.</span> app <span class="token punctuation">.</span> AppCompatActivity <span class="token keyword">import</span> android <span class="token punctuation">.</span> os <span class="token punctuation">.</span> Bundle <span class="token keyword">import</span> com <span class="token punctuation">.</span> google <span class="token punctuation">.</span> firebase <span class="token punctuation">.</span> inappmessaging <span class="token punctuation">.</span> FirebaseInAppMessaging <span class="token comment">/* * https://medium.com/coding-blocks/exploring-firebase-in-app-messaging-e3cbcf3d6895 * */</span> <span class="token keyword">class</span> MainActivity <span class="token operator">:</span> <span class="token function">AppCompatActivity</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">val</span> listener <span class="token operator">=</span> <span class="token function">MyClickListenerBundles</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onCreate</span> <span class="token punctuation">(</span> savedInstanceState <span class="token operator">:</span> Bundle <span class="token operator">?</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onCreate</span> <span class="token punctuation">(</span> savedInstanceState <span class="token punctuation">)</span> <span class="token function">setContentView</span> <span class="token punctuation">(</span> R <span class="token punctuation">.</span> layout <span class="token punctuation">.</span> activity_main <span class="token punctuation">)</span> FirebaseInAppMessaging <span class="token punctuation">.</span> <span class="token function">getInstance</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">addClickListener</span> <span class="token punctuation">(</span> listener <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
In AndroidManifest.xml
1 2 3 4 | <span class="token operator"><</span> meta <span class="token operator">-</span> <span class="token keyword">data</span> android <span class="token operator">:</span> name <span class="token operator">=</span> <span class="token string">"firebase_inapp_messaging_auto_data_collection_enabled"</span> android <span class="token operator">:</span> value <span class="token operator">=</span> <span class="token string">"true"</span> <span class="token operator">/</span> <span class="token operator">></span> |
Step 3: Create the first message
Sending and receiving messages does not require any code setup.
We can send and receive messages directly on the device from Firebase Console.
You can create campaigns and within each campaign, there are 4 different types of In-App messages, we can create Card, Modal, Image and Top Banner.
Step 3.1: Create a Card message
The card is similar to AlertDialog and it has the following properties:
Background : Used to define the background for the dialog
Text Color : Specify the text color in the dialog
Title : Text displays the Title dialog box
Body (Optional): is the message as the body of Dialog
Image URL (Optional): Image URL if you want to display the image
Button Text (Optional): Text for button if you want the button
Button Action : URL to navigate when the user clicks the button
Step 3.2: Select Target for your message
You can select the Target user to whom the Message is sent. If you use Push Message, it’s quite similar:
Campaign Name : Does not appear for users, and is used to mark your campaigns
Campaign Description (Optional): Briefly describes the campaign and does not appear to users
Target app and other conditions : Define the condition that all users see the message
Step 3.3: Scheduling the message
In this section, you can adjust the start date and end date for your campaign, with the number of notifications displayed:
Start time : The campaign start time is by default “Now”.
End time : Time to end the campaign
Trigger : Activate the displayed message. This has some default fields like app_exception, app_clear_data, first_open, app_start and you can add some custom triggers using Firebase Anlytics.
Frequency Limit : Frequency messages appear in a day. By default, only 1 message per day
Step 3.4: Conversion eventsConversion events
This is an optional case. You can trigger this transition based on the event selection you choose. Which you can track it later in your analysis.
You can output the event and you can see the messages on the user device.
To create different types of messages (Image or Top Banner), you can choose other types in step 3.1: Create a Modal message
You can create other campaigns that will show you lists like this:
You can see how many people view the message or how many people click on the message as shown below:
Step 4: Test
You can test with specific device with the following id in Android studio Log as follows:
Remember to get the ID, then assign it to the test section of In App Message and open the test as follows:
After :
The remaining is that you wait for the message to return
Step 5: Achievements
This article helps you perform the basic steps of In App Message. Hope this post will help you a bit. If anything is wrong. You can comment on the side to help me improve.
Document :
https://medium.com/coding-blocks/exploring-firebase-in-app-messaging-e3cbcf3d6895
https://firebase.google.com/docs/in-app-messaging/get-started
Link Github: https://github.com/haiminhtran810/InAppMessageDemo