ติดตามเหตุการณ์ใน WebView ด้วย Google Analytics สำหรับ Firebase

1. บทนำ

อัปเดตล่าสุด 25-02-2022

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

ใน 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

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

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

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

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

4. การกำหนดค่า Firebase สำหรับ Android

กำหนดค่า Android ในคอนโซล Firebase

1. ในหน้าแรกของคอนโซล Firebase คุณจะคลิกไอคอน Android ได้เหมือนด้านล่าง

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

จากนั้นคุณจะเห็น "เพิ่ม Firebase ไปยังแอป Android" เหมือนหน้าจอด้านล่าง

2. คุณค้นหาชื่อแพ็กเกจ Android (เช่น com.xxxx.myproject) ได้ใน android/app/src/main/AndroidManifest.xml ในไดเรกทอรีแอป

package="com.xxxx.myproject"

3. ไม่จำเป็นต้องใช้คีย์ SHA-1 ที่นี่ คีย์นี้จำเป็นต่อเมื่อคุณต้องการใช้ Google Sign In หรือลิงก์แบบไดนามิกของ Firebase หรือนำเข้าข้อมูล in_app_purchase จาก Google Play ซึ่งไม่ใช่ขอบเขตของ Codelab นี้
4. คลิกลงทะเบียนแอป
5. ดาวน์โหลดไฟล์กำหนดค่า google-services.json ในคอนโซล Firebase แล้วคัดลอกและ วางไฟล์นี้ลงในไดเรกทอรี android/app ในโปรเจ็กต์แอปของคุณ
6. กลับไปที่คอนโซล Firebase ข้ามขั้นตอนที่เหลือและกลับไปที่หน้าหลักของคอนโซล Firebase
7. สุดท้าย คุณต้องใช้ปลั๊กอิน Google Services Gradle เพื่ออ่านไฟล์ google-services.json ที่ Firebase สร้างขึ้น
8. ใน IDE หรือตัวแก้ไข ให้เปิด android/app/build.gradle แล้วเพิ่มบรรทัดต่อไปนี้เป็นบรรทัดสุดท้ายในไฟล์

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

13. เปิด android/build.gradle จากนั้นเพิ่มทรัพยากร Dependency ใหม่ภายในแท็ก buildscript

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

14. หากแอปยังทำงานอยู่ ให้ปิดและสร้างใหม่เพื่อให้ Gradle ติดตั้งทรัพยากร Dependency ได้

คุณกำหนดค่าแอปสำหรับ Android เสร็จแล้ว

5. พัฒนาอินเทอร์เฟซเว็บ Analytics ในเว็บและบันทึกเหตุการณ์ที่กำหนดเอง

หากต้องการติดตามเหตุการณ์ใน WebView ด้วย Google Analytics คุณต้องแทรกโค้ดลงในทั้งเว็บและแอป Android

ในส่วนนี้มาดูกันว่าคุณต้องใส่โค้ดใดลงในหน้าเว็บ

ก่อนอื่นให้สร้างไฟล์ JavaScript เพื่อใช้ในไฟล์ HTML ในโค้ดตัวอย่าง ไฟล์ js จะมีชื่อว่าindex.js คุณต้องสร้างฟังก์ชัน "logEvent" สำหรับการเรียก "AnayticsWebInterface" สำหรับ Android และ "messageHander" สำหรับ iOS ดังเช่นโค้ดด้านล่าง

และเรียกใช้ฟังก์ชันนี้ในที่ที่คุณต้องการติดตามเหตุการณ์ในไฟล์ HTML ดังตัวอย่างด้านล่าง

เมื่อมีการทริกเกอร์เหตุการณ์ใน WebView ในแอป Android ระบบจะแสดง "window.AnalyticsWebInterface" จะถูกเรียกและระบบจะส่งต่อเหตุการณ์ไปยังโค้ด WebInterface ในแอป

6. โฮสต์ไดเรกทอรีเว็บเพื่อรับ URL ของหน้าเว็บ

