การใช้ Google Analytics สำหรับ Firebase ใน Android Webview

1. บทนำ

อัปเดตล่าสุด: 2022-02-03

8cef5cc6581b73d0.png

สิ่งที่คุณจะได้เรียนรู้

  • วิธีสร้าง Webview ที่ง่ายมากใน Android
  • วิธีส่งเหตุการณ์ Webview ไปยัง Firebase

สิ่งที่คุณต้องการ

  • ใช้งานโปรเจ็กต์ Firebase พร้อม Analytics SDK
  • ระบบปฏิบัติการ Android เวอร์ชัน 4.2 ขึ้นไป
  • โปรแกรมจำลอง Android พร้อม Android 5.0+
  • ความคุ้นเคยกับภาษาการเขียนโปรแกรม Java
  • ความคุ้นเคยกับภาษาการเขียนโปรแกรม Javascript

2. สร้าง Webview เว็บอย่างง่ายใน Android

การเพิ่ม Webview ในเค้าโครงกิจกรรม

หากต้องการเพิ่ม WebView ให้กับแอปของคุณในเลย์เอาต์ ให้เพิ่มโค้ดต่อไปนี้ลงในไฟล์ XML เลย์เอาต์ของกิจกรรมของคุณ:

<?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>;

การเพิ่ม WebView ใน onCreate()

หากต้องการโหลดหน้าเว็บใน WebView ให้ใช้ loadUrl() ควรสร้าง Webview บนกิจกรรมสีดำ ตัวอย่างเช่น ฉันจะใช้สิ่งนี้กับเมธอด 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");
 }
}

ก่อนที่จะใช้งานได้ แอปของคุณต้องสามารถเข้าถึงอินเทอร์เน็ตได้ หากต้องการเข้าถึงอินเทอร์เน็ต โปรดขอสิทธิ์อินเทอร์เน็ตในไฟล์ Manifest ของคุณ ตัวอย่างเช่น:

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

นั่นคือทั้งหมดที่คุณต้องการสำหรับ WebView พื้นฐานที่แสดงหน้าเว็บ

การใช้ Javascript ใน Webviews

หากหน้าเว็บที่คุณวางแผนจะโหลดใน WebView ใช้ JavaScript คุณต้องเปิดใช้งาน JavaScript สำหรับ WebView ของคุณ เมื่อเปิดใช้งาน JavaScript แล้ว คุณสามารถสร้างอินเทอร์เฟซระหว่างโค้ดแอปและโค้ด JavaScript ของคุณได้

JavaScript ถูกปิดใช้งานใน WebView ตามค่าเริ่มต้น คุณสามารถเปิดใช้งานได้ผ่าน WebSettings ที่แนบมากับ WebView ของคุณ คุณสามารถดึงข้อมูล WebSettings ได้ด้วย getSettings() จากนั้นเปิดใช้งาน JavaScript ด้วย setJavaScriptEnabled()

ตัวอย่างเช่น:

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

อัพเดทกิจกรรม :

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");
  }
}

be627fcc51a6179f.png

3. การใช้อินเทอร์เฟซบริดจ์ Javascript

ตัวจัดการจาวาสคริปต์

ขั้นตอนแรกในการใช้ Google Analytics ใน WebView คือการสร้างฟังก์ชัน JavaScript เพื่อส่งต่อเหตุการณ์และคุณสมบัติผู้ใช้ไปยังโค้ดแบบเนทีฟ ตัวอย่างต่อไปนี้แสดงวิธีดำเนินการนี้ในลักษณะที่เข้ากันได้กับทั้งโค้ดเนทีฟของ Android และ Apple:

ในตัวอย่างนี้ ฉันสร้างไฟล์ Javascript ชื่อ script.js ซึ่งมีดังต่อไปนี้:

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.");
  }
}

อินเทอร์เฟซดั้งเดิม

หากต้องการเรียกใช้โค้ด Android แบบเนทีฟจาก JavaScript ให้ใช้คลาสที่มีเมธอดที่ทำเครื่องหมายว่า @JavaScriptInterface : ในตัวอย่างด้านล่าง ฉันได้สร้างคลาส Java ใหม่ชื่อ : 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);
}

รหัสสุดท้าย :

// [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]
    }

คุณได้ตั้งค่าอินเทอร์เฟซ Javascript แล้ว ตอนนี้คุณพร้อมที่จะเริ่มส่งเหตุการณ์การวิเคราะห์แล้ว

4. การส่งกิจกรรมผ่านอินเทอร์เฟซ

อย่างที่คุณเห็นที่นี่ Webview ของฉันนั้นง่ายมาก มันมีสามปุ่มสองปุ่มซึ่งจะบันทึกเหตุการณ์และอีกปุ่มหนึ่งจะบันทึกคุณสมบัติผู้ใช้:

7a00ed1192151b19.png

เมื่อฉันคลิกที่ปุ่มต่างๆ มันจะเรียกไฟล์ "script.js" ของฉันและรันโค้ดต่อไปนี้:

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");
});

ไฟล์ script.js สุดท้าย:

/* 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");
});

นี่เป็นวิธีพื้นฐานในการส่งเหตุการณ์ไปยัง Analytics

5. แก้ไขข้อบกพร่องเหตุการณ์ Webview ใน Firebase

การดีบักเหตุการณ์ Webview ในแอปของคุณทำงานในลักษณะเดียวกับการดีบักส่วนดั้งเดิมของ SDK ของคุณ :

หากต้องการเปิดใช้งานโหมด Debug โปรดใช้คำสั่งต่อไปนี้ในคอนโซล Android Studio ของคุณ:

adb shell setprop debug.firebase.analytics.app package_name

เมื่อเสร็จแล้ว คุณสามารถทดสอบและดูกิจกรรม Webview ของคุณได้:

d230debf4ccfddad.png

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

ยินดีด้วย คุณสร้าง webview ในแอป Android สำเร็จแล้ว คุณสามารถส่งและวัดเหตุการณ์ช่องทางสำคัญในแอปของคุณที่เกิดขึ้นผ่าน WebView เพื่อให้ได้รับประโยชน์สูงสุดจากสิ่งนี้ เราขอแนะนำให้เชื่อมต่อกับ Google Ads และนำเข้าเหตุการณ์เหล่านี้เป็น Conversion

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

  • วิธีส่งเหตุการณ์ Webview ไปยัง Firebase
  • วิธีการตั้งค่าและสร้าง Webview อย่างง่ายใน Android

เอกสารอ้างอิง