Flutter谷歌标签管理器插件gtm的使用

目录

• 示例
• 配置
  • iOS, Android
    • Firebase Analytics
    • iOS
    • Android
  • Web
• 如何使用
  • iOS, Android
    • 推送事件
    • 自定义标签
  • Web
    • 推送事件
    • 自定义标签

示例

以下是一个完整的Flutter应用示例，展示了如何使用gtm插件。

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:gtm/gtm.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    super.initState();
    try {
      final gtm = Gtm.instance
        ..setCustomTagTypes([
          CustomTagType(
            'amplitude',
            handler: (eventName, parameters) {
              print('amplitude!');
              print(eventName);
              print(parameters);
            },
          ),
        ]);
      gtm.push(
        'test',
        parameters: {
          'user_no': 912342,
        },
      );
      gtm.push(
        'readCase',
        parameters: {
          'user_no': 912342,
          'user_type': 2,
        },
      );
      gtm.push(
        'buyEduCamp',
        parameters: {
          'user_no': 912342,
          'price': 10000.0,
        },
      );
    } on PlatformException {
      print('exception occurred!');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Container(),
    );
  }
}

配置

iOS, Android

Firebase Analytics

要在移动平台上使用此插件，您需要首先在项目中设置Firebase Analytics。因为firebase analytics扮演着datalayer的角色。有关Firebase设置，请参阅Firebase文档。

iOS

更多配置详情请参考GTM iOS 文档。

1. 创建iOS GTM容器
2. 下载容器版本文件(GTM-xxxxxxx.json)
3. 将其放入$Project/ios/container
4. 在Xcode中，选择File - Add files to Runner
5. 选择container文件夹，并选择Create folder references选项

Android

更多配置详情请参考GTM Android 文档。

1. 创建Android GTM容器
2. 下载容器版本文件(GTM-xxxxxxx.json)
3. 将其放入$Project/android/app/src/main/assets/containers（不是container）

**注意：**GTM-xxxxxxx.json用于设置初始标签配置，直到第一次下载容器。一旦应用程序连接到互联网并下载了容器，它将不再使用默认容器。应用程序通常每隔12小时检查一次容器更新。

Web

您需要按照以下步骤在web项目中设置datalayer。

1. 创建Web GTM容器
2. 将代码片段添加到web/index.html

如何使用

iOS, Android

推送事件

// 推送事件
gtm.push(
  'test',
  parameters: {
    'user_no': 912342,
  },
);

参数值可以是String、bool、int、double、List、Map。

由于使用了ga4来推送事件，因此会自动触发ga4事件（除非您忽略了它）。

自定义标签

有时，默认提供的标签不足以满足需求。在这种情况下，可以使用自定义标签。如果要使用自定义标签，则必须按照以下规则在容器中创建标签。

• 设置标签类型为Function Call
• 设置类名/路径
  • CustomTag - iOS
  • kr.heewook.gtm_android.CustomTag - Android
• 设置tagType - 这对应于CustomTagType类的名称属性

您可以参考以下示例。

iOS 示例

Android 示例

附加触发器

// 设置自定义标签类型
gtm.setCustomTagTypes(
  [
    CustomTagType(
      'amplitude',
      handler: (eventName, parameters) {
        print('amplitude!');
        // 将打印 'test'
        print(eventName);
        print(parameters);
      },
    ),
  ],
);

// 推送事件
gtm.push(
  'test',
  parameters: {
    'user_no': 912342,
  },
);

现在，您可以通过将CustomTagType列表传递给setCustomTagTypes方法来监听想要的自定义标签。

在CustomTagType中，指定在容器中设置的tagType，并在处理器中使用eventName和parameters。

Web

推送事件

// 推送事件
gtm.push(
  'test',
  parameters: {
    'user_no': 912342,
  },
);

参数值可以是String、bool、int、double、List、Map。

自定义标签

与iOS和Android平台不同，您需要在web gtm容器内设置标签，而不是在代码中。

如果找不到所需的标签并且不在画廊中，您可以通过自定义HTML自行实现。

通过以上内容，您应该能够顺利地在Flutter项目中集成和使用gtm插件。如果有任何问题或需要进一步的帮助，请随时提问！