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