1. บทนำ
อัปเดตล่าสุด 22-12-2021
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะได้เรียนรู้วิธีส่งต่อเหตุการณ์จากหน้าเว็บภายใน WebView ไปยังโค้ดแบบเนทีฟเพื่อให้ GA4F ติดตามกิจกรรมได้
เราจะใช้ตัวอย่างแอป Android แบบไฮบริดซึ่งเรียกหน้าเว็บโดยใช้ WebView
สิ่งที่คุณจะได้เรียนรู้
- วิธีเริ่มต้น GA4F (Google Analytics สำหรับ Firebase) ในแอปแบบผสม
- วิธีสร้างเหตุการณ์และพารามิเตอร์ที่กำหนดเองในหน้าเว็บ
- วิธีส่งต่อเหตุการณ์ในหน้าเว็บภายใน WebView ไปยังโค้ดแบบเนทีฟ
- วิธีแก้ไขข้อบกพร่อง
- วิธีนําเข้าเหตุการณ์และใช้เหตุการณ์ในแคมเปญเพื่อกระตุ้นการกระทำ
สิ่งที่คุณต้องมี
- Android Studio 3.6 ขึ้นไป
- บัญชี Firebase
2. การตั้งค่า
รับโค้ด
เอกสารคู่มือ Firebase จะมีโค้ดตัวอย่างที่เราจำเป็นต้องใช้สำหรับโปรเจ็กต์นี้ลงใน GitHub
ในการเริ่มต้นใช้งาน คุณจะต้องดึงโค้ดและเปิดในสภาพแวดล้อมของการพัฒนาซอฟต์แวร์ที่คุณชื่นชอบ เราจะใช้ 2 ไดเรกทอรี ได้แก่ android และเว็บ "Android" ไดเรกทอรีมีไว้สำหรับแอป Android และ "เว็บ" ไดเรกทอรีมีไว้สำหรับหน้าเว็บซึ่งแอปจะเรียกผ่าน WebView
3. สร้างและตั้งค่าโปรเจ็กต์ Firebase
หากต้องการเริ่มต้นใช้งาน Firebase คุณจะต้องสร้างและตั้งค่าโปรเจ็กต์ Firebase
สร้างโปรเจ็กต์ Firebase
- ลงชื่อเข้าใช้ Firebase
ในคอนโซล Firebase ให้คลิก "เพิ่มโปรเจ็กต์" (หรือสร้างโปรเจ็กต์) และตั้งชื่อโปรเจ็กต์ Firebase เป็น Webview-test-codelab หรือชื่อใดก็ได้ตามต้องการ
- คลิกตัวเลือกการสร้างโปรเจ็กต์ ยอมรับข้อกำหนดของ Firebase หากได้รับข้อความแจ้ง คุณควรเปิดใช้ Google Analytics สําหรับโปรเจ็กต์นี้ เนื่องจากต้องมีเหตุการณ์ Google Analytics สำหรับติดตามเหตุการณ์การดำเนินการและการวิเคราะห์ Conversion
ดูข้อมูลเพิ่มเติมเกี่ยวกับโปรเจ็กต์ Firebase ได้ที่ทำความเข้าใจโปรเจ็กต์ Firebase
4. การกำหนดค่า Android Firebase
กำหนดค่า Android
- ในคอนโซล Firebase ให้เลือกภาพรวมโครงการในการนำทางด้านซ้าย แล้วคลิกปุ่ม Android ใต้ "เริ่มต้นใช้งานโดยการเพิ่ม Firebase ลงในแอป"
คุณจะเห็นกล่องโต้ตอบแสดงในหน้าจอถัดไป
- ค่าสำคัญที่ระบุคือชื่อแพ็กเกจ Android ซึ่งคุณจะได้รับตามขั้นตอนต่อไปนี้
- เปิดไฟล์
android/app/src/main/AndroidManifest.xml
ในไดเรกทอรีแอป - ในองค์ประกอบ
manifest
ให้ค้นหาค่าสตริงของแอตทริบิวต์package
ค่านี้คือชื่อแพ็กเกจ Android (เช่นcom.yourcompany.yourproject
) คัดลอกค่านี้ - ในกล่องโต้ตอบ Firebase ให้วางชื่อแพ็กเกจที่คัดลอกลงในช่อง
Android package name
- เราไม่ต้องใช้คีย์ SHA-1 ที่นี่ เว้นแต่คุณจะวางแผนที่จะใช้Google Sign-In หรือลิงก์แบบไดนามิกของ Firebase (โปรดทราบว่าลิงก์เหล่านี้ไม่ได้เป็นส่วนหนึ่งของ Codelab) หากคุณวางแผนที่จะนำเข้าข้อมูลจาก
in_app_purchase
จาก Google Play คุณจะต้องตั้งค่าคีย์ในภายหลัง - คลิกลงทะเบียนแอป
- จากนั้นดำเนินการต่อใน Firebase โปรดทำตามวิธีการเพื่อดาวน์โหลดไฟล์การกำหนดค่า
google-services.json
- ไปที่ไดเรกทอรีแอป แล้วย้ายไฟล์
google-services.json
(ที่คุณเพิ่งดาวน์โหลด) ไปยังไดเรกทอรีandroid/app
- กลับไปที่คอนโซล Firebase ข้ามขั้นตอนที่เหลือและกลับไปที่หน้าหลักของคอนโซล Firebase
- สุดท้าย คุณต้องใช้ปลั๊กอิน Google Services Gradle เพื่ออ่านไฟล์
google-services.json
ที่ Firebase สร้างขึ้น - ใน 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 ติดตั้งทรัพยากร Dependency ได้
คุณกำหนดค่าแอปสำหรับ Android เสร็จแล้ว
5. พัฒนาอินเทอร์เฟซเว็บ Analytics ในเว็บและบันทึกเหตุการณ์ที่กำหนดเอง
หากต้องการติดตามเหตุการณ์ใน WebView ด้วย Google Analytics คุณต้องแทรกโค้ดลงในทั้งเว็บและแอป Android
ในส่วนนี้มาดูกันว่าคุณต้องใส่โค้ดใดไว้บนเว็บ
ก่อนอื่นให้สร้างไฟล์ JavaScript เพื่อใช้ในไฟล์ HTML ในโค้ดตัวอย่าง ไฟล์ js ชื่อเป็น index.js คุณต้องสร้างฟังก์ชัน "logEvent" สำหรับการเรียกใช้ AnayticsWebInterface สำหรับ Android และ messageHander สำหรับ iOS เช่น โค้ดด้านล่าง
และเรียกใช้ฟังก์ชันนี้ในที่ที่คุณต้องการติดตามเหตุการณ์ดังที่แสดงด้านล่าง
เมื่อเกิดเหตุการณ์ขึ้นใน WebView ใน Android "window.AnalyticsWebInterface" จะถูกเรียกและเชื่อมต่อเหตุการณ์นั้นกับแอปที่มาพร้อมเครื่อง
6. โฮสต์ไดเรกทอรีเว็บเพื่อรับ URL ของหน้าเว็บ
คุณต้องมี URL ของหน้าเว็บก่อนที่จะเรียกใช้หน้าเว็บภายใน WebView ในแอป การโฮสต์หน้าเว็บนั้นทำได้หลายวิธี แต่ใน Codelab นี้ เราจะแนะนำคุณให้ใช้บริการโฮสติ้งของ Firebase เพื่อความสะดวกเท่านั้น
- ในเทอร์มินัล ให้ป้อนไดเรกทอรีเว็บ (เช่น
cd web
) และเรียกใช้คำสั่งต่อไปนี้ npm install -g firebase-tools
การดำเนินการนี้จะติดตั้ง Firebase CLIfirebase login
firebase init
- เลือก "โฮสติ้ง" เมื่อระบบถามว่าคุณต้องการตั้งค่าฟีเจอร์ใด
- เลือกโปรเจ็กต์ที่คุณตั้งค่าไว้สำหรับแอป Android
- ยอมรับค่าเริ่มต้นของข้อความแจ้งที่เหลือทั้งหมด
firebase deploy --only hosting
- ทำให้ใช้งานได้กับโฮสติ้งของ Firebase
7. พัฒนาโค้ดอินเทอร์เฟซในแอป Android
หากต้องการติดตามเหตุการณ์ใน WebView ด้วย Google Analytics คุณต้องแทรกโค้ดดังกล่าวลงในทั้งเว็บและ Android ในส่วนนี้มาดูกันว่าคุณต้องใส่โค้ดใดลงในแอป Android
สร้าง "AnalyticsWebInterface.java" เพื่อสร้าง "AnalyticsWebInterface" ในชั้นเรียนนี้ คุณต้องเขียนโค้ด @JavascriptInterface เพื่อเชื่อมต่อฟังก์ชัน logEvent ในไฟล์เว็บ js ดังด้านล่างนี้
ขั้นถัดไป คุณจะต้องเพิ่มอินเทอร์เฟซ JavaScript ในกิจกรรมซึ่งเรียก WebView ดังต่อไปนี้
หากต้องการดูโค้ดทั้งหมด โปรดดูโค้ดตัวอย่างที่คุณดาวน์โหลดมาใน "การตั้งค่า" ครั้งแรก
8. การตรวจสอบและการแก้ไขข้อบกพร่องเหตุการณ์
สำหรับการแก้ไขข้อบกพร่อง คุณสามารถใช้รหัสต่อไปนี้ในเทอร์มินัล Android Studio หลังจากเชื่อมต่ออุปกรณ์ทดสอบหรือเปิดโปรแกรมจำลอง
adb shell setprop debug.firebase.analytics.app [ชื่อแพ็กเกจแอป]
adb shell setprop log.tag.FA VERBOSE
adb shell setprop log.tag.FA-SVC VERBOSE
adb logcat -v เวลา -s FA FA-SVC
หากโค้ดทำงานได้ดี คุณจะเห็นบันทึกดังด้านล่างนี้
หรือหากต้องการตรวจสอบในคอนโซล Firebase คุณยังใช้แท็บเรียลไทม์ได้ด้วย ไปที่คอนโซล Firebase แล้วคลิกแท็บ "เรียลไทม์" ดังที่แสดงด้านล่าง
จากนั้นกรองเหตุการณ์แพลตฟอร์ม Android โดยใช้ "เพิ่มการเปรียบเทียบ"
คุณจะเห็นเหตุการณ์จากแอป Android ในแท็บเรียลไทม์ หากมีการติดตั้งใช้งานโค้ดอย่างถูกต้อง
ภายในเวลาหลายชั่วโมง คุณสามารถดูเหตุการณ์ที่บันทึกได้ในแท็บเหตุการณ์ในคอนโซล Firebase เพียงคลิกแท็บเหตุการณ์จากส่วน Analytics ที่แสดงในคอนโซล Firebase คุณยังตรวจสอบค่าภายในเหตุการณ์ event1
ได้โดยคลิกที่เหตุการณ์
ทําเครื่องหมาย event1
เป็น Conversion โดยเลื่อนสวิตช์ทําเครื่องหมายเป็น Conversion ไปทางขวา
หากเหตุการณ์อยู่ในแท็บ Conversion แสดงว่าคุณทําเครื่องหมายเหตุการณ์เป็น Conversion สำเร็จแล้ว Google Ads จะสามารถนำเข้าเหตุการณ์นี้จาก Firebase ได้แล้ว
โปรดใช้ Firebase DebugView เพื่อวัตถุประสงค์ในการแก้ไขข้อบกพร่อง โปรดดูรายละเอียดเพิ่มเติมในเหตุการณ์การแก้ไขข้อบกพร่อง
9. การนำเข้าเหตุการณ์ Analytics ใน Google Ads
เมื่อตั้งค่า Firebase-Flutter เสร็จแล้ว คุณก็พร้อมเปิดตัว App Campaign ที่มีเหตุการณ์การดำเนินการแล้ว เริ่มต้นด้วยการลิงก์ Firebase กับ Google Ads เมื่อลิงก์ Firebase กับ Google Ads App Campaign จะนำเข้าเหตุการณ์ Firebase ได้ กระบวนการนี้ยังช่วย Google Ads ในการเพิ่มประสิทธิภาพ App Campaign ด้วยการช่วยให้ดูข้อมูลเพิ่มเติมเกี่ยวกับกลุ่มเป้าหมายได้
- ไปที่การตั้งค่า Firebase โดยคลิกปุ่มข้างภาพรวมโครงการ
- ในแท็บการผสานรวม คุณจะเห็น Google Ads และปุ่มลิงก์ คลิกลิงก์ แล้วคลิกต่อไป
- เลือกบัญชี Google Ads
เท่านี้ก็เรียบร้อย ในส่วน Firebase แล้ว
ไปที่ Google Ads
- ลงชื่อเข้าใช้และไปที่ เครื่องมือและ การตั้งค่า > การวัดผล > Conversion เพื่อนําเข้าเหตุการณ์ที่กําหนดเองเป็น Conversion
- คลิกปุ่ม + เพื่อเพิ่มการกระทำที่ถือเป็น Conversion ใหม่
- เลือกพร็อพเพอร์ตี้ Google Analytics 4 (Firebase) แล้วคลิกดำเนินการต่อ
- คุณสามารถดูเหตุการณ์ Analytics ทั้งหมดที่ทําเครื่องหมายเป็น Conversion ได้ ค้นหาเหตุการณ์
event1
ที่เราติดตั้งใช้งานมาก่อน
- เลือกการดำเนินการ คลิกนำเข้า แล้วคลิกต่อไป
หลังจากตั้งค่า event1
เป็นการกระทําที่ถือเป็น Conversion แล้ว คุณจะเปิดตัวแคมเปญเพื่อกระตุ้นการกระทำซึ่งสามารถกำหนดเป้าหมายผู้ใช้ที่น่าจะเริ่มเหตุการณ์ event1
มากกว่า 5 ครั้งได้
10. การเปิดตัวแคมเปญการกระทำในแอปที่มีเหตุการณ์ที่นำเข้า
- ไปที่แท็บแคมเปญของบัญชีปัจจุบัน และเริ่มแคมเปญใหม่โดยคลิกปุ่ม + คลิก [แคมเปญใหม่] แล้วคลิกต่อไป
- เปิดตัวแคมเปญการโปรโมตแอปด้วยตัวเลือกการติดตั้งแอป
- ค้นหาแอปของคุณโดยพิมพ์ชื่อแอป ชื่อแพ็กเกจ หรือผู้เผยแพร่
- ในส่วนการเสนอราคา ให้เลือกการกระทำในแอปในเมนูแบบเลื่อนลง
- ค้นหาเหตุการณ์ที่กําหนดเองในรายการที่ระบุ กำหนดต้นทุนต่อหนึ่งการกระทำที่ตั้งไว้และใช้ตัวเลือกเพิ่มเติมให้เสร็จสมบูรณ์
- ตั้งค่าแคมเปญให้เสร็จ
11. ขอแสดงความยินดี
ขอแสดงความยินดี คุณได้ผสานรวม Firebase และ Google Ads เรียบร้อยแล้ว ซึ่งจะช่วยเพิ่มประสิทธิภาพแคมเปญด้วยเหตุการณ์ที่ Firebase นำเข้า
คุณได้เรียนรู้
- วิธีเริ่มต้น GA4F (Google Analytics สำหรับ Firebase) ในแอปแบบผสม
- วิธีสร้างเหตุการณ์และพารามิเตอร์ที่กำหนดเองในหน้าเว็บ
- วิธีส่งต่อเหตุการณ์ในหน้าเว็บภายใน WebView ไปยังโค้ดแบบเนทีฟ
- วิธีแก้ไขข้อบกพร่อง
- วิธีนําเข้าเหตุการณ์และใช้เหตุการณ์ในแคมเปญเพื่อกระตุ้นการกระทำ