[Huawei Developers] Efnan Akkus:
In this article, we’ll learn how to use DTM in our Flutter projects.

[IMG="banner"]https://miro.medium.com/max/1050/1*HoDBn3r_Z7bdnr4l4pCsVA.png[/IMG]

Flutter is a free and open-source mobile UI framework. It allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps for iOS and Android. In this case, we’ll integrate the Dynamic Tag Manager (DTM) into a Flutter project. With Dynamic Tag Manager, you can dynamically update tracking tags on a web-based UI to track specific events and report data to third-party analytics platforms, tracking your marketing activity data as needed.

Configure your project on AppGallery Connect

Registering a Huawei ID

You need to register a Huawei ID to use the plugin. If you don’t have one, follow the instructions here.

Preparations for Integrating HUAWEI HMS Core

First of all, you need to integrate Huawei Mobile Services with your application. I will not get into details about how to integrate your application but you can use this tutorial as step by step guide.

Configuring the AndroidManifest.xml File

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

Process

1. Enabling Flutter Analytics Plugin

In Flutter you are advised to integrate HUAWEI Analytics Kit for recording custom events. The Flutter Analytics Plugin enables communication between HUAWEI Analytics SDK and Flutter platform. This plugin exposes all functionality provided by HUAWEI Analytics SDK. Let’s start by integrating Flutter Analytics Plugin to our pubspec.yaml file. There are two ways to do this. For both ways, after running pub get command, the plugin is ready to use.

dev_dependencies:
flutter_test:
sdk: flutter
huawei_analytics:
path: hms/huawei_analytics

dev_dependencies:
flutter_test:
sdk: flutter
huawei_analytics: ^4.0.4

2. Operations on the Server

To access the DTM portal, perform the following steps: On the Project Setting page, go to Growing > Dynamic Tag Manager.

[IMG="image1"]https://miro.medium.com/max/1050/1*yf2e5mg1i2b6Wkh78bfG7Q.png[/IMG]

Click Create configuration on the DTM portal and set Configuration name, App type, Operation record, and Tracked data.

[IMG="ima"]https://miro.medium.com/max/1050/1*Z9JxeeUMiulAqPaC0NrQnw.png[/IMG]

View the configuration on the Configuration management page. You can click its name to access the configuration page.

[IMG="ima3"]https://miro.medium.com/max/1050/1*7u6cg8lXbbfF1vCeQUNz9Q.png[/IMG]

The configuration is a general term for all resources in DTM, including Overview, Variable, Condition, Tag, Group, Version, and Visual Event.

On the Overview tab page, you can view the change history and operation records of variables, conditions, and tags in the current configuration version.

[IMG="image5"]https://miro.medium.com/max/1050/1*zuX08fLkMTzbNTObmZmfiA.png[/IMG]

A variable is a placeholder used in a condition or tag. DTM provides preset variables which can be used to configure most tags and conditions. You can also create your own custom variables.

[IMG="image6"]https://miro.medium.com/max/1050/1*Q92B2rN9Nm5C5aNCW5rvNQ.png[/IMG]

Creating a Preset Variable

[IMG="image7"]https://miro.medium.com/max/935/1*MZP73QZVKnsYZ9qWtMOicg.png[/IMG]

Creating a Custom Variable

[IMG="image8"]https://miro.medium.com/max/1050/1*bLCrJANIr6ZzVIlGUP4-gQ.png[/IMG]

Condition

A condition is the prerequisite for triggering a tag and determines when the tag is executed. A tag must contain at least one trigger condition.

[IMG="image9"]https://miro.medium.com/max/1050/1*gpSsWfPCoqtuZL0lbNXjVA.png[/IMG]

Creating a Condition

[IMG="image11"]https://miro.medium.com/max/1050/1*iD3PP9oJOP7ygus4pxSkrg.png[/IMG]

Tag

A tag is used in your app to track events. DTM supports the HUAWEI Analytics and custom function templates, as well as many third-party tag extension templates. With DTM, you do not need to add additional third-party tracking tags in your app.

[IMG="ima12"]https://miro.medium.com/max/1050/1*4U6InWxWGONvsIe36jpO-g.png[/IMG]

Creating a Tag

[IMG="ima13"]https://miro.medium.com/max/1050/1*Re5KPgP4sFtXXoF1pDl4lg.png[/IMG]

Create and Release a Version

[IMG="ima14"]https://miro.medium.com/max/1050/1*w1A1547t3kgD90_1e1WhOg.png[/IMG]

Downloading a Version

Importing a Configuration File

[IMG="ima14"]https://miro.medium.com/max/743/1*W_jD_UQBfZgF3yCilYLtgA.png[/IMG]

3. Configuring the Code

import 'package:huawei_analytics/analytics.dart';

class _MyHomePageState extends State<MyHomePage> {

final HMSAnalytics hmsAnalytics = new HMSAnalytics();

Future<void> _onCustomEvent(BuildContext context) async {

String name = "Purchase";

dynamic value = {'price': 90};

await hmsAnalytics.onEvent(

name, value);

}

floatingActionButton: FloatingActionButton(

onPressed:(){

_onCustomEvent(context);

},
),

Results:

Through the Verification process, we successfully integrated Dynamic Tag Manager into Flutter project.

[IMG="ia15"]https://miro.medium.com/max/741/1*3EmLPJ7THNljmgSdL55vHQ.png[/IMG]

[IMG="ima15"]https://miro.medium.com/max/761/1*a4QMsJmuQemTGUa34j7IaA.png[/IMG]

For more information about HUAWEI Dynamic Tag Manager (DTM), visit

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/introduction-0000001050043907

Related Links

Original post: https://medium.com/huawei-developers/using-dynamic-tag-manager-dtm-in-flutter-project-f052d24731e4