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

۱. مقدمه

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

آنچه یاد خواهید گرفت

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

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

• پروژه فایربیس با کیت توسعه نرم‌افزار تحلیلی (Analytics SDK) پیاده‌سازی شد.
• اندروید استودیو نسخه ۴.۲+
• یک شبیه‌ساز اندروید با اندروید ۵.۰+.
• آشنایی با زبان برنامه نویسی جاوا.
• آشنایی با زبان برنامه نویسی جاوا اسکریپت.

۲. یک وب ویو ساده در اندروید ایجاد کنید

اضافه کردن وب ویو در طرح بندی فعالیت

برای افزودن یک وب ویو به طرح‌بندی برنامه‌تان، کد زیر را به فایل 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>;

افزودن یک وب ویو در onCreate()

برای بارگذاری یک صفحه وب در WebView، از loadUrl() استفاده کنید. Webview باید در activity سیاه ایجاد شود. برای مثال، من این را در متد 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 پایه که یک صفحه وب را نمایش می‌دهد، نیاز دارید.

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

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

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

۳. پیاده‌سازی رابط پل‌سازی‌شده با جاوااسکریپت

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

اولین قدم برای استفاده از گوگل آنالیتیکس در یک وب‌ویو، ایجاد توابع جاوا اسکریپت برای ارسال رویدادها و ویژگی‌های کاربر به کد بومی است. مثال زیر نحوه انجام این کار را به روشی که با کد بومی اندروید و اپل سازگار باشد، نشان می‌دهد:

در این مثال، من یک فایل جاوا اسکریپت با نام 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]
    }

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

۴. ارسال رویدادها از طریق رابط

همانطور که می‌بینید، وب‌ویو من بسیار ساده است و سه دکمه دارد که دو تای آنها یک رویداد را ثبت می‌کنند و دیگری یک ویژگی کاربر را ثبت می‌کند:

وقتی روی دکمه‌ها کلیک می‌کنم، فایل "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");
});

این روش اساسی برای ارسال رویدادها به آنالیتیکس است.

۵. اشکال‌زدایی رویدادهای وب‌ویو در فایربیس

اشکال‌زدایی رویدادهای وب‌ویو در برنامه شما مانند اشکال‌زدایی هر بخش بومی SDK شما عمل می‌کند:

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

adb shell setprop debug.firebase.analytics.app package_name

پس از انجام این کار، می‌توانید رویدادهای Webview خود را آزمایش کرده و ببینید که چگونه به واقعیت تبدیل می‌شوند:

۶. تبریک

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

یاد گرفتی.

• نحوه ارسال رویدادهای وب ویو به فایربیس
• نحوه راه اندازی و ایجاد یک وب ویو ساده در اندروید

اسناد مرجع

• پیاده‌سازی SDK تحلیلی فایربیس
• پیاده‌سازی رابط پل جاوااسکریپت
• ساخت یک وب ویو در برنامه شما