GitLocker: The Coding Marketplace

Description:

gtm

Gtm is a google-tag-manager plugin.
This package is not an official package.
Table of contents #

Example
Configuration

Firebase Analytics
iOS
Android

How to use

Push event
CustomTag

Example #
import 'package:gtm/gtm.dart';

// Get instance
final gtm = Gtm.instance;

// Set CustomTagType
gtm.setCustomTagTypes(
[
CustomTagType(
'amplitude',
handler: (eventName, parameters) {
print('amplitude!');
print(eventName);
print(parameters);
},
),
],
);

// Push event
gtm.push(
'test',
parameters: {
'user_no': 912342,
},
);
copied to clipboard
Configuration #
Firebase Analytics #

To use this plugin you need to set Firebase Analytics up in your project first.
Because firebase analytics is playing the role of datalayer in the app.
For Firebase settings, you can check to the Firebase documentation.
iOS #
You can find more configuration details at GTM iOS Documentation

Create iOS GTM Container (https://tagmanager.google.com/?/home)
Download Container version file(GTM-xxxxxxx.json)
Put it in $Project/ios/container
In Xcode, select File - Add files to Runner
Select container folder with Create folder references option

Android #
You can find more configuration details at GTM Android Documentation

Create Android GTM Container (https://tagmanager.google.com/?/home)
Download Container version file(GTM-xxxxxxx.json)
Put it in $Project/android/app/src/main/assets/containers (not container)

Note: GTM-xxxxxxx.json is used to set initial tag configurations until the first time a container is downloaded. Once the app has connected to the internet and downloaded a container, it will never use the default container again. Applications periodically check for container updates, typically every 12 hours.

How to use #
Push event #
// Push event
gtm.push(
'test',
parameters: {
'user_no': 912342,
},
);
copied to clipboard
Parameter value can be String, bool, int, double, List, Map.
Since ga4 is used to push events, ga4 events are automatically triggered(unless you ignore it).
CustomTag #
Sometimes the tags provided by default in gtm are not enough. In this case, custom tag is used. If you want to use a custom tag, you must create the tag in the container with the following rules.

Set Tag Type to Function Call
Set Class Name/Path

CustomTag - iOS
kr.heewook.gtm_android.CustomTag - Android

Set tagType - this corresponds to the name property of the CustomTagType class

You can refer to the following example.
iOS example #

Android example #

Attached Trigger #

// Set CustomTagType
gtm.setCustomTagTypes(
[
CustomTagType(
'amplitude',
handler: (eventName, parameters) {
print('amplitude!');
// will print 'test'
print(eventName);
print(parameters);
},
),
],
);

// Push event
gtm.push(
'test',
parameters: {
'user_no': 912342,
},
);
copied to clipboard
Now, you can listen to the CustomTag you want by passing the list of CustomTagType to the setCustomTagTypes method.
In the CustomTagType, specify the tagType set in the container earlier, and use the eventName and parameters in the handler.