ติดตามเหตุการณ์ใน 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 และ web ไดเรกทอรี "android" ใช้สำหรับแอป Android และไดเรกทอรี "web" ใช้สำหรับหน้าเว็บที่แอปจะเรียกผ่าน 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 หรือนำเข้าข้อมูลการซื้อในแอปจาก Google Play ซึ่งไม่ได้อยู่ในขอบเขตของ Codelab นี้
4. คลิกลงทะเบียนแอป
5. ดาวน์โหลดไฟล์การกำหนดค่า google-services.json ในคอนโซล Firebase แล้วคัดลอกและวางไฟล์นี้ลงในไดเรกทอรี android/app ในโปรเจ็กต์แอป
6. กลับไปที่คอนโซล Firebase ให้ข้ามขั้นตอนที่เหลือและกลับไปที่หน้าหลักของคอนโซล Firebase
7. สุดท้าย คุณต้องมีปลั๊กอิน Gradle ของบริการของ Google เพื่ออ่านไฟล์ 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 ติดตั้งการขึ้นต่อกันได้

คุณกำหนดค่าแอปสำหรับ 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 time -s FA FA-SVC

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

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