Flutter Facebook事件集成插件facebook_event的使用

Flutter Facebook事件集成插件facebook_event的使用

pub package

Flutter 插件用于 Facebook 事件 和分析。

安装

首先,您需要在 Facebook 开发者平台创建一个应用:https://developers.facebook.com/

获取您的应用 ID(以下称为 [APP_ID])。

Android

阅读 “为 Android 应用程序开始使用应用程序事件” 教程,并特别注意步骤 2,在 /app/res/values/strings.xml 文件(或 debugrelease 构建口味文件)中添加以下内容:

之后,将该字符串资源引用添加到您的主 <AndroidManifest.xml> 文件中,直接在 <application> 标签下。

<meta-data
  android:name="com.facebook.sdk.ApplicationId"
  android:value="your_facebook_app_id_here" />

示例代码:

<!-- https://github.com/faisal-kabir/facebook_event/blob/main/example/android/app/src/main/AndroidManifest.xml -->

在您的 Android 项目中添加以下代码到 MainActivity.kt

setAutoLogAppEventsEnabled(true)
FacebookSdk.setAutoInitEnabled(true)
FacebookSdk.fullyInitialize()
setAdvertiserIDCollectionEnabled(true)
FacebookSdk.setIsDebugEnabled(true);
FacebookSdk.addLoggingBehavior(LoggingBehavior.APP_EVENTS);

示例代码:

<!-- https://github.com/faisal-kabir/facebook_event/blob/main/example/android/app/src/main/kotlin/com/faisal/facebook_event/facebook_event_example/MainActivity.kt -->

iOS

阅读 “为 iOS 应用程序开始使用应用程序事件” 教程,并特别注意步骤 4,通过以源代码形式打开 info.plist 并添加以下内容:

如果您的代码中没有 CFBundleURLTypes,则将其添加在最终的 </dict> 元素之前:

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fb[APP_ID]</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>[APP_ID]</string>
<key>FacebookDisplayName</key>
<string>[APP_NAME]</string>

如果您的代码中已包含 CFBundleURLTypes,则插入以下内容:

<array>
 <dict>
 <key>CFBundleURLSchemes</key>
 <array>
   <string>fb[APP_ID]</string>
 </array>
 </dict>
</array>
<key>FacebookAppID</key>
<string>[APP_ID]</string>
<key>FacebookDisplayName</key>
<string>[APP_NAME]</string>

示例代码:

<!-- https://github.com/faisal-kabir/facebook_event/blob/main/example/ios/Runner/Info.plist -->

在您的 iOS 项目中添加以下代码到 AppDelegate.swift

ApplicationDelegate.shared.application(application, didFinishLaunchingWithOptions: launchOptions)
AppEvents.activateApp()
AppEvents.logEvent(AppEvents.Name.init(rawValue: "Opened App Main VC"))

示例代码:

<!-- https://github.com/faisal-kabir/facebook_event/blob/main/example/ios/Runner/AppDelegate.swift -->

获取 Android 哈希密钥

final facebookEvent = FacebookEvent();
String hashKey='Null';

[@override](/user/override)
void initState() {
    // TODO: implement initState
    super.initState();
    if(Platform.isAndroid)
      getHashKey();
}

void getHashKey()async{
    hashKey= await facebookEvent.getAndroidHashKey();
    print(hashKey);
}

所有事件

final facebookEvent = FacebookEvent();

// 获取 Facebook 应用程序 ID
facebookEvent.getApplicationId();

/// 当应用程序被激活时记录,通常在 AppDelegate 的 applicationDidBecomeActive 中。
facebookEvent.logActivatedApp();

// 当应用程序被停用时记录此事件。
facebookEvent.logDeactivatedApp();

// 在用户同意后重新启用应用程序事件的自动记录
facebookEvent.setAutoLogAppEventsEnabled(true);

// 提交用户详细信息
facebookEvent.setUserData(
  email:'email',
  firstName:'first name',
  lastName:'last name',
  phone:'phone number',
  dateOfBirth:'dob',
  gender:'gender',
  city:'city',
  state:'state',
  zip:'zip',
  country:'country',
);

// 记录自定义事件
facebookEvent.logEvent(
    name: 'name',
    body: {'key':'value'},
    valueToSum: 0
);

// 记录联系人详情
facebookEvent.logContactEvent(contact: 'number');

// 用户查看了应用程序中的某种内容。
facebookEvent.logViewContent(
  content: {'key':'value'},
  id: 'id',
  type: 'type'
);

// 用户完成了购买。指定货币。
facebookEvent.logPurchase(
  amount: 0,
  currency: 'USD',
  body: {'key':'value'}
);

// 用户在游戏中达到了某个等级。
facebookEvent.logAchieveLevelEvent(
  level: 'level'
);