คุณต้องมี URL ของหน้าเว็บก่อนที่จะเรียกใช้หน้าเว็บภายใน WebView ในแอป การโฮสต์หน้าเว็บสามารถทำได้หลายวิธี ใน Codelab นี้ เราจะใช้บริการโฮสติ้งของ Firebase เพื่อความสะดวกเท่านั้น

• ในเทอร์มินัล ให้ป้อนไดเรกทอรีเว็บ (เช่น cd web) และเรียกใช้คำสั่งต่อไปนี้
• npm install -g firebase-tools

วิธีนี้จะติดตั้ง Firebase CLI

• firebase login
• firebase init
• เลือก "โฮสติ้ง" เมื่อระบบถามว่าคุณต้องการตั้งค่าฟีเจอร์ใด
• เลือกโปรเจ็กต์ที่คุณตั้งค่าไว้สำหรับแอป Android
• ยอมรับค่าเริ่มต้นของข้อความแจ้งที่เหลือทั้งหมด
• firebase deploy --only hosting - ทำให้ใช้งานได้กับโฮสติ้งของ Firebase

• หลังจากได้รับ URL ของหน้าเว็บแล้ว ให้ไปที่โปรเจ็กต์แอปใน Android Studio แล้วแทรก URL ของเว็บที่เพิ่งสร้างในขั้นตอนนี้ลงใน WebView ตามตัวอย่างด้านล่าง

7. พัฒนาโค้ดอินเทอร์เฟซในแอป Android

หากต้องการติดตามเหตุการณ์ใน WebView ด้วย GA4F คุณต้องแทรกโค้ดลงในทั้งเว็บและ Android ในส่วนนี้ มาดูกันว่าคุณต้องใส่โค้ดใดลงในแอป Android เพื่อรับเหตุการณ์จากหน้าเว็บใน WebView

สร้าง "AnalyticsWebInterface.java" เพื่อสร้าง "AnalyticsWebInterface" ในชั้นเรียนนี้ คุณต้องเขียนโค้ด @JavascriptInterface เพื่อเชื่อมต่อฟังก์ชัน logEvent ในไฟล์เว็บ js ดังด้านล่างนี้

ขั้นตอนต่อไป คุณจะต้องเพิ่มอินเทอร์เฟซ JavaScript ในกิจกรรมซึ่งเรียกใช้ WebView ดังตัวอย่างต่อไปนี้

หากต้องการดูโค้ดทั้งหมด โปรดดูโค้ดตัวอย่างที่คุณดาวน์โหลดจาก GitHub ใน "การตั้งค่า" ครั้งแรก

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

คลิก "บันทึกเหตุการณ์ 1" ในแอปของคุณ และหากโค้ดทำงานอย่างถูกต้อง คุณจะเห็นบันทึกเหมือนด้านล่างนี้

หรือหากต้องการตรวจสอบในคอนโซล Firebase คุณยังใช้แท็บเรียลไทม์ได้ด้วย ไปที่คอนโซล Firebase แล้วคลิกแท็บ "เรียลไทม์" ดังที่แสดงด้านล่าง

จากนั้นกรองเหตุการณ์แพลตฟอร์ม Android โดยใช้ "เพิ่มการเปรียบเทียบ"

คุณจะเห็นเหตุการณ์จากแอป Android ในแท็บเรียลไทม์ หากมีการติดตั้งใช้งานโค้ดอย่างถูกต้อง

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

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

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

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

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

เมื่อตั้งค่า Firebase เสร็จแล้ว คุณก็พร้อมเปิดตัว 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 ได้ ค้นหาเหตุการณ์ event1 ที่เราติดตั้งใช้งานมาก่อน

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

หลังจากตั้งค่า event1 เป็นการกระทําที่ถือเป็น Conversion แล้ว คุณจะเปิดตัวแคมเปญเพื่อกระตุ้นการกระทำได้ด้วยเหตุการณ์ event1

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

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

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

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

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

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

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

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

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

12. ข้อมูลอ้างอิง

คู่มืออย่างเป็นทางการ

• ใช้ Analytics ใน WebView - Firebase - Google

Firebase และ การตั้งค่า Google Ads

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