این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

پیاده سازی Google Analytics برای Firebase در وب ویو اندروید

1. معرفی

آخرین به روز رسانی: 2022-02-03

چیزی که یاد خواهید گرفت

چگونه یک Webview بسیار ساده در اندروید ایجاد کنیم
نحوه ارسال رویدادهای Webview به Firebase

آنچه شما نیاز دارید

پروژه Firebase با Analytics SDK اجرا شده است
اندروید استودیو نسخه 4.2+.
شبیه ساز اندروید با اندروید 5.0 و بالاتر.
آشنایی با زبان برنامه نویسی جاوا.
آشنایی با زبان برنامه نویسی جاوا اسکریپت.

2. یک Webview ساده در اندروید ایجاد کنید

افزودن 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 اولیه که یک صفحه وب را نمایش می دهد نیاز دارید.

استفاده از جاوا اسکریپت در Webviews

اگر صفحه وبی که می‌خواهید در WebView بارگیری کنید از جاوا اسکریپت استفاده می‌کند، باید جاوا اسکریپت را برای WebView خود فعال کنید. پس از فعال شدن جاوا اسکریپت، می توانید رابط هایی بین کد برنامه و کد جاوا اسکریپت خود ایجاد کنید.

جاوا اسکریپت در WebView به طور پیش فرض غیرفعال است. شما می توانید آن را از طریق تنظیمات وب متصل به WebView خود فعال کنید. می توانید WebSettings را با getSettings() بازیابی کنید، سپس جاوا اسکریپت را با 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. پیاده سازی رابط پل شده جاوا اسکریپت

کنترل کننده جاوا اسکریپت

اولین قدم در استفاده از Google Analytics در WebView، ایجاد توابع جاوا اسکریپت برای ارسال رویدادها و ویژگی های کاربر به کد بومی است. مثال زیر نشان می دهد که چگونه می توان این کار را به گونه ای انجام داد که با کدهای اصلی اندروید و اپل سازگار باشد:

در این مثال من یک فایل جاوا اسکریپت به نام 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.");
  }
}

رابط بومی

برای فراخوانی کد بومی اندروید از جاوا اسکریپت، یک کلاس با متدهایی با علامت @JavaScriptInterface پیاده سازی کنید: در مثال زیر یک کلاس جاوا جدید به نام 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]
    }

اکنون رابط جاوا اسکریپت را راه اندازی کرده اید، اکنون آماده شروع ارسال رویدادهای تحلیلی هستید.

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 شما عمل می کند:

برای فعال کردن حالت Debug لطفا از دستورات زیر در کنسول اندروید استودیو خود استفاده کنید:

adb shell setprop debug.firebase.analytics.app package_name

پس از اتمام، می توانید رویدادهای Webview خود را آزمایش کرده و مشاهده کنید:

6. تبریک می گویم

تبریک می‌گوییم، شما با موفقیت یک نمای وب در برنامه اندروید خود ایجاد کردید. می‌توانید رویدادهای قیف کلیدی را که از طریق وب‌نماها انجام می‌شوند در برنامه خود ارسال و اندازه‌گیری کنید. برای استفاده حداکثری از این، ما همچنین اتصال به Google Ads و وارد کردن این رویدادها را به عنوان تبدیل پیشنهاد می‌کنیم.

تو یاد گرفتی

نحوه ارسال رویدادهای Webview به Firebase
نحوه راه اندازی و ایجاد یک Webview ساده در اندروید