การเปิดตัวแคมเปญ Google Ads ด้วยเหตุการณ์ที่กำหนดเองของ Google Analytics และ Flutter

1. บทนำ

อัปเดตล่าสุด 25-01-2021

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้ศึกษาวิธีติดตั้งใช้งานเหตุการณ์ที่กำหนดเองด้วย GA4F และเปิดตัวแคมเปญเพื่อกระตุ้นการกระทำผ่าน Google Ads สำหรับแอป Flutter

เราจะใช้แอป Flutter เริ่มต้นที่มีวิดเจ็ตตัวนับแบบง่าย เราจะโฆษณาแอปของเราต่อผู้มีโอกาสเป็นผู้ใช้ ซึ่งมีแนวโน้มที่จะคลิกวิดเจ็ตตัวนับ

สิ่งที่คุณจะได้เรียนรู้

• วิธีเริ่มต้น GA4F (Google Analytics สำหรับ Firebase) ใน Flutter
• วิธีสร้างเหตุการณ์และพารามิเตอร์ที่กำหนดเอง
• วิธีนำเข้าเหตุการณ์จาก Firebase ไปยัง Google Ads
• วิธีเปิดตัวแคมเปญเพื่อกระตุ้นการกระทำด้วยเหตุการณ์ที่กําหนดเอง

สิ่งที่คุณต้องมี

• Android Studio 3.6 ขึ้นไป
• Xcode (สำหรับการสนับสนุน iOS)
• บัญชี Firebase
• บัญชี Google Ads

2. เริ่มโปรเจ็กต์ Flutter ใหม่

สร้างแอป Flutter ที่ใช้เทมเพลตง่าย คุณจะต้องแก้ไขแอปเริ่มต้นสำหรับ Codelab นี้

เปิด Android Studio

หมายเหตุ: หากคุณไม่เห็นโปรเจ็กต์ Flutter ใหม่เป็นตัวเลือกใน IDE ของคุณ ให้ตรวจสอบว่าคุณได้ติดตั้งปลั๊กอินสำหรับ Flutter และ Dart แล้ว

1. หากไม่มีโปรเจ็กต์ที่เปิดอยู่ ให้เลือกเริ่มแอป Flutter ใหม่จากหน้ายินดีต้อนรับ มิฉะนั้น ให้เลือก ไฟล์ > ใหม่ > โปรเจ็กต์ Flutter ใหม่
2. เลือกแอปพลิเคชัน Flutter เป็นประเภทโปรเจ็กต์ แล้วคลิกถัดไป
3. ตรวจสอบว่าเส้นทาง Flutter SDK ระบุตำแหน่งของ SDK หรือไม่ (เลือกติดตั้ง SDK หากช่องข้อความว่างเปล่า)
4. กรอกชื่อโปรเจ็กต์ แล้วคลิกถัดไป
5. ใช้ชื่อแพ็กเกจเริ่มต้นที่แนะนำโดย Android Studio แล้วคลิกถัดไป
6. คลิกเสร็จสิ้น
7. รอให้ Android Studio ติดตั้ง SDK และสร้างโปรเจ็กต์

3. สร้างและตั้งค่าโปรเจ็กต์ Firebase

หากต้องการเริ่มต้นใช้งาน Firebase คุณจะต้องสร้างและตั้งค่าโปรเจ็กต์ Firebase

สร้างโปรเจ็กต์ Firebase

1. ลงชื่อเข้าใช้ Firebase

ในคอนโซล Firebase ให้คลิก "เพิ่มโปรเจ็กต์" (หรือสร้างโปรเจ็กต์) และตั้งชื่อโปรเจ็กต์ Firebase เป็น Firebase-Flutter-Ads หรือชื่อใดก็ได้ตามต้องการ

2. คลิกตัวเลือกการสร้างโปรเจ็กต์ ยอมรับข้อกำหนดของ Firebase หากได้รับข้อความแจ้ง คุณควรเปิดใช้ Google Analytics สําหรับโปรเจ็กต์นี้ เนื่องจากต้องมีเหตุการณ์ Google Analytics สำหรับติดตามเหตุการณ์การดำเนินการและการวิเคราะห์ Conversion

