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

1. บทนำ

อัปเดตล่าสุด: 22-12-2021

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

ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีส่งต่อเหตุการณ์จากหน้าเว็บภายใน 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

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

9. ไปที่ไดเรกทอรีแอป จากนั้นย้ายไฟล์ 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 ติดตั้งการขึ้นต่อกันได้

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

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

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

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

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

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

เมื่อทริกเกอร์เหตุการณ์ใน WebView ใน Android ระบบจะเรียก "window.AnalyticsWebInterface" และเชื่อมต่อเหตุการณ์กับแอปเนทีฟ

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

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

• ในเทอร์มินัล ให้ป้อนไดเรกทอรีเว็บ (เช่น cd web) แล้วเรียกใช้คำสั่งต่อไปนี้
• npm install -g firebase-tools - this will install the 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 time -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. การเปิดตัวแคมเปญเพื่อกระตุ้นการกระทําในแอปด้วยเหตุการณ์ที่นําเข้า

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

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

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

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

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

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

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

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