Theo dõi các sự kiện trong WebView bằng Google Analytics cho Firebase

1. Giới thiệu

Ngày cập nhật gần đây nhất: 25/02/2022

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách chuyển tiếp các sự kiện từ một trang web trong WebView sang mã gốc để GA4F có thể theo dõi các sự kiện đó.

Chúng ta sẽ sử dụng ứng dụng Android Hybrid mẫu gọi một trang web bằng WebView.

Kiến thức bạn sẽ học được

Cách khởi chạy GA4F (Google Analytics cho Firebase) trong ứng dụng Hybrid
Cách tạo các sự kiện và tham số tuỳ chỉnh trong trang web
Cách chuyển tiếp các sự kiện trên một trang web trong WebView sang mã gốc
Cách gỡ lỗi
Cách nhập các sự kiện và sử dụng các sự kiện đó cho chiến dịch hành động.

Bạn cần có

Android Studio phiên bản 3.6 trở lên
Tài khoản Firebase

2. Thiết lập

Lấy mã nguồn

Hướng dẫn chính thức của Firebase cung cấp mã mẫu trong GitHub. Chúng ta cần mã này cho dự án này.

Để bắt đầu, bạn cần tải mã xuống và mở mã đó trong môi trường phát triển yêu thích. Chúng ta sẽ sử dụng 2 thư mục : android và web. Thư mục "android" dành cho ứng dụng Android và thư mục "web" dành cho một trang web sẽ được ứng dụng gọi thông qua WebView.

3. Tạo và thiết lập dự án Firebase

Để bắt đầu sử dụng Firebase, bạn cần tạo và thiết lập một dự án Firebase.

Tạo dự án Firebase

Đăng nhập vào Firebase.

Trong bảng điều khiển của Firebase, hãy nhấp vào Thêm dự án (hoặc Tạo dự án) rồi đặt tên cho dự án Firebase là Webview-test-codelab hoặc bất kỳ tên nào bạn muốn.

Nhấp vào các tùy chọn tạo dự án. Chấp nhận các điều khoản của Firebase nếu được nhắc đến. Bạn nên bật Google Analytics cho dự án này vì bạn cần các sự kiện Google Analytics để theo dõi các sự kiện hành động và phân tích lượt chuyển đổi.

Để tìm hiểu thêm về các dự án Firebase, hãy xem bài viết Tìm hiểu về các dự án Firebase.

4. Cấu hình Firebase cho Android

Định cấu hình Android trong Bảng điều khiển của Firebase

Trên trang chủ của Bảng điều khiển của Firebase, bạn có thể nhấp vào biểu tượng Android như bên dưới.

Hoặc bạn có thể chuyển đến Tổng quan về dự án trong thanh điều hướng bên trái rồi nhấp vào nút Android trong phần "Bắt đầu bằng cách thêm Firebase vào ứng dụng của bạn"

Sau đó, bạn sẽ thấy màn hình "Thêm Firebase vào ứng dụng Android" như bên dưới.

Bạn có thể tìm thấy tên gói Android (ví dụ: com.xxxx.myproject) trong android/app/src/main/AndroidManifest.xml trong thư mục ứng dụng.

package="com.xxxx.myproject"

Bạn không cần khoá SHA-1 ở đây. Bạn chỉ cần khoá này khi muốn sử dụng tính năng Đăng nhập bằng Google hoặc Đường liên kết động của Firebase hoặc nhập dữ liệu mua hàng trong ứng dụng từ Google Play (không nằm trong phạm vi của lớp học lập trình này).
Nhấp vào Đăng ký ứng dụng.
Tải tệp cấu hình google-services.json xuống trong bảng điều khiển của Firebase rồi sao chép và dán tệp này vào thư mục android/app trong dự án ứng dụng của bạn.
Quay lại bảng điều khiển của Firebase, bỏ qua các bước còn lại và quay lại trang chính của bảng điều khiển của Firebase.
Cuối cùng, bạn cần có trình bổ trợ Gradle cho Dịch vụ của Google để đọc tệp google-services.json do Firebase tạo
Trong IDE hoặc trình chỉnh sửa, hãy mở android/app/build.gradle rồi thêm dòng sau làm dòng cuối cùng trong tệp:

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

Mở android/build.gradle. Sau đó, hãy thêm một phần phụ thuộc mới bên trong thẻ buildscript.

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

Nếu ứng dụng của bạn vẫn đang chạy, hãy đóng và xây dựng lại ứng dụng đó để cho phép gradle cài đặt các phần phụ thuộc.

