דף זה תורגם על ידי Cloud Translation API.

הטמעה של Google Analytics for Firebase ב-Android Webview

1. מבוא

העדכון האחרון: 3 בפברואר 2022

מה תלמדו

איך יוצרים תצוגת WebView פשוטה מאוד ב-Android
איך שולחים אירועים של Webview אל Firebase

מה צריך

פרויקט Firebase עם הטמעה של Analytics SDK
גרסה 4.2 ואילך של Android Studio.
‫Android Emulator עם 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");
 }
}

עם זאת, כדי שהאפשרות הזו תפעל, לאפליקציה שלכם צריכה להיות גישה לאינטרנט. כדי לקבל גישה לאינטרנט, צריך לבקש את ההרשאה INTERNET בקובץ המניפסט. לדוגמה:

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

3. הטמעה של ממשק מגשר ב-JavaScript

רכיב handler של 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 שלי פשוט מאוד. יש בו שלושה לחצנים, שניים מהם יתעדו אירוע והשלישי יתעד מאפיין משתמש :

אחרי שאני לוחץ על הלחצנים, מתבצעת קריאה לקובץ 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 באפליקציה מתבצע באותו אופן כמו ניפוי שגיאות של כל חלק Native ב-SDK :

כדי להפעיל את מצב ניפוי הבאגים, צריך להשתמש בפקודות הבאות במסוף של Android Studio:

adb shell setprop debug.firebase.analytics.app package_name

אחרי שמסיימים, אפשר לבדוק ולראות את אירועי ה-WebView מתרחשים :

6. מזל טוב

הצלחתם ליצור WebView באפליקציית Android. אתם יכולים לשלוח ולמדוד אירועים מרכזיים במשפך באפליקציה שמתרחשים דרך WebView. כדי להפיק את המרב מהתכונה הזו, מומלץ גם לקשר את החשבון ל-Google Ads ולייבא את האירועים האלה כהמרות.

למדת

איך שולחים אירועים של Webview אל Firebase
איך מגדירים ויוצרים תצוגת WebView פשוטה ב-Android

הטמעה של Google Analytics for Firebase ב-Android Webview קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.