gtm 0.0.7

Flutter plugin for Google Tag Manager, A solution that allows you to manage various tags such as analysis, advertising performance measurement, and affiliate marketing tracking.

gtm is a google-tag-manager plugin.

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,
  },
);

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

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

Android

You can find more configuration details at GTM Android Documentation

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

Note: GTM-xxxxxxx.json is used when setting up GTM on first launch of the app and when the app is offline. Otherwise, the latest version of the GTM container is automatically reflected.

How to use

Push event

// Push event
gtm.push(
  'test',
  parameters: {
    'user_no': 912342,
  },
);

Parameter value can be String, bool, num.

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,
  },
);

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.