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

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

1. הקדמה

עדכון אחרון: 2022-02-03

מה תלמד

כיצד ליצור תצוגת אינטרנט פשוטה מאוד באנדרואיד
כיצד לשלוח אירועי Webview ל-Firebase

מה אתה צריך

פרויקט Firebase עם יישום SDK של Analytics
Android Studio גרסה 4.2+.
אמולטור אנדרואיד עם אנדרואיד 5.0+.
היכרות עם שפת התכנות Java.
היכרות עם שפת התכנות Javascript.

2. צור תצוגת אינטרנט פשוטה באינטרנט באנדרואיד

הוספת 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");
 }
}

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

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

זה כל מה שאתה צריך עבור WebView בסיסי שמציג דף אינטרנט.

שימוש ב-Javascript בתצוגות אינטרנט

אם דף האינטרנט שאתה מתכנן לטעון ב-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 בגישור

מטפל Javascript

הצעד הראשון בשימוש ב-Google Analytics ב-WebView הוא יצירת פונקציות JavaScript כדי להעביר אירועים ומאפייני משתמש לקוד מקורי. הדוגמה הבאה מראה כיצד לעשות זאת בצורה שתואמת הן לקוד מקורי של אנדרואיד והן של אפל:

בדוגמה זו יצרתי קובץ 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.");
  }
}

ממשק מקורי

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

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

adb shell setprop debug.firebase.analytics.app package_name

לאחר שתסיים, תוכל לבדוק ולראות את אירועי ה-Webview שלך מתעוררים לחיים:

6. מזל טוב

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

למדת

כיצד לשלוח אירועי Webview ל-Firebase
כיצד להגדיר וליצור תצוגת אינטרנט פשוטה באנדרואיד