Trang này được dịch bởi Cloud Translation API.

Triển khai Google Analytics cho Firebase trong Android Webview

1. Giới thiệu

Lần cập nhật gần đây nhất: ngày 3 tháng 2 năm 2022

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

Cách tạo một WebView rất đơn giản trong Android
Cách gửi các sự kiện Webview vào Firebase

Bạn cần

Dự án Firebase đã triển khai Analytics SDK
Android Studio phiên bản 4.2 trở lên.
Trình mô phỏng Android chạy Android 5.0 trở lên.
Làm quen với ngôn ngữ lập trình Java.
Làm quen với ngôn ngữ lập trình Javascript.

2. Tạo một WebView web đơn giản trong Android

Thêm WebView vào bố cục hoạt động

Để thêm WebView vào ứng dụng trong bố cục, hãy thêm mã sau vào tệp XML bố cục của hoạt động:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".WebActivity"
>
  <WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  />
</androidx.constraintlayout.widget.ConstraintLayout>;

Thêm WebView trong onCreate()

Để tải một trang web trong WebView, hãy dùng loadUrl(). WebView phải được tạo trên hoạt động trống. Ví dụ: tôi sẽ triển khai việc này trên phương thức onCreate:

public class WebActivity extends AppCompatActivity {
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        // Navigate to site
        myWebView.loadUrl("https://bittererhu.glitch.me");
 }
}

Tuy nhiên, để hoạt động này diễn ra, ứng dụng của bạn phải có quyền truy cập vào Internet. Để có quyền truy cập Internet, hãy yêu cầu quyền INTERNET trong tệp kê khai. Ví dụ:

<uses-permission android:name="android.permission.INTERNET" />

Đó là tất cả những gì bạn cần cho một WebView cơ bản hiển thị một trang web.

Sử dụng JavaScript trong WebView

nếu trang web mà bạn dự định tải trong WebView sử dụng JavaScript, thì bạn phải bật JavaScript cho WebView. Sau khi bật JavaScript, bạn cũng có thể tạo các giao diện giữa mã ứng dụng và mã JavaScript.

Theo mặc định, JavaScript sẽ bị vô hiệu hoá trong WebView. Bạn có thể bật chế độ này thông qua WebSettings được đính kèm vào WebView. Bạn có thể truy xuất WebSettings bằng getSettings(), sau đó bật JavaScript bằng setJavaScriptEnabled().

Ví dụ:

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Hoạt động đã cập nhật :

public class WebActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        WebView myWebView = (WebView) findViewById(R.id.webview);
        if(myWebView != null) {
            WebSettings webSettings = myWebView.getSettings();
            webSettings.setJavaScriptEnabled(true);
        }
        // Navigate to site
        myWebView.loadUrl("https://bittererhu.glitch.me");
  }
}

3. Triển khai giao diện cầu nối Javascript

Trình xử lý JavaScript

Bước đầu tiên để sử dụng Google Analytics trong WebView là tạo các hàm JavaScript để chuyển tiếp sự kiện và thuộc tính người dùng đến mã gốc. Ví dụ sau đây minh hoạ cách thực hiện việc này theo cách tương thích với cả mã gốc của Android và Apple:

Trong ví dụ này, tôi đã tạo một tệp Javascript có tên là script.js, bao gồm những nội dung sau :

function logEvent(name, params) {
  if (!name) {
    return;
  }
  if (window.AnalyticsWebInterface) {
    // Call Android interface
    window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.firebase) {
    // Call iOS interface
    var message = {
      command: 'logEvent',
      name: name,
      parameters: params
    };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS interface found
    console.log("No native APIs found.");
  }
}


function setUserProperty(name, value) {
  if (!name || !value) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android interface
    window.AnalyticsWebInterface.setUserProperty(name, value);
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.firebase) {
    // Call iOS interface
    var message = {
      command: 'setUserProperty',
      name: name,
      value: value
   };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS interface found
    console.log("No native APIs found.");
  }
}

Giao diện gốc

Để gọi mã Android gốc từ JavaScript, hãy triển khai một lớp có các phương thức được đánh dấu @JavaScriptInterface: Trong ví dụ bên dưới, tôi đã tạo một lớp Java mới có tên là : AnalyticsWebInterfcae.java:

public class AnalyticsWebInterface {

    public static final String TAG = "AnalyticsWebInterface";
    private FirebaseAnalytics mAnalytics;

    public AnalyticsWebInterface(Context context) {
        mAnalytics = FirebaseAnalytics.getInstance(context);
    }

    @JavascriptInterface
    public void logEvent(String name, String jsonParams) {
        LOGD("logEvent:" + name);
        mAnalytics.logEvent(name, bundleFromJson(jsonParams));
    }

    @JavascriptInterface
    public void setUserProperty(String name, String value) {
        LOGD("setUserProperty:" + name);
        mAnalytics.setUserProperty(name, value);
    }

    private void LOGD(String message) {
        // Only log on debug builds, for privacy
        if (BuildConfig.DEBUG) {
            Log.d(TAG, message);
        }
    }

    private Bundle bundleFromJson(String json) {
        // ...
    }
}

Once you have created the native interface, register it with your WebView so that it is visible to JavaScript code running in the WebView:

// Only add the JavaScriptInterface on API version JELLY_BEAN_MR1 and above, due to
// security concerns, see link below for more information:
// https://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    mWebView.addJavascriptInterface(
            new AnalyticsWebInterface(this), AnalyticsWebInterface.TAG);
} else {
    Log.w(TAG, "Not adding JavaScriptInterface, API Version: " + Build.VERSION.SDK_INT);
}

