使用 Google Analytics 自訂事件和 Flutter 推出 Google Ads 廣告活動

1. 簡介

上次更新時間：2021 年 1 月 25 日

建構項目

在本程式碼研究室中，您將瞭解如何使用 GA4F 導入自訂事件，並透過 Google Ads for Flutter 應用程式推出行動廣告活動。

我們會使用預設的 Flutter 應用程式搭配簡易的計數器小工具。我們會向有可能點擊計數器小工具的潛在使用者放送應用程式廣告。

課程內容

• 如何在 Flutter 中初始化 GA4F (Google Analytics for Firebase)
• 如何建立自訂事件和參數
• 如何將 Firebase 事件匯入 Google Ads
• 如何利用自訂事件推出行動廣告活動

軟硬體需求

• Android Studio 3.6 以上版本
• Xcode (適用於 iOS 支援)
• Firebase 帳戶
• Google Ads 帳戶

2. 啟動新的 Flutter 專案

建立簡易的範本式 Flutter 應用程式。您將在本程式碼研究室中修改這個範例應用程式。

啟動 Android Studio。

注意：如果您在 IDE 中找不到「New Flutter Project」選項，請確認是否已安裝 Flutter 和 Dart 適用的外掛程式。

1. 如果沒有開啟的專案，則請在歡迎頁面中選取「Start a new Flutter ap」。如果沒有的話，請依序選取「File」(檔案) >「新增 >新增 Flutter 專案。
2. 選取「Flutter Application」做為專案類型，然後點選「Next」。
3. 確認 Flutter SDK 路徑指定 SDK 的位置。(如果文字欄位空白，請選取「Install SDK」)。
4. 輸入專案名稱，然後點選「下一步」。
5. 使用 Android Studio 建議的預設套件名稱，然後按一下「Next」。
6. 按一下 [完成]。
7. 等待 Android Studio 安裝 SDK 並建立專案。

3. 建立及設定 Firebase 專案

如要開始使用 Firebase，請建立並設定 Firebase 專案。

建立 Firebase 專案

1. 登入 Firebase。

在 Firebase 控制台中，按一下「新增專案」(或「建立專案」)，然後將 Firebase 專案命名為 Firebase-Flutter-Ads 或任意名稱。

2. 點選專案建立選項。當系統顯示提示時，請接受 Firebase 條款。您需要為這項專案啟用 Google Analytics，因為您需要使用 Google Analytics 事件來追蹤動作事件及分析轉換。

如要進一步瞭解 Firebase 專案，請參閱「瞭解 Firebase 專案」一文。

4. 平台專屬的 Firebase 設定 (Android)

設定 Android

1. 在 Firebase 控制台中，選取左側導覽列的「專案總覽」，然後按一下「開始將 Firebase 新增至應用程式」下方的「Android」按鈕。

下一個畫面會顯示對話方塊。

2. 提供的重要值是 Android 套件名稱，您將透過下列步驟取得。

提示：如要進一步瞭解套件和應用程式 ID，請參閱「設定應用程式 ID」一文。

3. 在 Flutter 應用程式目錄中，開啟 android/app/src/main/AndroidManifest.xml 檔案。
4. 在 manifest 元素中，找出 package 屬性的字串值。這個值是 Android 套件名稱 (格式為 com.yourcompany.yourproject)。複製這個值。
5. 在 Firebase 對話方塊中，將複製的套件名稱貼到 Android package name 欄位中。
6. 除非您打算使用 Google 登入或 Firebase Dynamic Links (請注意，這些金鑰並不屬於本程式碼研究室)，否則您不需要使用 SHA-1 金鑰。如果您打算從 Google Play 匯入「in_app_purchase」資料，稍後必須設定金鑰。
7. 按一下「Register App」。
8. 繼續透過 Firebase 操作，請按照操作說明下載設定檔 google-services.json。

9. 前往 Flutter 應用程式目錄，將剛才下載的 google-services.json 檔案移至 android/app 目錄。
10. 返回 Firebase 控制台，略過其餘步驟，返回 Firebase 控制台主頁面。
11. 最後，您需要使用 Google 服務 Gradle 外掛程式來讀取 Firebase 產生的 google-services.json 檔案。
12. 在 IDE 或編輯器中開啟 android/app/build.gradle，然後在檔案中的「最後一行」中加入下列程式碼：

apply plugin: 'com.google.gms.google-services'

13. 開啟 android/build.gradle，然後在 buildscript 標記中新增依附元件：

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

14. 如果應用程式仍在執行，請關閉並重新建構，允許 Gradle 安裝依附元件。

您已完成 Android 適用的 Flutter 應用程式設定！如果是 iOS，可以參考本程式碼研究室 ( 瞭解 Firebase for Flutter)

5. 在 Flutter 中設定 Firebase Analytics

在這個步驟中，您將開始使用 Firebase Analytics 套件「firebase_analytics」，其中包含 Firebase Analytics 功能。

這個 pubspec 檔案會管理 Flutter 應用程式的資產。在 pubspec.yaml 中，將 firebase_analytics: ^6.2.0 (firebase_analytics 6.2.0 以上版本) 附加至依附元件清單：

dependencies: 
   flutter: 
      sdk: flutter 
   cupertino_icons: ^0.1.2 
   firebase_analytics: ^6.2.0   # add this line

在 Android Studio 的編輯器檢視畫面中查看發布商規格時，按一下「Packages get」。這樣就可以將套件提取到專案中。控制台中應會顯示以下內容：

flutter packages get 
Running "flutter packages get" in startup_namer... 
Process finished with exit code 0

執行 Pub get 後，系統還會自動產生 pubspec.lock 檔案，當中包含提取至專案的所有套件及其版本號碼。