ดูข้อมูลเพิ่มเติมเกี่ยวกับโปรเจ็กต์ Firebase ได้ที่ทำความเข้าใจโปรเจ็กต์ Firebase

4. การกำหนดค่า Firebase เฉพาะแพลตฟอร์ม (Android)

กำหนดค่า Android

1. ในคอนโซล Firebase ให้เลือกภาพรวมโครงการในการนำทางด้านซ้าย แล้วคลิกปุ่ม Android ใต้ "เริ่มต้นใช้งานโดยการเพิ่ม Firebase ลงในแอป"

คุณจะเห็นกล่องโต้ตอบแสดงในหน้าจอถัดไป

2. ค่าสำคัญที่ระบุคือชื่อแพ็กเกจ Android ซึ่งคุณจะได้รับตามขั้นตอนต่อไปนี้

เคล็ดลับ: ดูข้อมูลเพิ่มเติมเกี่ยวกับรหัสแพ็กเกจและรหัสแอปพลิเคชันได้ที่ตั้งค่ารหัสแอปพลิเคชัน

3. เปิดไฟล์ android/app/src/main/AndroidManifest.xml ในไดเรกทอรีแอป Flutter
4. ในองค์ประกอบ manifest ให้ค้นหาค่าสตริงของแอตทริบิวต์ package ค่านี้คือชื่อแพ็กเกจ Android (เช่น com.yourcompany.yourproject) คัดลอกค่านี้
5. ในกล่องโต้ตอบ Firebase ให้วางชื่อแพ็กเกจที่คัดลอกลงในช่อง Android package name
6. เราไม่ต้องใช้คีย์ SHA-1 ที่นี่ เว้นแต่คุณจะวางแผนที่จะใช้Google Sign-In หรือลิงก์แบบไดนามิกของ Firebase (โปรดทราบว่าลิงก์เหล่านี้ไม่ได้เป็นส่วนหนึ่งของ Codelab) หากคุณวางแผนที่จะนำเข้าข้อมูลจาก in_app_purchase จาก Google Play คุณจะต้องตั้งค่าคีย์ในภายหลัง
7. คลิกลงทะเบียนแอป
8. จากนั้นดำเนินการต่อใน Firebase โปรดทำตามวิธีการเพื่อดาวน์โหลดไฟล์การกำหนดค่า google-services.json

9. ไปที่ไดเรกทอรีแอป Flutter แล้วย้ายไฟล์ google-services.json (ที่คุณเพิ่งดาวน์โหลด) ไปยังไดเรกทอรี android/app
10. กลับไปที่คอนโซล Firebase ข้ามขั้นตอนที่เหลือและกลับไปที่หน้าหลักของคอนโซล Firebase
11. สุดท้าย คุณต้องใช้ปลั๊กอิน Google Services Gradle เพื่ออ่านไฟล์ google-services.json ที่ Firebase สร้างขึ้น
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 ติดตั้งทรัพยากร Dependency ได้

คุณกำหนดค่าแอป Flutter สำหรับ Android เรียบร้อยแล้ว สำหรับ iOS คุณอาจต้องดู Codelab นี้ ( ทำความรู้จัก Firebase สำหรับ Flutter)

5. กำหนดค่า Firebase Analytics ใน Flutter

ในขั้นตอนนี้ คุณจะเริ่มใช้แพ็กเกจ Firebase Analytics ที่ชื่อ firebase_analytics ซึ่งมีฟีเจอร์ Firebase Analytics

ไฟล์ pubspec จัดการเนื้อหาสำหรับแอป Flutter ใน pubspec.yaml ให้เพิ่ม firebase_analytics: ^6.2.0 (firebase_analytics 6.2.0 ขึ้นไป) ลงในรายการทรัพยากร Dependency ดังต่อไปนี้

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

ขณะดู pubspec ในมุมมองเครื่องมือแก้ไขของ Android Studio ให้คลิกแพ็กเกจได้รับ ระบบจะดึงแพ็กเกจเข้ามาในโปรเจ็กต์ของคุณ คุณจะเห็นข้อมูลต่อไปนี้ในคอนโซล

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

