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

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

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

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

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

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

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

กำหนดค่า Android

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

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

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

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

3. เปิดไฟล์ android/app/src/main/AndroidManifest.xml ในไดเรกทอรีแอป
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. ไปที่ไดเรกทอรีแอป แล้วย้ายไฟล์ 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 ได้

คุณกำหนดค่าแอปสำหรับ 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 CLI
• firebase 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 ด้วยการช่วยให้ดูข้อมูลเพิ่มเติมเกี่ยวกับกลุ่มเป้าหมายได้

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 มากกว่า 5 ครั้งได้

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

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

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

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

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

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

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

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

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