Mã cuối cùng :

// [START analytics_web_interface]
public class AnalyticsWebInterface {

    public static final String TAG = "AnalyticsWebInterface";
    private FirebaseAnalytics mAnalytics;

    public AnalyticsWebInterface(Context context) {
        mAnalytics = FirebaseAnalytics.getInstance(context);
    }
    @JavascriptInterface
    public void logEvent(String name, String jsonParams) {
        LOGD("logEvent:" + name);
        mAnalytics.logEvent(name, bundleFromJson(jsonParams));
    }
    @JavascriptInterface
    public void setUserProperty(String name, String value) {
        LOGD("setUserProperty:" + name);
        mAnalytics.setUserProperty(name, value);
    }
    private void LOGD(String message) {
        // Only log on debug builds, for privacy
        if (BuildConfig.DEBUG) {
            Log.d(TAG, message);
        }
    }
    private Bundle bundleFromJson(String json) {
        // [START_EXCLUDE]
        if (TextUtils.isEmpty(json)) {
            return new Bundle();
        }

        Bundle result = new Bundle();
        try {
            JSONObject jsonObject = new JSONObject(json);
            Iterator<String> keys = jsonObject.keys();

            while (keys.hasNext()) {
                String key = keys.next();
                Object value = jsonObject.get(key);
                if (value instanceof String) {
                    result.putString(key, (String) value);
                } else if (value instanceof Integer) {
                    result.putInt(key, (Integer) value);
                } else if (value instanceof Double) {
                    result.putDouble(key, (Double) value);
                } else {
                    Log.w(TAG, "Value for key " + key + " not one of [String, Integer, Double]");
                }
            }
        } catch (JSONException e) {
            Log.w(TAG, "Failed to parse JSON, returning empty Bundle.", e);
            return new Bundle();
        }
        return result;
        // [END_EXCLUDE]
    }

Giờ đây , bạn đã thiết lập giao diện Javascript và sẵn sàng bắt đầu gửi các sự kiện phân tích.

4. Gửi sự kiện thông qua giao diện

Như bạn có thể thấy ở đây, Webview của tôi rất đơn giản, có 3 nút, 2 nút sẽ ghi lại một sự kiện và nút còn lại sẽ ghi lại một thuộc tính người dùng :

Sau khi tôi nhấp vào các nút, tệp "script.js" sẽ được gọi và thực thi đoạn mã sau :

document.getElementById("event1").addEventListener("click", function() {
    console.log("event1");
    logEvent("event1", { foo: "bar", baz: 123 });
});

document.getElementById("event2").addEventListener("click", function() {
  console.log("event2");
    logEvent("event2", { size: 123.456 });
});

document.getElementById("userprop").addEventListener("click", function() {
    console.log("userprop");
    setUserProperty("userprop", "custom_value");
});

Tệp script.js cuối cùng :

/* If you're feeling fancy you can add interactivity 
    to your site with Javascript */

// prints "hi" in the browser's dev tools console
console.log("hi");

// [START log_event]
function logEvent(name, params) {
  if (!name) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android interface
    window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.firebase) {
    // Call iOS interface
    var message = {
      command: 'logEvent',
      name: name,
      parameters: params
    };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS interface found
    console.log("No native APIs found.");
  }
}
// [END log_event]

// [START set_user_property]
function setUserProperty(name, value) {
  if (!name || !value) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android interface
    window.AnalyticsWebInterface.setUserProperty(name, value);
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.firebase) {
    // Call iOS interface
    var message = {
      command: 'setUserProperty',
      name: name,
      value: value
   };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS interface found
    console.log("No native APIs found.");
  }
}
// [END set_user_property]

document.getElementById("event1").addEventListener("click", function() {
    console.log("event1");
    logEvent("event1", { foo: "bar", baz: 123 });
});

document.getElementById("event2").addEventListener("click", function() {
  console.log("event2");
    logEvent("event2", { size: 123.456 });
});

document.getElementById("userprop").addEventListener("click", function() {
    console.log("userprop");
    setUserProperty("userprop", "custom_value");
});

Đây là cách cơ bản để gửi sự kiện vào Analytics

5. Gỡ lỗi sự kiện WebView trong Firebase

Việc gỡ lỗi các sự kiện Webview trong ứng dụng của bạn cũng tương tự như việc gỡ lỗi mọi phần gốc của SDK :

Để bật Chế độ gỡ lỗi, vui lòng sử dụng các lệnh sau trong bảng điều khiển Android Studio:

adb shell setprop debug.firebase.analytics.app package_name

Sau khi hoàn tất, bạn có thể kiểm thử và xem các sự kiện Webview của mình hoạt động :

6. Xin chúc mừng

Xin chúc mừng, bạn đã tạo thành công một webview trong ứng dụng Android. Bạn có thể gửi và đo lường các sự kiện chính trong phễu diễn ra thông qua webview trong ứng dụng của mình. Để tận dụng tối đa tính năng này, bạn cũng nên kết nối với Google Ads và nhập những sự kiện này dưới dạng lượt chuyển đổi.

Bạn đã tìm hiểu

Cách gửi sự kiện Webview đến Firebase
Cách thiết lập và tạo một WebView đơn giản trong Android

Triển khai Google Analytics cho Firebase trong Android Webview Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.