การแสดง Pub get จะสร้างไฟล์ pubspec.lock โดยอัตโนมัติด้วยรายการแพ็กเกจทั้งหมดที่ดึงเข้าสู่โปรเจ็กต์และหมายเลขเวอร์ชันของ

ข้อควรระวัง: สำหรับ Firebase บางเวอร์ชัน ระบบจะแสดง java.lang.IllegalArgumentException: Service not registered เมื่อเริ่มคลาส FirebaseAnalytics เป็นครั้งแรก (ดูปัญหา GitHub 1662).

ใน lib/main.dart ให้นำเข้าแพ็กเกจใหม่ดังนี้

import 'package:firebase_analytics/firebase_analytics.dart';

ในคลาส MyApp ให้เริ่มต้นออบเจ็กต์ FirebaseAnalytics โดยเรียกใช้ตัวสร้าง

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

ตอนนี้คุณพร้อมที่จะเริ่มบันทึกเหตุการณ์ที่กําหนดเองบางรายการแล้ว

6. บันทึกเหตุการณ์ที่กำหนดเองด้วย Firebase Analytics

หากจะสร้างเทมเพลตใหม่ในแอป Flutter คุณจะเห็นตัวแปร _counter และเมธอด _incrementCounter() ในคลาส State เริ่มต้น ตอนนี้คุณต้องการบันทึกเหตุการณ์ที่กำหนดเองเมื่อมีการคลิกปุ่มเพิ่มมากกว่า 5 ครั้งจากผู้ใช้ที่มีความสนใจมากเกินไป เราจะเปิดตัว App Campaign ในภายหลังเพื่อดึงดูดผู้ใช้ที่อาจสนใจ

ก่อนอื่น เราจะต้องส่งออบเจ็กต์การวิเคราะห์ที่ได้เริ่มต้นไว้ไปยังวิดเจ็ต Stateful เราเริ่มต้นด้วยการเพิ่มพารามิเตอร์ Analytics ลงในเครื่องมือสร้าง 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 ด้วย (ดู BigQuery Export สำหรับ Firebase)

เราจะกำหนดค่า _counter เป็นพารามิเตอร์ที่นี่

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

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

การตรวจสอบและการแก้ไขข้อบกพร่องเหตุการณ์

คุณจะเห็นเหตุการณ์ที่บันทึกไว้ในคอนโซล Firebase ในอีกหลายชั่วโมง เพียงคลิกแท็บเหตุการณ์จากส่วน Analytics ที่แสดงในคอนโซล Firebase คุณยังตรวจสอบค่าภายในเหตุการณ์ clicked_counter ได้โดยคลิกที่เหตุการณ์

ทําเครื่องหมาย clicked_counter เป็น Conversion โดยเลื่อนสวิตช์ทําเครื่องหมายเป็น Conversion ไปทางขวา

หากเหตุการณ์อยู่ในแท็บ Conversion แสดงว่าคุณทําเครื่องหมายเหตุการณ์เป็น Conversion สำเร็จแล้ว Google Ads จะสามารถนำเข้าเหตุการณ์นี้จาก Firebase ได้แล้ว

โปรดใช้ Firebase DebugView เพื่อวัตถุประสงค์ในการแก้ไขข้อบกพร่อง โปรดดูรายละเอียดเพิ่มเติมในเหตุการณ์การแก้ไขข้อบกพร่อง

7. การนำเข้าเหตุการณ์ Analytics ใน Google Ads

เมื่อตั้งค่า Firebase-Flutter เสร็จแล้ว คุณก็พร้อมเปิดตัว App Campaign ที่มีเหตุการณ์การดำเนินการแล้ว เริ่มต้นด้วยการลิงก์ Firebase กับ Google Ads เมื่อลิงก์ Firebase กับ Google Ads App Campaign จะนำเข้าเหตุการณ์ Firebase ได้ กระบวนการนี้ยังช่วย Google Ads ในการเพิ่มประสิทธิภาพ App Campaign ด้วยการช่วยให้ดูข้อมูลเพิ่มเติมเกี่ยวกับกลุ่มเป้าหมายได้

