gtm 1.0.0

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.

This package is not an official package.

Table of contents

• Example
• Configuration
  • iOS, Android
  • Web
• How to use
  • iOS, Android
    • Push event
    • CustomTag
  • Web
    • Push event
    • CustomTag

Example

import 'package:gtm/gtm.dart';

// Get instance
final gtm = Gtm.instance;

// Set CustomTagType
// Only work on ios and android platforms.
// On web platform It will throw an UnimplementedError.
gtm.setCustomTagTypes(
  [
    CustomTagType(
      'amplitude',
      handler: (eventName, parameters) {
        print('amplitude!');
        print(eventName);
        print(parameters);
      },
    ),
  ],
);

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

Configuration

iOS, Android

Firebase Analytics

To use this plugin on mobile, you need to set Firebase Analytics up in your project first. Because firebase analytics is playing the role of datalayer.

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
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
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 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.

Web

You need to set datalayer in your web project by following the steps below.

1. Create Web GTM Container
2. Add code snippet to web/index.html

How to use

iOS, Android

Push event

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

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

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.

Web

Push event

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

Parameter value can be String, bool, int, double, List, Map.

CustomTag

Unlike iOS and Android platforms, you need to set tags inside the web gtm container, not in code.

If the tag you are looking for is not provided by default and is not in the gallery, you can implement it yourself through Custom Html.