[Huawei Developers] Efnan Akkus:
In this article, I will explain how to integrate Huawei Dynamic Tag Manager(DTM) into React Native project.

[IMG="im1"]https://miro.medium.com/max/1050/1*fqfqWHx3jGqyhrPX6tzUzw.jpeg[/IMG]

React Native is a framework developed by Facebook that enables cross-platform mobile application development based on JavaScript and React. In this article, HMS will be integrated into react native project and developer sample codes will be provided to increase the productivity of developers.

Service Introduction:

HUAWEI Dynamic Tag Manager (DTM) is a dynamic tag management system. With DTM, you can easily and securely deploy and update your tag configuration in a web-based user interface to monitor specific events and report data to third-party analytics platforms, and to perform data-driven operations based on HUAWEI Analytics' powerful analysis capabilities. While adding HUAWEI Dynamic Tag Manager(DTM) to the application, the analytics kit needs to be integrated into the app.

Integration:

Main steps of integration:

Integrating the HMS Core SDK

Enabling Required Services(Analytics Kit)

Dynamic Tag Manager Configuration

Importing a Configuration File

To able to use Dynamic Tag Manager, you need to follow process below :

1-Register as a Developer and create a new app.

For more detail about registration and verification follow this:

https://developer.huawei.com/consumer/en/doc/10104

2- Enable the analytics kit in the Manage API section .

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

After that, follow the steps in the link below to integrate HMS Core Sdk into the project and for more details about creating a new project on AppGallery Connect .

https://medium.com/huawei-developers/android-integrating-your-apps-with-huawei-hms-core-1f1e2a090e98

3- Add the DTM and Analytic kit sdk to build.gradle in the app directory from Android Studio

[IMG="im3"]https://miro.medium.com/max/915/1*Wl16JWIyccT7v-jq9qdGGw.png[/IMG]

4- Open the Dtm Configuration Page (Growing > Dynamic Tag Manager) on AGC and create configuration. This configuration include all DTM resources (Overview,Variable,Condition,Tag,Group,Version). Only one configuration can be created for an application and the package name cannot be changed while creating the configuration.

[IMG="im4"]https://miro.medium.com/max/833/1*7u4_lF2OorqCiRQAFTEmtA.png[/IMG]

After the configuration is created, click on the configuration name.

5-Configuration of Service

On the Overview tab page, you can view the change history and operation records of variables, conditions, and tags in the current configuration version. The operation records on a variable, condition, tag or group are displayed in the operation records area when they are deleted, created, or edited. In change history, it can be checked whether a variable, condition or tag is added or deleted at a specific time.

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

A variable is a placeholder used in a condition or tag. DTM provides preset variables that can be used to configure most tags and conditions, and also custom variables can be created.

Currently, DTM provides 18 types of preset variables and 6 types of custom variables. Some types of preset variable are shown in below picture.

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

I created Event Name as a present variable which will use in condition part.

[IMG="im6"]https://miro.medium.com/max/629/1*_L5l_ws3VQpPgG4TrEba0w.png[/IMG]

Then, Click the create button in Custom variable row, enter the name, type which is used to obtain the value of the reported event, and event parameter key and click save button.

[IMG="im7"]https://miro.medium.com/max/852/1*7fj42VFG6X7Gck7_oJwYqA.png[/IMG]

You can see some of the custom variable types in below, then configure your variable types.

[IMG="im7"]https://miro.medium.com/max/1050/1*nWueCA7Fwgcy5D-hmZak2Q.png[/IMG]

Then, open the condition page. 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="im8"]https://miro.medium.com/max/1050/1*Pg-XYG1THoco5iteIFk1dw.png[/IMG]

A condition consists of three elements: name, type, and trigger condition. Name and type are mandatory section.

For more detail about condition =>

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/server-dev-0000001050043921

