Integrating Huawei Analytics Kit to Flutter Projects and Sending Events - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum​
Hello everyone,
In this article, I am going to create a Flutter project –actually a tiny game- and explain how to implement Analytics Kit. But first, let me inform you about Huawei Analytics Kit a little.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Huawei Analytics Kit
Huawei Analytics Kit offers you a range of analytics models that help you not only to analyze users’ behavior with preset and custom events, but also gain an insight into your products and contents. So that you can improve your skills about marketing your apps and optimizing your products.
HUAWEI Analytics Kit identifies users and collects statistics on users by anonymous application identifier (AAID). The AAID is reset in the following scenarios:
1) Uninstall or reinstall the app.
2) The user clears the app data.
After the AAID is reset, the user will be counted as a new user.
HUAWEI Analytics Kit supports event management. For each event, maximum 25 parameters; for each app maximum 100 parameters can be defined.
There are 3 types of events: Automatically collected, predefined and custom.
Automatically collected events are collected from the moment you enable the kit in your code. Event IDs are already reserved by HUAWEI Analytics Kit and cannot be reused.
Predefined events include their own Event IDs which are predefined by the HMS Core Analytics SDK based on common application scenarios. The ID of a custom event cannot be the same as a predefined event’s ID. If so, you will create a predefined event instead of a custom event.
Custom events are the events that you can create for your own requirements.
More info about the kit and events.
Configuration in AppGallery Connect
Firstly, you will need a Huawei developer account. If you don’t have one, click here and register. It will be activated in 1–2 days.
After signing in to AppGallery Connect, you can add a new project or select an existing project. In the project you choose, add an app. While adding app, make sure you enter the package name right. It should be the same as your Flutter project’s package name.
Also, make sure you set data storage location, enable Analytics kit and add SHA-256 fingerprint to AppGallery Connect.
How to generate SHA-256 Fingerprint?
In Android Studio, right click on android folder under your project and select Flutter > Open Android module in Android Studio.
On the right panel, select Gradle and follow the steps that are shown in the picture below. Open signingReport and there is your SHA-256 fingerprint.
Copy the code and paste it on the project settings in the AppGallery Connect.
Integrate HMS to your project
Download agconnect-services.json file and place it under project_name > android > app.
Add Signing Configuration
Create a file named key.properties under android folder and add your signing configs here.
storeFile file(‘<keystore_file>.jks’)
storePassword ‘<keystore_password>’
keyAlias ‘<key_alias>’
keyPassword ‘<key_password>’
Define your key.properties file by adding the code below, before android block in your app-level build.gradle file.
Code:
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file(‘key.properties’)
if (keystorePropertiesFile.exists()) {
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
TO-DOs in project-level build.gradle
Code:
buildscript {
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'} //add this line
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
classpath 'com.huawei.agconnect:agcp:1.1.1.300' //add this line
}
}
allprojects {
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'} //add this line
}
}
TO-DOs in app-level build.gradle
Code:
defaultConfig {
...
minSdkVersion 19 //Increase this to 19
}
//Add these lines
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
storePassword keystoreProperties['storePassword']
}
}
//Edit buildTypes
buildTypes {
debug {
signingConfig signingConfigs.release
}
release {
signingConfig signingConfigs.release
}
}
//Add dependencies
dependencies {
implementation 'com.huawei.agconnect:agconnect-core:1.0.0.300'
implementation 'com.huawei.hms:hianalytics:5.0.1.300'
}
apply plugin: 'com.huawei.agconnect' //Add this line to the bottom of the page
Add Analytics Kit to your project
There are 2 ways to do this step.
1) Go to developer website and download plugin. In Android Studio create a new folder in your root directory and name it “hms”. Unzip the plugin and paste it in “hms” folder.
Then, go to pubspec.yaml and add the plugin under dependencies.
2) This way is much easier and also more familiar to Flutter developers. In pub.dev copy the plugin and add it under dependencies as usual.
For both ways, after running pub get command, the plugin is ready to use!
For more information about HMS Core integration, click.
We are all done. Let’s begin coding.
I will make a tiny and very easy game that I belive most of you know the concept: Guess the number!
As you play the game and try to guess the number, Huawei Analytics Kit will collect statistics how many times you guessed.
Make a simple game with Flutter
First, let’s write the method to create a random number. You should import ‘dart:math’ for this.
Code:
_setRandomNumber() {
Random random = Random();
int number = random.nextInt(100); // from 0 to 99 included
return number;
}
And call it in initState
Code:
@override
void initState() {
randomNumber = _setRandomNumber();
super.initState();
}
We will need a TextField and a button to check user’s guess.
Code:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
controller: _controller,
decoration: InputDecoration(
hintText: "Enter Your Guess [0-99]",
border: new OutlineInputBorder(borderSide: BorderSide()),
),
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
WhitelistingTextInputFormatter.digitsOnly
],
onChanged: (value) {
guess = int.parse(value);
},
enabled: _isFound ? false : true, //If user guesses the number right, textfield will be disabled
),
RaisedButton(
child: Text("OK!"),
onPressed: () {
if (!_isFound) {
_controller.text = "";
_count++;
_compareValues();
}
},
),
],
)
We need a method if the user guessed the number right or not.
Code:
_compareValues() {
if (guess == randomNumber) {
setState(() {
_isFound = true;
_message =
"Correct! The number was $randomNumber.\nYou guessed it in $_count times.";
});
} else if (guess > randomNumber) {
setState(() {
_message = "Lower!";
});
} else {
setState(() {
_message = "Higher!";
});
}
}
}
Let’s add a message Text in Column widget to give hints to user, also a replay button.
Code:
Column(
...
Text(
_message,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 24),
),
_isFound //If user guesses the number right, iconButton will appear, otherwise it won't
? IconButton(
icon: Icon(
Icons.refresh,
size: 40,
),
onPressed: () {
setState(() {
//reset all variables and set a new random number.
randomNumber = _setRandomNumber();
_isFound = false;
_count = 0;
_message = "";
});
},
)
: Text("")
],
),
We have done a simple but fun game. Let’s play it!
Define HMS Analytics Kit and send events
As we’re done with the widgets, we will define the kit and enable logs.
Code:
class _MyHomePageState extends State<MyHomePage> {
final HMSAnalytics hmsAnalytics = new HMSAnalytics();
Future<void> _enableLog() async {
await hmsAnalytics.enableLog();
}
...
@override
void initState() {
_enableLog();
randomNumber = _setRandomNumber();
super.initState();
}
}
Once we call _enableLog(), we are ready to see auto collected events on AppGallery Connect.
What about our custom events? How can we send custom events and see them?
We have _count variable and every time user clicks OK! button, it increases. Now we will map it and send it as a custom event. We need a name for custom event, and a map value.
Code:
Future<void> _sendEvent(int count) async {
String name = "USERS_RESULTS";
Map<String, String> value = {
'number_of_guesses': count.toString()
};
await hmsAnalytics.onEvent(name, value);
}
And we call it when we are sure that user guessed the number right. In _compareValues method.
Code:
_compareValues() {
if (guess == randomNumber) {
...
_sendEvent(_count); //We know that user guessed the number right.
} else if (guess > randomNumber) {
...
} else {
...
}
}
}
Let’s go back to AppGallery Connect. In the left panel, under Management section click Events.
After _sendEvent builds for the first time, you can see your custom event with the name you have entered in your code. Click Edit.
Add your attribute and click Save.
On the left panel, click Real Time Monitoring under Overview.
Now you can see the attribute and its value in your custom event. Also you can see how many times you get this value and its proportion of all values.
Let’s play our game a few times more.
Despite I am the only user, you see 2 users in AG Connect. That’s because I uninstalled the app and installed again. Now I have a different AAID as I mentioned in the first part.
Under the graphics, there is event analysis. Here you can see all events, all attributes you’ve added and statistics for both events and attributes. 11 of them are custom events that I have sent by playing the game. And rest are collected automatically.
You can find full code in my github page. Here is the link for you.
ozkulbeng/FlutterHMSAnalyticsKitTutorial
Conclusion
In this article you have learned how to integrate HMS Analytics to your Flutter projects, send custom events and monitor them in AppGallery Connect. You can use custom events in your apps to see user behaviors, so that you can improve your app depend on them.
Thank you for reading this article, I hope you enjoyed it.
References
Analytics Kit Document
HMS-Core/hms-ananlytics-demo-android

---

sujith.e said:
Huawei Analytics will track fragment reports
Click to expand...
Click to collapse
Quite right. It really helps a lot