Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

1. Giới thiệu

Lần cập nhật gần đây nhất: ngày 22 tháng 12 năm 2021

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 đến 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 kết hợp 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 động GA4F (Google Analytics cho Firebase) trong ứng dụng kết hợp
Cách tạo 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 đến mã gốc
Cách gỡ lỗi
Cách nhập sự kiện 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 phiên bản 3.6 trở lên
Tài khoản Firebase

2. Thiết lập

Lấy mã nguồn

Tài liệu hướng dẫn về Firebase cung cấp mã mẫu mà chúng ta cần cho dự án này vào github.

Để bắt đầu, bạn cần lấy mã và mở mã đó trong môi trường phát triển mà bạn yêu thích. Chúng ta sẽ sử dụng 2 thư mục : android, web. Thư mục "android" dành cho ứng dụng Android và thư mục "web" 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 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 của bạn 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 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, hãy chọn Tổng quan về dự án trong trình đơn điều hướng bên trái, sau đó 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"

Bạn sẽ thấy hộp thoại xuất hiện trên màn hình sau.

Giá trị quan trọng cần cung cấp là tên gói Android. Bạn sẽ nhận được tên gói này bằng cách thực hiện bước sau.

Trong thư mục ứng dụng, hãy mở tệp android/app/src/main/AndroidManifest.xml.
Trong phần tử manifest, hãy tìm giá trị chuỗi của thuộc tính package. Giá trị này là tên gói Android (chẳng hạn như com.yourcompany.yourproject). Hãy sao chép giá trị này.
Trong hộp thoại Firebase, hãy dán tên gói đã sao chép vào trường Android package name.
Bạn không cần khoá SHA-1 ở đây, trừ phi bạn dự định dùng tính năng Đăng nhập bằng Google hoặc Đường liên kết động của Firebase (xin lưu ý rằng những tính năng này không thuộc lớp học lập trình này). Nếu dự định nhập dữ liệu in_app_purchase từ Google Play, bạn sẽ phải đặt khoá sau.
Nhấp vào Đăng ký ứng dụng.
Tiếp tục trong Firebase, hãy làm theo hướng dẫn để tải tệp cấu hình google-services.json xuống.

Chuyển đến thư mục ứng dụng của bạn, sau đó di chuyển tệp google-services.json (mà bạn vừa tải xuống) vào thư mục android/app.
Trong bảng điều khiển của Firebase, hãy 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 này.
Cuối cùng, bạn cần 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, sau đó 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 đó thêm một 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'
   }
}

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 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ã nào bạn cần đặt trong web.

Trước tiên, hãy tạo một tệp javascript để 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 như bên dưới.

Khi sự kiện được kích hoạt trong webview trên Android, "window.AnalyticsWebInterface" sẽ được gọi và kết nối sự kiện với ứng dụng gốc.

6. Lưu trữ danh 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ó một URL trang web. Có nhiều phương thức để lưu trữ trang web, nhưng trong lớp học lập trình này, chúng tôi sẽ hướng dẫn bạn sử dụng dịch vụ lưu trữ firebase cho thuận tiện.

Trong thiết bị đầu cuối, hãy nhập thư mục web (ví dụ: cd web) và 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 bạn muốn thiết lập tính năng nào.
Chọn dự án mà bạn thiết lập cho ứng dụng Android của mình.
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 cho dịch vụ lưu trữ Firebase.

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 Google Analytics, bạn cần chèn mã vào cả web và Android. Trong phần này, hãy xem mã bạn cần đặt trong ứng dụng Android.

Tạo tệp "AnalyticsWebInterface.java" để tạo lớp "AnalyticsWebInterface". Trong lớp này, bạn cần mã hoá @JavascriptInterface để kết nối hàm logEvent trong tệp js trên 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ã cho hoạt động này, vui lòng tham khảo mã mẫu mà bạn đã tải xuống 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 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

Nếu mã của bạn 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. Truy cập vào 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 thông tin 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 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 mục Analytics trên 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 event1 sự kiện bằng cách nhấp vào sự kiện đó.

Đánh dấu event1 là lượt chuyển đổi bằng cách trượt nút Đá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, tức là bạn đã đánh dấu sự kiện đó là lượt chuyển đổi thành công. Giờ đây, 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 phần Gỡ lỗi sự kiện.

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

Sau khi hoàn tất quá trình thiết lập Firebase-Flutter, bạn đã sẵn sàng chạy 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. Quy 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 họ.

Chuyển đến phần Cài đặt Firebase bằng cách nhấp vào nút bên cạnh phần 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.

Đến đây là xong phần Firebase.

Chuyển đến Google Ads.

Đăng nhập rồi chuyển đến mục Công cụ và 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.
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ể xem tất cả các sự kiện phân tích đượ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 đó.

Đánh dấu vào hành động, 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 chiến dịch thúc đẩy hành động để nhắm đến những người dùng có khả năng kích hoạt sự kiện event1 hơn 5 lần.

10. Ra mắt chiến dịch thúc đẩy hành động trong ứng dụng bằng các sự kiện được 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 lựa 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 mục Đặ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 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.

Hoàn tất chế độ cài đặt 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 được nhập từ Firebase.

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

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