1. ไปที่การตั้งค่า Firebase โดยคลิกปุ่มข้างภาพรวมโครงการ
2. ในแท็บการผสานรวม คุณจะเห็น Google Ads และปุ่มลิงก์ คลิกลิงก์ แล้วคลิกต่อไป

3. เลือกบัญชี Google Ads

ข้อควรระวัง: หากไม่ได้ทําเครื่องหมายเหตุการณ์เป้าหมายเป็นเหตุการณ์ Conversion Google Ads จะนําเข้าไม่ได้ ตรวจสอบว่าได้ทําเครื่องหมายเหตุการณ์เป็น Conversion อย่างถูกต้อง

เท่านี้ก็เรียบร้อย ในส่วน Firebase แล้ว

ไปที่ Google Ads

1. ลงชื่อเข้าใช้และไปที่ เครื่องมือและ การตั้งค่า > การวัดผล > Conversion เพื่อนําเข้าเหตุการณ์ที่กําหนดเองเป็น Conversion
2. คลิกปุ่ม + เพื่อเพิ่มการกระทำที่ถือเป็น Conversion ใหม่

3. เลือกพร็อพเพอร์ตี้ Google Analytics 4 (Firebase) แล้วคลิกดำเนินการต่อ

4. คุณสามารถดูเหตุการณ์ Analytics ทั้งหมดที่ทําเครื่องหมายเป็น Conversion ได้ ค้นหาเหตุการณ์ clicked_counter ที่เราติดตั้งใช้งานมาก่อน

5. เลือกการดำเนินการ คลิกนำเข้า แล้วคลิกต่อไป

หลังจากตั้งค่า clicked_counter เป็นการกระทําที่ถือเป็น Conversion แล้ว คุณจะเปิดตัวแคมเปญเพื่อกระตุ้นการกระทำซึ่งสามารถกำหนดเป้าหมายผู้ใช้ที่น่าจะเริ่มเหตุการณ์ clicked_counter มากกว่า 5 ครั้งได้

8. การเปิดตัวแคมเปญการกระทำในแอปที่มีเหตุการณ์ที่นำเข้า

สำคัญ: หากต้องการเปิดตัว App Campaign ให้ประสบความสำเร็จ คุณต้องดาวน์โหลดแอประดับเวอร์ชันที่ใช้งานจริงใน Google Play อย่างไรก็ตาม หากคุณยังไม่พร้อมสำหรับการเผยแพร่ คุณก็สามารถข้ามขั้นตอนนี้ไปได้ในตอนนี้

6. ไปที่แท็บแคมเปญของบัญชีปัจจุบัน และเริ่มแคมเปญใหม่โดยคลิกปุ่ม + คลิก [แคมเปญใหม่] แล้วคลิกต่อไป
7. เปิดตัวแคมเปญการโปรโมตแอปด้วยตัวเลือกการติดตั้งแอป

8. ค้นหาแอปของคุณโดยพิมพ์ชื่อแอป ชื่อแพ็กเกจ หรือผู้เผยแพร่
9. ในส่วนการเสนอราคา ให้เลือกการกระทำในแอปในเมนูแบบเลื่อนลง
10. ค้นหาเหตุการณ์ที่กําหนดเองในรายการที่ระบุ กำหนดต้นทุนต่อหนึ่งการกระทำที่ตั้งไว้และใช้ตัวเลือกเพิ่มเติมให้เสร็จสมบูรณ์

11. ตั้งค่าแคมเปญให้เสร็จ

9. ขอแสดงความยินดี

ขอแสดงความยินดี คุณได้ผสานรวม Firebase และ Google Ads เรียบร้อยแล้ว ซึ่งจะช่วยเพิ่มประสิทธิภาพแคมเปญด้วยเหตุการณ์ที่ Firebase นำเข้า

คุณได้เรียนรู้

• วิธีกำหนดค่า Firebase Analytics สำหรับ Flutter
• วิธีบันทึกเหตุการณ์ที่กำหนดเองด้วย Firebase Analytics ในแอป Flutter
• วิธีนําเข้าเหตุการณ์และใช้เหตุการณ์ในแคมเปญเพื่อกระตุ้นการกระทำ