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

1. Giới thiệu

Lần cập nhật gần đây nhất: ngày 25 tháng 02 năm 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ẽ dùng ứng dụng Android Hybrid mẫu. Ứng dụng này 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 Kết hợp
• Cách tạo sự kiện và thông 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ột mã gốc
• Cách gỡ lỗi
• Cách nhập và sử dụng sự kiện cho chiến dịch thúc đẩy hành động.

Bạn cần có

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

2. Thiết lập

Lấy mã

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

Để bắt đầu, bạn cần tải xuống và mở mã này trong môi trường nhà phát triển yêu thích của bạn. Chúng ta sẽ sử dụng 2 thư mục : android và web. Cụm từ "android" thư mục dành cho ứng dụng Android và "web" thư mục dành cho trang web mà ứng dụng sẽ 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 dự án Firebase.

Tạo dự án Firebase

1. Đă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 của bạn là Webview-test-codelab hoặc đặt tên bất kỳ mà bạn muốn.

2. 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ó 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

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

Hoặc bạn có thể chuyển đến mục 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 mục "Bắt đầu bằng cách thêm Firebase vào ứng dụng"

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

2. 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"

3. Không cần khoá SHA-1 ở đây. Khoá này chỉ cần thiết khi bạn 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 in_app_purchase từ Google Play (không thuộc phạm vi của lớp học lập trình này).
4. Nhấp vào Đăng ký ứng dụng.
5. Tải tệp cấu hình google-services.json trong bảng điều khiển của Firebase xuống, rồi sao chép và hãy dán tệp này vào thư mục android/app trong dự án ứng dụng của bạn.
6. 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.
7. 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
8. Trong IDE hoặc trình chỉnh sửa của bạn, hãy mở android/app/build.gradle, sau đó thêm dòng sau làm dòng cuối trong tệp:

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

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

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

14. Nếu ứng dụng của bạn vẫn đang chạy, hãy đóng và tạo 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 của mình cho Android!

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

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

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

Trước tiên, hãy tạo tệp javascript để sử dụng trong tệp html. Trong mã mẫu, tệp js được đặt tên là chỉ mục.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 khi 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 trên ứng dụng Android, "window.AnalyticsWebInterface" sẽ được gọi và sẽ chuyển tiếp sự kiện đến mã WebInterface trong ứng dụng.

6. Lưu trữ thư mục web để lấy URL của 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. Có nhiều phương pháp để 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 để thuận tiện.

• Trong dòng lệnh, 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

thao tác 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 bạn muốn thiết lập tính năng nào.
• Chọn dự án bạn thiết lập cho ứng dụng Android của mình.
• Chấp nhận các chế độ mặc định cho tất cả câu lệnh còn lại.
• firebase deploy --only hosting – triển khai cho dịch vụ lưu trữ Firebase.

• Sau khi lấy được URL trang web, hãy chuyển đến dự án ứng dụng của bạn trong Android Studio rồi chèn URL web vừa tạo ở bước này trong 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ã này vào cả web và Android. Trong phần này, hãy cùng xem bạn cần đặt mã nào vào ứng dụng Android để nhận được các sự kiện từ trang web trong WebView.

Tạo "AnalyticsWebInterface.java" để tạo "AnalyticsWebInterface" . Trong lớp này, bạn cần 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 vào Hoạt động gọi WebView như bên dưới.

Để xem toàn bộ mã lập trình, vui lòng tham khảo mã mẫu mà bạn đã tải xuống từ GitHub trong phần "Thiết lập" .

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

Đối với các sự kiện gỡ lỗi, bạn có thể sử dụng mã sau trong dòng lệnh của Android Studio sau khi kết nối thiết bị kiểm thử hoặc 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 thời gian -s FA FA-SVC

Nhấp vào "GHI NHẬT KÝ SỰ KIỆN 1" trong ứng dụng của bạn và 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ẻ Thời gian thực. Chuyển đến bảng điều khiển của Firebase rồi nhấp vào thẻ Thời gian thực như bên dưới.

Sau đó, lọc sự kiện trên nền tảng Android bằng cách sử dụng tuỳ chọn "Thêm thông tin so sánh" .

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

Sau vài giờ, bạn có thể xem các sự kiện đã ghi lại trong thẻ Sự kiện trên bảng điều khiển của Firebase. Bạn chỉ cần nhấp vào thẻ Sự kiện trong phần Analytics hiển thị 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 lượt chuyển đổi đó 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ẻ Chuyển đổi, thì tức là bạn đã đánh dấu thành công sự kiện đó là lượt chuyển đổi. Bây giờ, Google Ads sẽ có thể nhập sự kiện này từ Firebase.

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

9. Nhập sự kiện phân tích vào Google Ads

Sau khi quá trình thiết lập Firebase hoàn tất, bạn đã sẵn sàng chạy các chiến dịch quảng cáo ứng dụng 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 các chiến dịch Quảng cáo ứng dụng bằng cách cho phép Google Ads tìm hiểu thêm về đối tượng của họ.

1. Chuyển đến phần Cài đặt Firebase bằng cách nhấp vào nút bên cạnh mục Tổng quan về dự án.
2. 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.

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

Thận trọng: Nếu sự kiện mục tiêu không được đánh dấu là sự kiện chuyển đổi, thì Google Ads sẽ không thể nhập sự kiện đó. Hãy đảm bảo sự kiện được đánh dấu chính xác là lượt chuyển đổi.

Phần Firebase đã hoàn tất.

Chuyển đến Google Ads.

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

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

4. Bạn có thể thấy tất cả những sự kiện trong 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 đó.

5. Kiểm tra thao tác, nhấp vào Nhập,rồi nhấp vào Tiếp tục.

Sau khi đặt event1 làm hành động chuyển đổi, bạn có thể chạy các chiến dịch thúc đẩy hành động trong ứng dụng thông qua sự kiện event1.

10. Triển khai chiến dịch thúc đẩy hành động trong ứng dụng có sự kiện được nhập

Lưu ý quan trọng: Để chạy thành công một Chiến dịch quảng cáo ứng dụng, bạn cần có một ứng dụng ở cấp độ phát hành công khai trong Google Play. Tuy nhiên, nếu chưa sẵn sàng xuất bản thì bạn có thể tạm thời bỏ qua bước này.

6. Chuyển đến tab chiến dịch của tài khoản hiện tại và 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.
7. Chạy một chiến dịch Quảng cáo ứng dụng với lựa chọn Lượt cài đặt ứng dụng.

8. Tìm ứng dụng của bạn bằng cách nhập tên ứng dụng, tên gói hoặc nhà xuất bản.
9. 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.
10. Tìm sự kiện tuỳ chỉnh của bạn trong danh sách được cung cấp. Đặt Chi phí mục tiêu trên mỗi hành động và hoàn tất mọi lựa chọn bổ sung.

11. Hoàn tất các chế độ cài đặt chiến dịch của bạn.

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 với các sự kiện được nhập vào Firebase.

Bạn đã tìm hiểu về

• Cách khởi chạy GA4F (Google Analytics cho Firebase) trong ứng dụng Kết hợp
• Cách tạo sự kiện và thông 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ột mã gốc
• Cách gỡ lỗi
• Cách nhập và sử dụng sự kiện cho chiến dịch thúc đẩy 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

Firebase và Thiết lập tài khoản Google Ads

• Google Ads với sự kiện tuỳ chỉnh trong Google Analytics cho Firebase – Android
• Chạy các chiến dịch trên Google Ads bằng các sự kiện tuỳ chỉnh và Flutter trên Google Analytics