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。
- 如果沒有開啟的專案,則請在歡迎頁面中選取「Start a new Flutter ap」。如果沒有的話,請依序選取「File」(檔案) >「新增 >新增 Flutter 專案。
- 選取「Flutter Application」做為專案類型,然後點選「Next」。
- 確認 Flutter SDK 路徑指定 SDK 的位置。(如果文字欄位空白,請選取「Install SDK」)。
- 輸入專案名稱,然後點選「下一步」。
- 使用 Android Studio 建議的預設套件名稱,然後按一下「Next」。
- 按一下 [完成]。
- 等待 Android Studio 安裝 SDK 並建立專案。
3. 建立及設定 Firebase 專案
如要開始使用 Firebase,請建立並設定 Firebase 專案。
建立 Firebase 專案
- 登入 Firebase。
在 Firebase 控制台中,按一下「新增專案」(或「建立專案」),然後將 Firebase 專案命名為 Firebase-Flutter-Ads 或任意名稱。
- 點選專案建立選項。當系統顯示提示時,請接受 Firebase 條款。您需要為這項專案啟用 Google Analytics,因為您需要使用 Google Analytics 事件來追蹤動作事件及分析轉換。
如要進一步瞭解 Firebase 專案,請參閱「瞭解 Firebase 專案」一文。
4. 平台專屬的 Firebase 設定 (Android)
設定 Android
- 在 Firebase 控制台中,選取左側導覽列的「專案總覽」,然後按一下「開始將 Firebase 新增至應用程式」下方的「Android」按鈕。
下一個畫面會顯示對話方塊。
- 提供的重要值是 Android 套件名稱,您將透過下列步驟取得。
- 在 Flutter 應用程式目錄中,開啟
android/app/src/main/AndroidManifest.xml
檔案。 - 在
manifest
元素中,找出package
屬性的字串值。這個值是 Android 套件名稱 (格式為com.yourcompany.yourproject
)。複製這個值。 - 在 Firebase 對話方塊中,將複製的套件名稱貼到
Android package name
欄位中。 - 除非您打算使用 Google 登入或 Firebase Dynamic Links (請注意,這些金鑰並不屬於本程式碼研究室),否則您不需要使用 SHA-1 金鑰。如果您打算從 Google Play 匯入「
in_app_purchase
」資料,稍後必須設定金鑰。 - 按一下「Register App」。
- 繼續透過 Firebase 操作,請按照操作說明下載設定檔
google-services.json
。
- 前往 Flutter 應用程式目錄,將剛才下載的
google-services.json
檔案移至android/app
目錄。 - 返回 Firebase 控制台,略過其餘步驟,返回 Firebase 控制台主頁面。
- 最後,您需要使用 Google 服務 Gradle 外掛程式來讀取 Firebase 產生的
google-services.json
檔案。 - 在 IDE 或編輯器中開啟
android/app/build.gradle
,然後在檔案中的「最後一行」中加入下列程式碼:
apply plugin: 'com.google.gms.google-services'
- 開啟
android/build.gradle
,然後在buildscript
標記中新增依附元件:
buildscript {
repositories {
// ...
}
dependencies {
// ...
Classpath 'com.google.gms:google-services:4.3.3'
}
}
- 如果應用程式仍在執行,請關閉並重新建構,允許 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
檔案,當中包含提取至專案的所有套件及其版本號碼。
在 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 進一步瞭解目標對象,進而提升應用程式廣告活動。
- 按一下「專案總覽」旁邊的按鈕,前往「Firebase 設定」。
- 在「整合」分頁中,您會看到「Google Ads」和「連結」按鈕。依序點選「連結」和「繼續」。
- 選擇 Google Ads 帳戶。
Firebase 就完成了。
前往 Google Ads。
- 登入,然後前往 [工具與]設定 >測量 >轉換,將自訂事件匯入為轉換。
- 按一下「+」按鈕新增轉換動作。
- 選擇「Google Analytics 4 資源 (Firebase)」,然後按一下「繼續」。
- 您可以查看所有標示為轉換的 Analytics 事件。找出先前導入的
clicked_counter
事件。
- 勾選動作,然後依序點選「匯入」和「繼續」。
將「clicked_counter
」設為轉換動作後,就能推出動作廣告活動,鎖定可能觸發 clicked_counter
事件超過 5 次的使用者。
8. 推出包含匯入事件的影片行動廣告活動
- 前往目前帳戶的 [廣告活動] 分頁,然後按一下 + 按鈕建立新的廣告活動。按一下「[新增廣告活動]」,然後點選「繼續」。
- 利用「應用程式安裝」選項推出應用程式宣傳廣告活動。
- 輸入應用程式名稱、套件名稱或發布商來尋找應用程式。
- 在「出價」部分的下拉式選單中,選取「應用程式內動作」。
- 在提供的清單中找出自訂事件。設定「目標單次操作出價」,然後完成任何其他選項。
- 完成廣告活動設定。
9. 恭喜
恭喜,您已成功整合 Firebase 和 Google Ads!這有助您運用 Firebase 匯入的事件提高廣告活動成效。
您已瞭解
- 如何設定 Firebase Analytics for Flutter
- 如何在 Flutter 應用程式中使用 Firebase Analytics 記錄自訂事件。
- 如何匯入事件並用於動作廣告活動。