Expert: Integration of Google Tag Manager and Huawei Dynamic Tag Manager for Firebase Android App

Search This thread

ask011

Member
Dec 24, 2020
48
17
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.

2640091000001768541.20210409084308.30258968988745245274055225711703:50520420080459:2800:BAF5F4CFA1991BDFF77E331E6304DA5A3C394360C464F99C649A4FC7175D9B3B.png


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

2640091000001768541.20210409084324.39583706377679367414814702318993:50520420080459:2800:1ED74F19331F49D951C6F32C24E8598834B8FC656AAA045DDC84978220DF60CF.png


3. Navigate to General Information > Data Storage location.

2640091000001768541.20210409084338.63928750777712317378832986377031:50520420080459:2800:E14039BEBED0466B16AC2829281E278F473130B50E3BDA65CF732774A6D54C04.png


4. Navigate to Manage APIs > Enable APIs.

2640091000001768541.20210409084350.16864297395524841661448961776606:50520420080459:2800:D0458F011DDB6065A676A8A67B1F68373A38A7E6EB5F40605F6E187BE28022F7.png


5. Enable Huawei Analytics.

2640091000001768541.20210409084407.55015264005015897973258465259454:50520420080459:2800:DF5AA6B1B9B9245744949F76DD428764AFD4D258C9AED02C3B8A277AF2D09BDD.png


6. Enable Dynamic Tag Manager.

2640091000001768541.20210409084420.19583830442920836920616796459705:50520420080459:2800:8D8C2C95E0DC02BA9DFF43E56A925CF9DF9A864C54DE762A09FE704CB8C244B1.png


7. Create Tag.

2640091000001768541.20210409084439.94260317105078610561592817942638:50520420080459:2800:31D591D390777FF3AC5B6A2652A00D56FFEDBA2904ED1D667D93B4EE3E496577.png


8. Configure Tag.

2640091000001768541.20210409084453.18941956065268720690692820598006:50520420080459:2800:7E52C4DF21C2FCE06BB5E1E5A45D5D80ED1B8023A0CC415B861BE7834C29A1CD.png


9. Pause or Delete Tag.

2640091000001768541.20210409084509.16467985942519022711252752669425:50520420080459:2800:0B526D4F1DC3DE67EF7DDDA73BFFFB1174F47BFAC03929438F99F14CB4B53D7B.png


Firebase Integration Process

1. Create a Firebase project.

2640091000001768541.20210409084653.18800925380661482739093240157576:50520420080459:2800:79C0C24552B074D08A98BCA7448F515ACFD2B3ACB733FEA2AEDFE71F5C0B738B.png


2. Choose Android as a Platform.

2640091000001768541.20210409084706.72384506314290930966153062254408:50520420080459:2800:89CDC46739379CF64E9F5FBAEF8EF0A3DFF1BE0A3C4A65125BEF9FC9FD359B55.png


3. Add App to your Firebase Project.

2640091000001768541.20210409084720.96247000358205895205279842978609:50520420080459:2800:5F94C2564F9145E317A330712979B8A0041BB58CE2C7E3E35B29F626B65128A0.png


4. Download Configuration file.

2640091000001768541.20210409084735.51567527399266151320513908906439:50520420080459:2800:13EFFF27AD8C1B1E7600A0E9303F3118294E5185E1755376847ECD396A7ED07A.png


5. Navigate to Google Tag Manager Console.

Create New Tag, then click Submit.

2640091000001768541.20210409084758.40246191685114930958489680936137:50520420080459:2800:2C81EB557AB4BCDB3F3B5A47ACBA71836059AE983BAC165852AD14EF444DA432.png


6. Choose tag type.

2640091000001768541.20210409084947.39465230826496841928246989981351:50520420080459:2800:784D59432A7F50BDAF68DB088D41C14D7D46A62960C9C75A80EBCF9401316BF8.png


7. Choose a Variable

2640091000001768541.20210409085004.81272415790080293423775464079202:50520420080459:2800:DA29CE221B3E99FC5E92D6970F26AE8A2E24D0A0042CEDF4BE87E7C7F8DAA83F.png


8. Tag Configure.

2640091000001768541.20210409085016.33410858085165231981896684225874:50520420080459:2800:3B2AA8FE599A3C70B6A8123BFA1441E35CA8CB07CE7982FD1C668DA13335D5E1.png


9. Publish Tag

2640091000001768541.20210409085030.47240899622691141733315371175626:50520420080459:2800:59495624BA70D7CAB576EA32C8109DF43D08C447AEC0BC69D6781E9D23E9D9FE.png


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

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

2640091000001768541.20210409085040.92973876534504577346275136068936:50520420080459:2800:89049A44C544676471BF4932BD341FD31C6A25BFF393B25448D89A675542FEAC.png


App Development


1. Create A New Project.

2640091000001768541.20210409084029.04699513926336798541792030196835:50520420080459:2800:2C502D42CE316CE870B57D30D8527D7BC9471ED867627E2AD53A748FC5D847CD.png


2. Configure Project Gradle.
Java:
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.
Java:
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:
<?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.
Java:
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:
<?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.

2640091000001768541.20210409084544.70462808350959985366358640456819:50520420080459:2800:2AABBDF80C761DB3575FE473AB2DB71A192403F76A0B2611C1A490450828D538.png


2. Huawei Analytics Overview.

2640091000001768541.20210409084600.10367879664391777393244227878301:50520420080459:2800:13C3F3F0EB069CC0CE6DFEAAEC70021FBCB5DE6562D3D6EFFC23A34933D3DE67.png


3. App Result.

2640091000001768541.20210409085331.80091321494444867720494422416832:50520420080459:2800:C387BF614EB5D6AFC30E5AA7BD823DFC0CD215392465B3ECC70A879D188DE6A3.png
2640091000001768541.20210409085347.59733191326426344848541099180769:50520420080459:2800:0EB07C5FBA7B96F34572D1A371A7FF77229896599A510F101B93526762B8EB09.png
2640091000001768541.20210409085358.40033690184835621593502737424187:50520420080459:2800:3B7DCC979AD2E4E6807AAC4E6ED5C5861C7B5FE172C250ED7B2F07D0E631F24A.png




2640091000001768541.20210409085417.10146391051580305129274020559301:50520420080459:2800:5BE002855F40EBEEE51CEE094D051A66724B039B44480EF47AFBEBA9727FE69D.png
2640091000001768541.20210409085445.37252759112216041188482293785010:50520420080459:2800:F8D02FFBBA6FF4C293A47DFB1C293E31E68E3ADB4A0E0B01272AF4A65BCC30B3.png
2640091000001768541.20210409085457.79325134592190644710625862607789:50520420080459:2800:20B3D96FD912DF44AA9701290446B0ADA248BB91B80DD064E7352223F22FBE9E.png


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
 
Our Apps
Get our official app!
The best way to access XDA on your phone
Nav Gestures
Add swipe gestures to any Android
One Handed Mode
Eases uses one hand with your phone