1. ভূমিকা
শেষ আপডেট: 2022-02-03
আপনি কি শিখবেন
- অ্যান্ড্রয়েডে কীভাবে একটি খুব সাধারণ ওয়েবভিউ তৈরি করবেন
- ফায়ারবেসে ওয়েবভিউ ইভেন্টগুলি কীভাবে পাঠাবেন
আপনি কি প্রয়োজন হবে
- Analytics SDK সহ Firebase প্রকল্প বাস্তবায়িত হয়েছে৷
- অ্যান্ড্রয়েড স্টুডিও সংস্করণ 4.2+।
- Android 5.0+ সহ একটি Android এমুলেটর।
- জাভা প্রোগ্রামিং ভাষার সাথে পরিচিতি।
- জাভাস্ক্রিপ্ট প্রোগ্রামিং ভাষার সাথে পরিচিতি।
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 এ একটি ওয়েব পৃষ্ঠা লোড করতে, loadUrl() ব্যবহার করুন। ওয়েবভিউ কালো কার্যকলাপে তৈরি করা উচিত উদাহরণস্বরূপ আমি এটি 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" />
একটি বেসিক ওয়েবভিউ যা একটি ওয়েব পৃষ্ঠা প্রদর্শন করে তার জন্য এটিই আপনার প্রয়োজন৷
ওয়েবভিউতে জাভাস্ক্রিপ্ট ব্যবহার করা
আপনার ওয়েবভিউতে আপনি যে ওয়েব পৃষ্ঠাটি লোড করার পরিকল্পনা করছেন তা যদি JavaScript ব্যবহার করে, তাহলে আপনাকে অবশ্যই আপনার WebView এর জন্য JavaScript সক্রিয় করতে হবে। একবার JavaScript সক্ষম হয়ে গেলে, আপনি আপনার অ্যাপ কোড এবং আপনার JavaScript কোডের মধ্যে ইন্টারফেসও তৈরি করতে পারেন।
জাভাস্ক্রিপ্ট ডিফল্টরূপে ওয়েব ভিউতে অক্ষম করা থাকে। আপনি আপনার WebView এর সাথে সংযুক্ত WebSettings এর মাধ্যমে এটি সক্ষম করতে পারেন৷ আপনি getSettings() দিয়ে WebSettings পুনরুদ্ধার করতে পারেন, তারপর setJavaScriptEnabled() দিয়ে JavaScript সক্ষম করতে পারেন।
যেমন:
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. জাভাস্ক্রিপ্ট ব্রিজড ইন্টারফেস বাস্তবায়ন করা
জাভাক্রিপ্ট হ্যান্ডলার
একটি WebView-এ Google Analytics ব্যবহার করার প্রথম ধাপ হল জাভাস্ক্রিপ্ট ফাংশন তৈরি করা যাতে ইভেন্ট এবং ব্যবহারকারীর বৈশিষ্ট্য নেটিভ কোডে ফরওয়ার্ড করা যায়। নিম্নলিখিত উদাহরণটি Android এবং Apple নেটিভ কোডের সাথে সামঞ্জস্যপূর্ণ এমন একটি উপায়ে কীভাবে এটি করতে হয় তা দেখায়:
এই উদাহরণে আমি 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. ইন্টারফেসের মাধ্যমে ইভেন্ট পাঠানো
আপনি এখানে দেখতে পাচ্ছেন যে আমার ওয়েবভিউটি খুব সহজ এতে তিনটি বোতাম রয়েছে দুটি যা একটি ইভেন্ট লগ করবে এবং অন্যটি ব্যবহারকারীর সম্পত্তি লগ করবে:
একবার আমি বোতামগুলিতে ক্লিক করলে এটি আমার "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");
});
এটি অ্যানালিটিক্সে ইভেন্ট পাঠানোর প্রাথমিক উপায়
5. ফায়ারবেসে ওয়েবভিউ ইভেন্টগুলি ডিবাগ করুন৷
আপনার অ্যাপে ওয়েবভিউ ইভেন্টগুলি ডিবাগ করা আপনার SDK-এর যেকোনো নেটিভ অংশ ডিবাগ করার মতোই কাজ করে:
ডিবাগ মোড সক্ষম করতে আপনার অ্যান্ড্রয়েড স্টুডিও কনসোলে নিম্নলিখিত কমান্ডগুলি ব্যবহার করুন:
adb shell setprop debug.firebase.analytics.app package_name
একবার হয়ে গেলে আপনি পরীক্ষা করে দেখতে পারেন আপনার ওয়েবভিউ ইভেন্টগুলি জীবন্ত হয়ে উঠেছে:
6. অভিনন্দন
অভিনন্দন, আপনি সফলভাবে আপনার অ্যান্ড্রয়েড অ্যাপে একটি ওয়েবভিউ তৈরি করেছেন। আপনি ওয়েবভিউগুলির মাধ্যমে আপনার অ্যাপের মূল ফানেল ইভেন্টগুলি পাঠাতে এবং পরিমাপ করতে পারেন। এটির সর্বাধিক সুবিধা পাওয়ার জন্য, আমরা Google Ads-এর সাথে সংযোগ করার এবং রূপান্তর হিসাবে এই ইভেন্টগুলি আমদানি করার পরামর্শ দিই।
আপনি শিখেছেন
- ফায়ারবেসে ওয়েবভিউ ইভেন্টগুলি কীভাবে পাঠাবেন
- অ্যান্ড্রয়েডে কীভাবে একটি সাধারণ ওয়েবভিউ সেটআপ এবং তৈরি করবেন