// 用户输入了支付信息。
facebookEvent.logAddPaymentInfoEvent(
  success: true
);

// 用户将商品添加到了购物车。传递的 valueToSum 应该是商品的价格。
facebookEvent.logAddToCartEvent(
  price:0,
  contentData: 'contentData',
  contentType: 'contentType',
  contentId: 'contentId',
  currency: 'USD'
);

// 用户完成了应用程序注册。
facebookEvent.logCompleteRegistrationEvent(
  registrationMethod:'registrationMethod',
  name: 'name',
  currency: 'USD'
);

// 用户进入了结账流程。传递的 valueToSum 应该是购物车中的总价。
facebookEvent.logInitiateCheckoutEvent(
  totalPrice:0,
  contentData: 'contentData',
  contentType: 'contentType',
  contentId: 'contentId',
  currency: 'USD',
  numItems: 1,
  paymentInfoAvailable: true
);

// 用户对应用程序中的某项进行了评分。传递的 valueToSum 应该是数值评分。
facebookEvent.logRateEvent(
  ratingGiven:5,
  contentData: 'contentData',
  contentType: 'contentType',
  contentId: 'contentId',
  maxRatingValue: 5
);

示例代码

import 'dart:io';

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:facebook_event/facebook_event.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static FacebookEvent? facebookEvent;
  String hashKey='Null';

  _MyAppState(){
    facebookEvent = FacebookEvent();
  }

  [@override](/user/override)
  void initState() {
    // TODO: implement initState
    super.initState();
    if(Platform.isAndroid)
      getHashKey();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: Text("记录 AchieveLevelEvent"),
                onPressed: () {
                  facebookEvent!.logAchieveLevelEvent(
                    level: 'Payment',
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  void getHashKey()async{
    hashKey = (await facebookEvent!.getAndroidHashKey())!;
    print(hashKey);
  }
}

更多关于Flutter Facebook事件集成插件facebook_event的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Facebook事件集成插件facebook_event的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中集成并使用facebook_event插件的示例代码。这个插件通常用于向Facebook发送事件,以便在Facebook Analytics中进行分析。请注意,实际使用时,你需要替换示例中的占位符值(如Facebook应用ID)为你自己的值。

第一步:添加依赖

首先,在你的pubspec.yaml文件中添加facebook_event插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  facebook_event: ^0.1.0  # 请检查最新版本号并替换

然后运行flutter pub get来安装依赖。

第二步:配置Facebook应用

确保你已经在Facebook开发者平台上创建了一个应用,并获取了Facebook应用ID。你还需要在Facebook应用中配置Android和iOS的相关设置,包括添加必要的包名和应用的哈希键。

第三步:Android配置

android/app/src/main/AndroidManifest.xml中添加以下权限和元数据:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <!-- 其他配置 -->

    <application
        android:name=".MyApplication"  <!-- 确保你有一个自定义的Application类 -->
        ... >
        <meta-data
            android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id"/>
        <activity android:name="com.facebook.FacebookActivity"
            android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name" />
        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>
    </application>

    <!-- 其他配置 -->

</manifest>

android/app/src/main/res/values/strings.xml中添加Facebook应用ID:

<resources>
    <string name="facebook_app_id">你的Facebook应用ID</string>
    <string name="fb_login_protocol_scheme">fb你的Facebook应用ID</string>
</resources>

第四步:iOS配置

ios/Runner/Info.plist中添加以下配置:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fb你的Facebook应用ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>你的Facebook应用ID</string>
<key>FacebookDisplayName</key>
<string>你的应用名称</string>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

第五步:初始化插件并发送事件

在你的Flutter项目中,初始化facebook_event插件并发送事件:

import 'package:flutter/material.dart';
import 'package:facebook_event/facebook_event.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Facebook Event Integration'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // 初始化Facebook SDK(可选,具体取决于插件的实现)
    // FacebookSdk.sdkInitialize(appId: "你的Facebook应用ID");

    // 发送事件示例
    sendFacebookEvent();
  }

  void sendFacebookEvent() {
    // 创建并发送事件
    FacebookEvent.logEvent(
      name: 'ViewContent',
      parameters: {
        'content_type': 'product',
        'content_ids': ['12345'],
        'currency': 'USD',
        'value': 50.0,
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Facebook Event Sent!'),
        // 你可以添加按钮或其他UI元素来触发事件发送
      ],
    );
  }
}

请注意,上述代码示例中的FacebookEvent.logEvent方法调用是基于假设的插件API。实际使用时,请查阅facebook_event插件的官方文档或源代码以获取正确的API调用方式。

此外,由于Facebook SDK和插件可能会更新,因此建议始终查阅最新的官方文档和插件仓库以获取最新的配置和示例代码。

回到顶部