Bạn đã định cấu hình xong ứng dụng cho Android!

5. Phát triển Giao diện web Analytics trên web và ghi lại các sự kiện tuỳ chỉnh

Để theo dõi các sự kiện trong webview bằng Google Analytics, bạn cần chèn mã vào cả ứng dụng web và ứng dụng Android.

Trong phần này, hãy xem mã mà bạn cần đặt trong trang web.

Trước tiên, hãy tạo một tệp JavaScript để sử dụng trong tệp HTML. Trong mã mẫu, tệp JS có tên là index.js. Bạn cần tạo hàm "logEvent" để gọi "AnayticsWebInterface" cho Android và "messageHander" cho iOS như mã bên dưới.

Và gọi hàm này ở nơi bạn muốn theo dõi sự kiện trong tệp HTML như bên dưới.

Khi một sự kiện được kích hoạt trong WebView trong ứng dụng Android, "window.AnalyticsWebInterface" sẽ được gọi và sự kiện đó sẽ chuyển tiếp đến mã WebInterface trong ứng dụng.

6. Lưu trữ thư mục web để lấy URL trang web

Trước khi gọi một trang web trong WebView trong ứng dụng, bạn cần có URL trang web. Sẽ có nhiều phương thức để lưu trữ các trang web. Trong lớp học lập trình này, chúng ta sẽ sử dụng dịch vụ lưu trữ Firebase cho tiện.

Trong thiết bị đầu cuối, hãy nhập thư mục web (ví dụ: cd web) rồi chạy các lệnh sau:
npm install -g firebase-tools

lệnh này sẽ cài đặt Giao diện dòng lệnh (CLI) của Firebase.

firebase login
firebase init
Chọn "Lưu trữ" khi được hỏi tính năng bạn muốn thiết lập.
Chọn dự án bạn thiết lập cho ứng dụng Android.
Chấp nhận các giá trị mặc định cho tất cả các lời nhắc còn lại.
firebase deploy --only hosting – triển khai vào dịch vụ lưu trữ Firebase.

Sau khi lấy URL trang web, hãy chuyển đến dự án ứng dụng trong Android Studio rồi chèn URL web vừa tạo ở bước này vào WebView như bên dưới.

7. Phát triển mã giao diện trong Ứng dụng Android

Để theo dõi các sự kiện trong WebView bằng GA4F, bạn cần chèn mã vào cả web và Android. Trong phần này, hãy xem mã mà bạn cần đặt trong ứng dụng Android để nhận các sự kiện từ trang web trong WebView.

Tạo tệp "AnalyticsWebInterface.java" để tạo lớp "AnalyticsWebInterface". Trong lớp này, bạn cần viết mã @JavascriptInterface để kết nối hàm logEvent trong tệp JS web như bên dưới.

Tiếp theo, bạn cần thêm giao diện JavaScript trong Hoạt động gọi WebView như bên dưới.

Để xem toàn bộ mã cho giao diện này, vui lòng tham khảo mã mẫu mà bạn đã tải xuống từ GitHub trong bước "Thiết lập".

8. Kiểm tra và gỡ lỗi sự kiện

Để gỡ lỗi sự kiện, bạn có thể sử dụng mã sau trong thiết bị đầu cuối Android Studio sau khi kết nối thiết bị thử nghiệm hoặc khởi chạy trình mô phỏng.

> adb shell setprop debug.firebase.analytics.app [tên gói ứng dụng]

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

> adb logcat -v time -s FA FA-SVC

Nhấp vào "LOG EVENT 1" (GHI NHẬT KÝ SỰ KIỆN 1) trong ứng dụng của bạn. Nếu mã hoạt động tốt, bạn sẽ thấy nhật ký như bên dưới.

Nếu muốn kiểm tra trong bảng điều khiển của Firebase, bạn cũng có thể sử dụng thẻ Theo thời gian thực. Chuyển đến bảng điều khiển của Firebase rồi nhấp vào thẻ Theo thời gian thực như bên dưới.

Sau đó, hãy lọc sự kiện nền tảng Android bằng cách sử dụng chức năng "Thêm so sánh".

Bạn sẽ thấy các sự kiện từ ứng dụng Android trong thẻ Theo thời gian thực nếu mã của bạn được triển khai đúng cách.

