[Huawei Developers] ask011:
Overview

In this article, I will create an Android Demo app that highlights use case of Google Tag Manager and Dynamic Tag Manager in a Single Android App. I have integrated Huawei Analytics and Google Analytics.

I will create an AppGallery project and deploy AppGallery into the application. I will fire a basic event, so we can debug the hits sent from AppGallery to Huawei Analytics.

I will create a Google Tag Manager container for Firebase, and I will install that in application. I will use that container to take the event when we configured Firebase and will send the data to a (non-Firebase) Google Analytics property as well.

Huawei Analytics Introduction

Analytics kit is powered by Huawei which allows rich analytics models to understand user behaviour and gain in-depth insights into users, products, and content. As such, you can carry out data-driven operations and make strategic decisions about app marketing and product optimization.

Analytics Kit implements the following functions using data collected from apps:

1. Provides data collection and reporting APIs for collection and reporting custom events.

2. Sets up to 25 user attributes.

3. Supports automatic event collection and session calculation as well as predefined event IDs and parameters.

Google Analytics Introduction

Google Analytics collects usage and behaviour data for your app. The SDK logs two primary types of information:

Events: What is happening in your apps, such as user actions, system events, or errors?

User properties: Attributes you define to describe segments of your user base, such as language preference or geographic location.

Analytics automatically logs some events and user properties, you don't need to add any code to enable them.

Dynamic Tag Manager Introduction

Dynamic Tag Manager is a concept of improving collaboration between developers and marketers. It eliminates the need for restructuring application code as a result of new marketing intelligence requirements.

Dynamic Tag Manager console allows you to define different tags and manage the rules that trigger them. One specific tag type is the Universal Analytics tag, which enables you to integrate your Huawei Analytics project with Dynamic Tag Manager. This tag is easily set up by associating it with your Analytics key. This will expose the tags you are firing to your Analytics project in their raw form. From that point, you can define what data is sent to your Analytics project, when and how, without the need of changing your application’s code-of course, assuming you have smartly integrated the Huawei Dynamic Tag Manager’s SDK into your app in the first place.

Google Tag Manager

Google Tag Manager enables developers to change configuration values in their mobile application using the Google Tag Manager interface without having to rebuild and resubmit application binaries to app marketplaces.

This is useful for managing any configuration values or flags in your application that you may need to change in the future, including:

Various UI settings and display strings.

Sizes, locations, or types of ads served in your application.

Various Game settings.

Configuration values may also be evaluated at runtime using rules, enabling dynamic configurations such as:

Using screen size to determine ad banner size.

Using language and location to configure UI elements.

Google TagManager also enables the dynamic implementation of tracking tags and pixels in applications. Developers can push important events into a data layer and decide later which is tracking tags or pixels should be fired.

Prerequisite

1. Android Studio

2. Huawei phone

3. Firebase Account

4. AppGallery Account

App Gallery Integration process

1. Sign In and Create or Choose a project on AppGallery Connect portal.

2. Navigate to Project settings and download the configuration file.

3. Navigate to General Information > Data Storage location.

4. Navigate to Manage APIs > Enable APIs.

5. Enable Huawei Analytics.

6. Enable Dynamic Tag Manager.

7. Create Tag.

8. Configure Tag.

9. Pause or Delete Tag.

Firebase Integration Process

1. Create a Firebase project.

2. Choose Android as a Platform.

3. Add App to your Firebase Project.

4. Download Configuration file.

5. Navigate to Google Tag Manager Console.

Create New Tag, then click Submit.

6. Choose tag type.

7. Choose a Variable

8. Tag Configure.

9. Publish Tag

10. Download the Tag and Add in your Android App.

(Your Project)Android App > Assets > Container > tag_file.

App Development

1. Create A New Project.

2. Configure Project Gradle.

buildscript {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
classpath "com.android.tools.build:gradle:4.0.1"
classpath 'com.google.gms:google-services:4.3.5'
classpath 'com.huawei.agconnect:agcp:1.3.1.300'
}
}

allprojects {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
}

task clean(type: Delete) {
delete rootProject.buildDir
}

3. Configure App Gradle.

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.huawei.agconnect'

android {
compileSdkVersion 30
buildToolsVersion "29.0.3"

defaultConfig {
applicationId "com.gtm.dtm"
minSdkVersion 27
targetSdkVersion 30
versionCode 1
versionName "1.0"

testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}

buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}

dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

