একটি WebView এ Analytics ব্যবহার করুন

ওয়েবভিউ-এর ভেতর থেকে ইভেন্ট লগ করতে বা ব্যবহারকারীর প্রোপার্টি সেট করতে করা কলগুলোকে Google Analytics এ পাঠানোর আগে অবশ্যই নেটিভ কোডে ফরোয়ার্ড করতে হবে।

জাভাস্ক্রিপ্ট হ্যান্ডলার প্রয়োগ করুন

একটি WebView-তে 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 থেকে জাভাস্ক্রিপ্ট হ্যান্ডলারকে কল করুন

পূর্ববর্তী ধাপে সংজ্ঞায়িত জাভাস্ক্রিপ্ট ফাংশনগুলো কল করার মাধ্যমে আপনি একটি 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 কল করতে পারেন।

সুইফট

দ্রষ্টব্য: এই Firebase পণ্যটি macOS-এ উপলব্ধ নয়।
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"]];
  }
}

অবশেষে, ওয়েবভিউ-এর ইউজার কন্টেন্ট কন্ট্রোলারে মেসেজ হ্যান্ডলারটি যোগ করুন:

সুইফট

দ্রষ্টব্য: এই Firebase পণ্যটি macOS-এ উপলব্ধ নয়।
self.webView.configuration.userContentController.add(self, name: "firebase")

উদ্দেশ্য-সি

দ্রষ্টব্য: এই Firebase পণ্যটি macOS-এ উপলব্ধ নয়।
[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-তে চলমান জাভাস্ক্রিপ্ট কোডের কাছে এটি দৃশ্যমান হয়:

// 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 যথাসম্ভব ইন-অ্যাপ কেনাকাটা স্বয়ংক্রিয়ভাবে লগ করা চালিয়ে যাবে এবং ম্যানুয়ালি লগ করা কোনো ইন-অ্যাপ কেনাকাটার ইভেন্টের ডুপ্লিকেট অপসারণ করবে না।

পরবর্তী পদক্ষেপ

WebView-তে Google Analytics এর একটি সম্পূর্ণ কার্যকরী বাস্তবায়নের জন্য, analytics-webview নমুনাটি দেখুন।