1. शुरुआती जानकारी
पिछली बार अपडेट किए जाने की तारीख: 03-02-2022
आपको इनके बारे में जानकारी मिलेगी
- Android में बेहद आसान वेबव्यू बनाने का तरीका
- Firebase में वेबव्यू इवेंट भेजने का तरीका
आपको इन चीज़ों की ज़रूरत होगी
- Analytics SDK टूल वाला Firebase प्रोजेक्ट
- Android Studio 4.2 के बाद का वर्शन.
- Android 5.0 या इसके बाद के वर्शन वाला Android Emulator.
- Java प्रोग्रामिंग भाषा की जानकारी.
- JavaScript प्रोग्रामिंग भाषा की जानकारी.
2. Android में आसान वेबव्यू बनाना
गतिविधि के लेआउट में वेबव्यू जोड़ना
लेआउट में अपने ऐप्लिकेशन में वेबव्यू जोड़ने के लिए, अपनी गतिविधि के लेआउट की एक्सएमएल फ़ाइल में यह कोड जोड़ें:
<?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() में वेबव्यू जोड़ना
वेबव्यू में किसी वेब पेज को लोड करने के लिए, 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 का इस्तेमाल करना
अगर आपको अपने वेबव्यू में जिस वेब पेज को लोड करना है, अगर वह JavaScript का इस्तेमाल करता है, तो आपको अपने वेबव्यू के लिए JavaScript को चालू करना होगा. JavaScript चालू होने के बाद, अपने ऐप्लिकेशन कोड और JavaScript कोड के बीच इंटरफ़ेस भी बनाए जा सकते हैं.
वेबव्यू में JavaScript की सुविधा डिफ़ॉल्ट रूप से बंद रहती है. अपने वेबव्यू से अटैच की गई वेबव्यू से जुड़ी वेबव्यू सेटिंग के ज़रिए, इसे चालू किया जा सकता है. आप getSettings() की मदद से WebSettings को फिर से पा सकते हैं, फिर 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 के लिए ब्रिज वाला इंटरफ़ेस लागू करना
Javaक्रिप्ट हैंडलर
वेबव्यू में Google Analytics का इस्तेमाल करने का पहला कदम, इवेंट और उपयोगकर्ता प्रॉपर्टी को नेटिव कोड पर फ़ॉरवर्ड करने के लिए JavaScript फ़ंक्शन बनाना है. नीचे दिए गए उदाहरण में ऐसा करने का तरीका बताया गया है जो Android और Apple के नेटिव कोड, दोनों के साथ काम करता है:
इस उदाहरण में, मैंने script.js नाम की एक JavaScript फ़ाइल बनाई है, जिसमें ये शामिल हैं :
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 से नेटिव Android कोड शुरू करने के लिए, @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. इंटरफ़ेस के ज़रिए इवेंट भेजना
जैसा कि आपको यहां दिख रहा है कि मेरा वेबव्यू बहुत आसान है. इसमें तीन बटन हैं, दो बटन किसी इवेंट को लॉग करेंगे और दूसरा बटन किसी उपयोगकर्ता प्रॉपर्टी को लॉग करेगा :
बटन पर क्लिक करने के बाद, यह मेरे "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. Firebase में वेबव्यू इवेंट डीबग करें
अपने ऐप्लिकेशन में वेबव्यू इवेंट को डीबग करने की सुविधा, SDK टूल के किसी नेटिव हिस्से को डीबग करने की तरह ही काम करती है :
डीबग मोड चालू करने के लिए, कृपया अपने Android Studio कंसोल में इन निर्देशों का इस्तेमाल करें:
adb shell setprop debug.firebase.analytics.app package_name
एक बार काम पूरा करने के बाद, अपने वेबव्यू इवेंट को लाइव होते हुए देखा जा सकता है और उसकी जांच की जा सकती है :
6. बधाई
बधाई हो, आपने अपने Android ऐप्लिकेशन में वेबव्यू बना लिया है. आपके पास, वेबव्यू के ज़रिए होने वाले मुख्य फ़नल इवेंट को भेजने और उन्हें मेज़र करने का विकल्प है. इसका ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, हमारा यह भी सुझाव है कि आप अपने खाते को Google Ads से कनेक्ट करें और इन इवेंट को कन्वर्ज़न के तौर पर इंपोर्ट करें.
आपने सीखा
- Firebase को वेबव्यू इवेंट भेजने का तरीका
- Android में आसान वेबव्यू सेट अप करने और बनाने का तरीका