জাভাস্ক্রিপ্ট হ্যান্ডলার বাস্তবায়ন করুন
ওয়েবভিউতে Google Analytics ব্যবহারের প্রথম ধাপ হল জাভাস্ক্রিপ্ট ফাংশন তৈরি করা যাতে ইভেন্ট এবং ব্যবহারকারীর বৈশিষ্ট্যগুলি নেটিভ কোডে ফরোয়ার্ড করা যায়। নিম্নলিখিত উদাহরণটি দেখায় যে কীভাবে এটি এমনভাবে করা যায় যা অ্যান্ড্রয়েড এবং অ্যাপল উভয় নেটিভ কোডের সাথে সামঞ্জস্যপূর্ণ: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."); } }
আপনার WebView থেকে JavaScript হ্যান্ডলারকে কল করুন
পূর্ববর্তী ধাপে সংজ্ঞায়িত জাভাস্ক্রিপ্ট ফাংশনগুলিকে কল করে আপনি WebView এর মধ্যে থেকে ইভেন্টগুলি সঠিকভাবে লগ করতে এবং ব্যবহারকারীর বৈশিষ্ট্য সেট করতে পারেন। নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি ক্রয় ইভেন্ট সঠিকভাবে লগ করতে হয় এবং একটি ব্যবহারকারীর বৈশিষ্ট্য সেট করতে হয় উদাহরণ হিসাবে:function logEventExample() { // Log an event named "purchase" with parameters logEvent("purchase", { content_type: "product", value: 123, currency: "USD", quantity: 2, items: [{ item_id: "sample-item-id", item_variant: "232323" }], transaction_id: "1234567" }); } function logUserPropertyExample() { // Set a user property named 'favorite_genre' setUserProperty("favorite_genre", "comedy") }
নেটিভ ইন্টারফেস বাস্তবায়ন করুন
আপনি iOS বা Android এর জন্য একটি নেটিভ ইন্টারফেস বাস্তবায়ন করতে পারেন।
আইওএস
জাভাস্ক্রিপ্ট থেকে নেটিভ অ্যাপল কোড ব্যবহার করতে, WKScriptMessageHandler প্রোটোকলের সাথে সঙ্গতিপূর্ণ একটি মেসেজ হ্যান্ডলার ক্লাস তৈরি করুন। আপনি userContentController:didReceiveScriptMessage: কলব্যাকের ভিতরে Google Analytics কল করতে পারেন:
সুইফট
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { guard let body = message.body as? [String: Any] else { return } guard let command = body["command"] as? String else { return } guard let name = body["name"] as? String else { return } if command == "setUserProperty" { guard let value = body["value"] as? String else { return } Analytics.setUserProperty(value, forName: name) } else if command == "logEvent" { guard let params = body["parameters"] as? [String: NSObject] else { return } Analytics.logEvent(name, parameters: params) } }
অবজেক্টিভ-সি
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.body[@"command"] isEqual:@"setUserProperty"]) { [FIRAnalytics setUserPropertyString:message.body[@"value"] forName:message.body[@"name"]]; } else if ([message.body[@"command"] isEqual: @"logEvent"]) { [FIRAnalytics logEventWithName:message.body[@"name"] parameters:message.body[@"parameters"]]; } }
অবশেষে, ওয়েবভিউয়ের ব্যবহারকারীর সামগ্রী নিয়ন্ত্রকে বার্তা হ্যান্ডলার যুক্ত করুন:
সুইফট
self.webView.configuration.userContentController.add(self, name: "firebase")
অবজেক্টিভ-সি
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"firebase"];
অ্যান্ড্রয়েড
জাভাস্ক্রিপ্ট থেকে নেটিভ অ্যান্ড্রয়েড কোড ব্যবহার করতে, @JavaScriptInterface চিহ্নিত পদ্ধতি সহ একটি ক্লাস বাস্তবায়ন করুন:
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) { // ... } }
একবার আপনি নেটিভ ইন্টারফেস তৈরি করে ফেললে, এটি আপনার WebView-এর সাথে নিবন্ধন করুন যাতে WebView-এ চলমান JavaScript কোড এটিকে দৃশ্যমান করে:
// 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); }
iOS-এ WebView-এ ম্যানুয়ালি অ্যাপ-ইন ক্রয় ইভেন্ট লগ ইন করুন
আপনি Analytics SDK v12.5.0 বা উচ্চতর সংস্করণ ব্যবহার করে WebView-এ IAP ইভেন্টগুলি ম্যানুয়ালি লগ করতে পারেন।
function logManualPurchaseEvent() {
// For manually tracking in-app purchases within a WebView, log the in-app purchase event:
logEvent("in_app_purchase", {
currency: "USD",
price: 0.99,
product_id: "prod_123",
product_name: "Product 123",
quantity: 1,
value: 0.99,
});
}
মনে রাখবেন যে SDK সম্ভব হলে অ্যাপ-মধ্যস্থ কেনাকাটা স্বয়ংক্রিয়ভাবে লগ করা চালিয়ে যাবে এবং ম্যানুয়ালি লগ করা অ্যাপ-মধ্যস্থ কেনাকাটার কোনও ইভেন্ট ডি-ডুপ্লিকেট করবে না।
পরবর্তী পদক্ষেপ
ওয়েবভিউতে Google Analytics সম্পূর্ণ কার্যকরী বাস্তবায়নের জন্য, অ্যানালিটিক্স-ওয়েবভিউ নমুনাটি দেখুন।