The next step after creating a condition is to create a tag.Tag is used in your app to track events. DTM supports the HUAWEI Analytics and many third-party tag extension templates. It can be set parameters and trigger conditions for a tag in DTM, and release the configuration version to track events.

[IMG="im9"]https://miro.medium.com/max/983/1*TpQ1h8ZDmNK5S3QDiE292w.png[/IMG]

Firstly, Enter a tag name and set the extension to Huawei Analytics. Then choose one of the operation types shown in below.

[IMG="im12"]https://miro.medium.com/max/1050/1*GL3D8Cm03LqoTbB-oNCXvw.png[/IMG]

After selecting, enter a new event name in event name text box.

NOTE

The event name must start with a letter or reference and can contain only digits, letters, and underscores (_). If a variable is referenced in the event name, you need to ensure that the value of the referenced variable meets the event name constraints. Otherwise, the event may fail to be reported.

Click Add below Parameters for addition or modification and set Key and Value for the parameter. Lastly, click the Add under Trigger condition and set a trigger condition for the tag.

[IMG="im13"]https://miro.medium.com/max/1049/1*EB4Xc9WJI3cBc4Ik6s5f6g.png[/IMG]

Don’t forget click the save button after creating tag.

Version is used to save different phases of a configuration. It can be created a version for a configuration anytime to save the latest configuration and you can download, preview and release the version in detail page.

[IMG="im14"]https://miro.medium.com/max/674/1*Lm3dhc1Ccj8thiQewxHCmA.png[/IMG]

To create a version, you can click Create version on the Overview page or click Create on the Version page. Enter the version name and description. All the service configurations are completed on DTM portal. Let’s look at the other detail.

6- After doing all the configuration on DTM portal, download the version page. The name of file is DTM-***.json.

And then, create assets file in src\main directory in app folder and create a new container file in assets, then move to generated configuration DTM-**.json file to the container. The directory will be src/main/assets/container/DTM-***.json.

[IMG="im15"]https://miro.medium.com/max/894/1*qvsnPrGGuQw-gSApzeRWlg.png[/IMG]

Hint: Don’t forget to download agconnect-services.json file and add the internet permission to the manifest.

7- It can be skipped this section if you use the visual event function to add events. After all the configurations are imported successfully, the event is sent using the Analytics Kit. Install Analytics kit plugin to project and run the following command.

[IMG="im16"]https://miro.medium.com/max/815/1*H4p8PZ5LySVU2ZCYYziMHQ.png[/IMG]

Then, import Analytics kit to the project and send event.

[IMG="im17"]https://miro.medium.com/max/786/1*iATF2k2WtWdawpTYj8LOGQ.png[/IMG]

Using Debug Mode, you can view the event record in real time. Run the following command on an Android device enable the debug mode :

adb shell setprop debug.huwei.hms.analytics.app <Package_name>

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

[IMG="im19"]https://miro.medium.com/max/1050/1*4-fmNF9SbQAFrjpphA529Q.png[/IMG]

Verification Result:

This case successfully integrated HUAWEI Dynamic Tag Manager into react native project. The result shows that developer can integrate DTM to their react native project. For demo project code : https://github.com/simgekeser/React-native-hms-dtm

Official HMS Resources

Dynamic Tag Manager:

Codelab:

https://developer.huawei.com/consumer/en/codelab/HMSDTMKit/index.html#7

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

SDK Library: https://developer.huawei.com/consumer/en/doc/development/HMSCore-Library-V5/sdk-download-0000001050174612-V5

Analytics Kit:

Codelab: https://developer.huawei.com/consumer/en/codelab/HMSAnalyticsKit-ReactNative/index.html#0

Document: https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/react-native-development

SDK Library: https://developer.huawei.com/consumer/en/codelab/HMSAnalyticsKit-ReactNative/index.html#2

Related Links

Thanks to Simge Keser for this article.

Original post:https://medium.com/huawei-developers/dynamic-tag-manager-react-native-d032a03b86d0