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

1. บทนำ

อัปเดตครั้งล่าสุด: 25-01-2021

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

ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีติดตั้งใช้งานเหตุการณ์ที่กําหนดเองด้วย 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 ใหม่จากหน้าต้อนรับ หรือเลือก File > New > New Flutter Project
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 หรือลิงก์แบบไดนามิกของ Firebase (โปรดทราบว่าฟีเจอร์เหล่านี้ไม่ได้เป็นส่วนหนึ่งของ Codelab นี้) หากวางแผนที่จะนําเข้าข้อมูล in_app_purchase จาก Google Play คุณจะต้องตั้งค่าคีย์ในภายหลัง
7. คลิกลงทะเบียนแอป
8. ทำตามวิธีการเพื่อดาวน์โหลดไฟล์การกำหนดค่า google-services.json ใน Firebase ต่อไป

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

คุณกำหนดค่าแอป 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 ขึ้นไป) ในรายการการอ้างอิง ดังนี้

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

ขณะดู pubspec ในมุมมองเครื่องมือแก้ไขของ 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 บางเวอร์ชัน ระบบจะแสดง 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 เราเริ่มต้นด้วยการเพิ่มพารามิเตอร์การวิเคราะห์ลงในMyHomePage Constructor

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

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

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"); 
   }

 });
}

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

นอกจากนี้ คุณยังใช้วิธีการที่สร้างไว้ล่วงหน้าเพื่อทริกเกอร์เหตุการณ์ได้ด้วย

ตอนนี้ทุกอย่างพร้อมแล้ว เรียกใช้ "main.dart" ใน Android Studio

(ไม่บังคับ) ส่งข้อมูลเพิ่มเติมไปยัง 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. การเปิดตัวแคมเปญเพื่อกระตุ้นการกระทําในแอปด้วยเหตุการณ์ที่นําเข้า

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

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

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

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

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

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

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

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