Android Webview-এ Firebase-এর জন্য Google Analytics প্রয়োগ করা

1. ভূমিকা

শেষ আপডেট: ২০২২-০২-০৩

8cef5cc6581b73d0.png সম্পর্কে

তুমি কি শিখবে

  • অ্যান্ড্রয়েডে কীভাবে খুব সহজ একটি ওয়েবভিউ তৈরি করবেন
  • ফায়ারবেসে ওয়েবভিউ ইভেন্টগুলি কীভাবে পাঠাবেন

তোমার যা লাগবে

  • অ্যানালিটিক্স SDK সহ ফায়ারবেস প্রকল্প বাস্তবায়িত হয়েছে
  • অ্যান্ড্রয়েড স্টুডিও সংস্করণ ৪.২+।
  • অ্যান্ড্রয়েড ৫.০+ সহ একটি অ্যান্ড্রয়েড এমুলেটর।
  • জাভা প্রোগ্রামিং ভাষার সাথে পরিচিতি।
  • জাভাস্ক্রিপ্ট প্রোগ্রামিং ভাষার সাথে পরিচিতি।

2. অ্যান্ড্রয়েডে একটি সহজ ওয়েব ওয়েবভিউ তৈরি করুন

অ্যাক্টিভিটি লেআউটে ওয়েবভিউ যোগ করা হচ্ছে

লেআউটে আপনার অ্যাপে একটি 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>;

onCreate() এ একটি WebView যোগ করা হচ্ছে

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 সক্ষম হয়ে গেলে, আপনি আপনার অ্যাপ কোড এবং আপনার JavaScript কোডের মধ্যে ইন্টারফেসও তৈরি করতে পারবেন।

ওয়েবভিউতে ডিফল্টভাবে জাভাস্ক্রিপ্ট অক্ষম থাকে। আপনি আপনার ওয়েবভিউয়ের সাথে সংযুক্ত ওয়েবসেটিংস ব্যবহার করে এটি সক্ষম করতে পারেন। আপনি 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");
  }
}

be627fcc51a6179f.png সম্পর্কে

৩. জাভাস্ক্রিপ্ট ব্রিজড ইন্টারফেস বাস্তবায়ন করা

জাভাক্রিপ্ট হ্যান্ডলার

ওয়েবভিউতে গুগল অ্যানালিটিক্স ব্যবহারের প্রথম ধাপ হল জাভাস্ক্রিপ্ট ফাংশন তৈরি করা যাতে ইভেন্ট এবং ব্যবহারকারীর বৈশিষ্ট্যগুলি নেটিভ কোডে ফরোয়ার্ড করা যায়। নিম্নলিখিত উদাহরণটি দেখায় যে কীভাবে এটি এমনভাবে করা যায় যা অ্যান্ড্রয়েড এবং অ্যাপল উভয় নেটিভ কোডের সাথে সামঞ্জস্যপূর্ণ:

এই উদাহরণে আমি 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]
    }

আপনি এখন জাভাস্ক্রিপ্ট ইন্টারফেস সেট আপ করেছেন, আপনি এখন বিশ্লেষণাত্মক ইভেন্ট পাঠানো শুরু করতে প্রস্তুত।

৪. ইন্টারফেসের মাধ্যমে ইভেন্ট পাঠানো

আপনি এখানে দেখতে পাচ্ছেন যে আমার ওয়েবভিউটি খুবই সহজ। এর তিনটি বোতাম রয়েছে দুটি যা একটি ইভেন্ট লগ করবে এবং অন্যটি একটি ব্যবহারকারীর সম্পত্তি লগ করবে:

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

এটি অ্যানালিটিক্সে ইভেন্ট পাঠানোর মৌলিক উপায়।

৫. ফায়ারবেসে ওয়েবভিউ ইভেন্টগুলি ডিবাগ করুন

আপনার অ্যাপে ওয়েবভিউ ইভেন্ট ডিবাগ করা আপনার SDK এর যেকোনো নেটিভ অংশ ডিবাগ করার মতোই কাজ করে:

ডিবাগ মোড সক্ষম করতে আপনার অ্যান্ড্রয়েড স্টুডিও কনসোলে নিম্নলিখিত কমান্ডগুলি ব্যবহার করুন:

adb shell setprop debug.firebase.analytics.app package_name

একবার সম্পন্ন হলে আপনি পরীক্ষা করতে পারবেন এবং আপনার ওয়েবভিউ ইভেন্টগুলি জীবন্ত হয়ে উঠতে দেখতে পারবেন:

d230debf4ccfddad.png সম্পর্কে

৬. অভিনন্দন

অভিনন্দন, আপনি আপনার অ্যান্ড্রয়েড অ্যাপে সফলভাবে একটি ওয়েবভিউ তৈরি করেছেন। আপনি আপনার অ্যাপে ওয়েবভিউয়ের মাধ্যমে সংঘটিত কী ফানেল ইভেন্টগুলি পাঠাতে এবং পরিমাপ করতে পারেন। এর সর্বাধিক সুবিধা পেতে, আমরা Google বিজ্ঞাপনের সাথে সংযোগ স্থাপন এবং এই ইভেন্টগুলিকে রূপান্তর হিসাবে আমদানি করার পরামর্শ দিচ্ছি।

তুমি শিখেছো

  • ফায়ারবেসে ওয়েবভিউ ইভেন্টগুলি কীভাবে পাঠাবেন
  • অ্যান্ড্রয়েডে কীভাবে একটি সহজ ওয়েবভিউ সেটআপ এবং তৈরি করবেন

রেফারেন্স ডক্স