注意：如果是特定 Firebase 版本，首次初始化 FirebaseAnalytics 類別時會顯示 java.lang.IllegalArgumentException: Service not registered (請參閱 GitHub 問題 1662).

在 lib/main.dart 中匯入新套件：

import 'package:firebase_analytics/firebase_analytics.dart';

在 MyApp 類別中，呼叫建構函式來啟動 FirebaseAnalytics 物件。

class MyApp extends StatelessWidget {
 static FirebaseAnalytics analytics = FirebaseAnalytics();
   ...
}

您現在可以開始觸發一些自訂事件記錄了！

6. 透過 Firebase 數據分析記錄自訂事件

如果您在 Flutter 應用程式中產生新範本，就會看到 _counter 變數，以及預設 State 類別內的 _incrementCounter() 方法。現在，當您因點選累加按鈕或點選按鈕超過五次，而對活動毫無興趣的使用者來說，您想要記錄自訂事件。之後，我們會推出應用程式廣告活動，藉此吸引潛在的熱心使用者

首先，我們要將初始化的分析物件傳遞至 Stateful 小工具。首先，在 MyHomePage 建構函式中新增數據分析參數。

MyHomePage({Key key, this.title, this.analytics}) : super(key: key);

此外，您也必須在呼叫建構函式時加入 Analytics 參數。

home: MyHomePage(
   title: 'Flutter Demo Home Page',
   analytics: analytics,
),

現在，您可以使用 logEvent() 方法輕鬆記錄事件。新增方法，並遞增 _counter 變數。

void _incrementCounter() {
 setState(() {
   _counter++;

   //add this
   if(_counter > 5) { 
     widget.analytics.logEvent(name: "clicked_counter"); 
   }

 });
}

您的應用程式現在可以開始觸發自訂事件記錄了！

您也可以使用預先建立的方法觸發事件。

現在一切準備就緒。在 Android Studio 中執行「main.dart」。

(選用) 使用參數將其他資訊傳送至 Firebase Analytics

您可以透過參數傳送其他資訊。您可以為 Analytics 報表中登錄自訂參數。這些資料還可用來做為目標對象定義中的篩選器，並套用至每份報表。如果您的應用程式已連結至 BigQuery 專案，則在 BigQuery 中也可以找到自訂參數 (請參閱「適用於 Firebase 的 BigQuery Export」一文)。

我們目前在這裡將 _counter 值設為參數。

void _incrementCounter() {
 setState(() {
   _counter++;

   if(_counter > 5) {
     widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
   }
 });
}

檢查事件並偵錯

幾小時後，你就能在 Firebase 控制台中查看記錄的事件。只要在 Firebase 控制台的 Analytics 專區中按一下「事件」分頁標籤即可。只要按一下事件，也可以查看事件 clicked_counter 中的值。

將「標示為轉換」切換按鈕向右滑動，將 clicked_counter 標示為轉換。

如果事件位於「轉換」分頁中，表示已成功將事件標示為轉換。Google Ads 現在可以從 Firebase 匯入這個事件了。

如要偵錯，請使用 Firebase DebugView。詳情請參閱偵錯事件。

7. 在 Google Ads 中匯入數據分析事件

Firebase-Flutter 設定完成後，您就可以推出含有動作事件的應用程式廣告活動。首先，請將 Firebase 連結至 Google Ads。只要將 Firebase 連結至 Google Ads，應用程式廣告活動就能匯入 Firebase 事件。這也有助 Google Ads 進一步瞭解目標對象，進而提升應用程式廣告活動。

1. 按一下「專案總覽」旁邊的按鈕，前往「Firebase 設定」。
2. 在「整合」分頁中，您會看到「Google Ads」和「連結」按鈕。依序點選「連結」和「繼續」。

3. 選擇 Google Ads 帳戶。

注意：如果目標事件未標示為轉換事件，Google Ads 就無法匯入。請確認事件已正確標示為轉換。

Firebase 就完成了。

前往 Google Ads。

1. 登入，然後前往 [工具與]設定 >測量 >轉換，將自訂事件匯入為轉換。
2. 按一下「+」按鈕新增轉換動作。

3. 選擇「Google Analytics 4 資源 (Firebase)」，然後按一下「繼續」。

4. 您可以查看所有標示為轉換的 Analytics 事件。找出先前導入的 clicked_counter 事件。

5. 勾選動作，然後依序點選「匯入」和「繼續」。

將「clicked_counter」設為轉換動作後，就能推出動作廣告活動，鎖定可能觸發 clicked_counter 事件超過 5 次的使用者。

8. 推出包含匯入事件的影片行動廣告活動

重要事項：如要順利推出應用程式廣告活動，您必須在 Google Play 取得正式版應用程式。不過，如果尚未準備好發布內容，可以暫時略過這個步驟。

6. 前往目前帳戶的 [廣告活動] 分頁，然後按一下 + 按鈕建立新的廣告活動。按一下「[新增廣告活動]」，然後點選「繼續」。
7. 利用「應用程式安裝」選項推出應用程式宣傳廣告活動。

8. 輸入應用程式名稱、套件名稱或發布商來尋找應用程式。
9. 在「出價」部分的下拉式選單中，選取「應用程式內動作」。
10. 在提供的清單中找出自訂事件。設定「目標單次操作出價」，然後完成任何其他選項。

11. 完成廣告活動設定。

9. 恭喜

恭喜，您已成功整合 Firebase 和 Google Ads！這有助您運用 Firebase 匯入的事件提高廣告活動成效。

您已瞭解

• 如何設定 Firebase Analytics for Flutter
• 如何在 Flutter 應用程式中使用 Firebase Analytics 記錄自訂事件。
• 如何匯入事件並用於動作廣告活動。