//Google Tag Manager with Analytics
implementation platform('com.google.firebase:firebase-bom:26.8.0')
implementation 'com.google.firebase:firebase-analytics'
implementation 'com.google.android.gms:play-services-tagmanager:17.0.0'

//Dynamic Tag Manager with Huawei Analytics
implementation "com.huawei.hms:hianalytics:5.2.0.300"
implementation "com.huawei.hms:dtm-api:5.2.0.300"

implementation 'in.shadowfax:proswipebutton:1.2.2'

}

4. Configure AndroidManifest.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.gtm.dtm">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

<activity
android:name="com.google.android.gms.tagmanager"
android:noHistory="true">
<intent-filter>
<data android:scheme="tagmanager.c.com.example.app" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE"/>
</intent-filter>
</activity>

<meta-data
android:name="com.huawei.hms.client.channel.androidMarket"
android:value="false" />

</application>

</manifest>

5. Create an Activity class with XML UI.

MainActivity:

This activity performs all the operation of Huawei Analytics and Google Analytics based on button click events.

package com.gtm.dtm;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.os.Handler;
import android.util.Log;

import com.google.firebase.analytics.FirebaseAnalytics;
import com.huawei.hms.analytics.HiAnalytics;
import com.huawei.hms.analytics.HiAnalyticsInstance;

import in.shadowfax.proswipebutton.ProSwipeButton;

public class MainActivity extends AppCompatActivity {

private HiAnalyticsInstance instance;
private FirebaseAnalytics mFirebaseAnalytics;

private ProSwipeButton btnGTM;
private ProSwipeButton btnDTM;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mFirebaseAnalytics=FirebaseAnalytics.getInstance(this);
instance = HiAnalytics.getInstance(this);

btnGTM = (ProSwipeButton) findViewById(R.id.btn_gtm);
btnGTM.setOnSwipeListener(new ProSwipeButton.OnSwipeListener() {
@Override
public void onSwipeConfirm() {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
btnGTM.showResultIcon(true);
sendGTMEvent();
}
}, 2000);
}
});

btnDTM = (ProSwipeButton) findViewById(R.id.btn_dtm);
btnDTM.setOnSwipeListener(new ProSwipeButton.OnSwipeListener() {
@Override
public void onSwipeConfirm() {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
btnDTM.showResultIcon(true);
sendDTMEvent();
}
}, 2000);
}
});
}

private void sendDTMEvent() {
String eventName = "DTM";

Bundle bundle = new Bundle();
bundle.putString("Click", "Pressed button");

if (instance != null) {
instance.onEvent(eventName, bundle);
Log.d("DTM-Test","log event.");
}
}

private void sendGTMEvent(){
Bundle bundle = new Bundle();
bundle.putString("Click", "Pressed button");
mFirebaseAnalytics.logEvent(FirebaseAnalytics.Event.ADD_TO_CART, bundle);
}
}

main_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@drawable/bg">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:gravity="center_horizontal"
android:text="Google Tag Manager \n vs \n Dynamic Tag Manager"
android:textColor="#fff"
android:textSize="30dp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="10dp">

<in.shadowfax.proswipebutton.ProSwipeButton
android:id="@+id/btn_dtm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:arrow_color="#33FFFFFF"
app:bg_color="@android:color/holo_red_dark"
app:btn_radius="2"
app:btn_text="Send DTM Event"
app:text_color="@android:color/white"
app:text_size="14sp" />

<in.shadowfax.proswipebutton.ProSwipeButton
android:id="@+id/btn_gtm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginTop="10dp"
app:arrow_color="#33FFFFFF"
app:bg_color="@android:color/holo_green_dark"
app:btn_radius="2"
app:btn_text="Send GTM Event"
app:text_color="@android:color/white"
app:text_size="14sp" />
</LinearLayout>

</RelativeLayout>

App Build Result

1. Google Analytics Debug View.

2. Huawei Analytics Overview.

3. App Result.

Tips and Tricks

1. 5.2.0 or later. If HMS Core (APK) is not installed or its version is earlier than 5.2.0, DTM functions can be normally used but the DTM SDK version cannot be updated automatically.

2. ICustomVariable and ICustomTag contain custom extensible variables and templates. You can also customize variables and templates in DTM to meet specific requirements.

Conclusion

In this article, we have learned how to integrate DTM and GTM in application. In this application, I have explained use case of Google tag manager with Dynamic Tag manager in a single application.

Thanks for reading this article. Be sure to like and comments on this article, if you found it helpful. It means a lot to me.

References

1. Huawei Tag Manager

2. Google Tag Manager Console

3. Google Firebase Console