Sau vài giờ, bạn có thể thấy các sự kiện đã ghi nhật ký trong thẻ Sự kiện trong bảng điều khiển của Firebase. Chỉ cần nhấp vào thẻ Sự kiện trong phần Analytics có trong Bảng điều khiển của Firebase. Bạn cũng có thể kiểm tra các giá trị bên trong sự kiện event1 bằng cách nhấp vào sự kiện đó.

Để nhập event1 dưới dạng lượt chuyển đổi trong Google Ads, hãy Đánh dấu sự kiện đó là lượt chuyển đổi bằng cách trượt nút chuyển Đánh dấu là lượt chuyển đổi sang phải.

Nếu sự kiện nằm trong thẻ Lượt chuyển đổi, thì bạn đã đánh dấu thành công sự kiện đó là lượt chuyển đổi. Giờ đây, Google Ads có thể nhập sự kiện này từ Firebase.

Để gỡ lỗi, hãy sử dụng DebugView của Firebase. Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi sự kiện.

9. Nhập sự kiện Analytics vào Google Ads

Sau khi hoàn tất quá trình thiết lập Firebase, bạn đã sẵn sàng chạy chiến dịch quảng cáo ứng dụng với các sự kiện hành động. Bắt đầu bằng cách liên kết Firebase với Google Ads. Bằng cách liên kết Firebase với Google Ads, chiến dịch quảng cáo ứng dụng có thể nhập các sự kiện Firebase. Quá trình này cũng giúp Google Ads tăng cường chiến dịch quảng cáo ứng dụng bằng cách cho phép chiến dịch tìm hiểu thêm về đối tượng của mình.

Chuyển đến Cài đặt Firebase bằng cách nhấp vào nút bên cạnh Tổng quan về dự án.
Trong thẻ Tích hợp, bạn sẽ thấy Google Ads và nút Liên kết. Nhấp vào Liên kết rồi nhấp vào Tiếp tục.

Chọn tài khoản Google Ads.

Bây giờ, phần Firebase đã hoàn tất.

Chuyển đến Google Ads.

Đăng nhập rồi chuyển đến Công cụ và cài đặt > Đo lường > Lượt chuyển đổi để nhập các sự kiện tuỳ chỉnh dưới dạng lượt chuyển đổi.
Nhấp vào nút + để thêm hành động chuyển đổi mới.

Chọn Tài sản Google Analytics 4 (Firebase) rồi nhấp vào Tiếp tục.

Bạn có thể thấy tất cả các sự kiện Analytics được đánh dấu là lượt chuyển đổi. Tìm sự kiện event1 mà chúng ta đã triển khai trước đó.

Kiểm tra hành động, nhấp vào Nhập rồi nhấp vào Tiếp tục.

Sau khi thiết lập event1 làm hành động chuyển đổi, bạn có thể chạy chiến dịch hành động trong ứng dụng với sự kiện event1.

10. Chạy chiến dịch hành động trong ứng dụng bằng các sự kiện đã nhập

Chuyển đến thẻ chiến dịch của tài khoản hiện tại rồi bắt đầu một chiến dịch mới bằng cách nhấp vào nút +. Nhấp vào [Chiến dịch mới] rồi nhấp vào Tiếp tục.
Chạy chiến dịch Quảng bá ứng dụng bằng tuỳ chọn Lượt cài đặt ứng dụng.

Tìm ứng dụng bằng cách nhập tên ứng dụng, tên gói hoặc nhà xuất bản.
Trong phần Đặt giá thầu, hãy chọn Hành động trong ứng dụng trong trình đơn thả xuống.
Tìm sự kiện tuỳ chỉnh trong danh sách được cung cấp. Đặt Chi phí mục tiêu trên mỗi hành động rồi hoàn tất mọi tuỳ chọn bổ sung.

Hoàn tất các chế độ cài đặt cho chiến dịch.

11. Xin chúc mừng

Xin chúc mừng! Bạn đã tích hợp thành công Firebase và Google Ads! Điều này sẽ giúp bạn tăng hiệu suất chiến dịch bằng các sự kiện đã nhập của Firebase.

Bạn đã học được

Cách khởi chạy GA4F (Google Analytics cho Firebase) trong ứng dụng Hybrid
Cách tạo các sự kiện và tham số tuỳ chỉnh trong trang web
Cách chuyển tiếp các sự kiện trên một trang web trong WebView sang mã gốc
Cách gỡ lỗi
Cách nhập các sự kiện và sử dụng các sự kiện đó cho chiến dịch hành động.

12. Tài liệu tham khảo

Hướng dẫn chính thức

Sử dụng Analytics trong WebView – Firebase – Google

Thiết lập Firebase và Google Ads