इस पेज का अनुवाद Cloud Translation API से किया गया है.

एंड्रॉइड वेबव्यू में फायरबेस के लिए Google Analytics लागू करना

1 परिचय

अंतिम अद्यतन: 2022-02-03

आप क्या सीखेंगे

एंड्रॉइड में एक बहुत ही सरल वेबव्यू कैसे बनाएं
फायरबेस में वेबव्यू इवेंट कैसे भेजें

आपको किस चीज़ की ज़रूरत पड़ेगी

एनालिटिक्स एसडीके के साथ फायरबेस प्रोजेक्ट लागू किया गया
एंड्रॉइड स्टूडियो संस्करण 4.2+।
एंड्रॉइड 5.0+ के साथ एक एंड्रॉइड एमुलेटर।
जावा प्रोग्रामिंग भाषा से परिचित होना।
जावास्क्रिप्ट प्रोग्रामिंग भाषा से परिचित होना।

2. एंड्रॉइड में एक सरल वेब वेबव्यू बनाएं

गतिविधि लेआउट में वेबव्यू जोड़ना

लेआउट में अपने ऐप में वेबव्यू जोड़ने के लिए, अपनी गतिविधि के लेआउट 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 जोड़ना

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" />

एक वेब पेज प्रदर्शित करने वाले बुनियादी वेबव्यू के लिए आपको बस इतना ही चाहिए।

वेबव्यू में जावास्क्रिप्ट का उपयोग करना

यदि आप जिस वेब पेज को अपने वेबव्यू में लोड करने की योजना बना रहे हैं वह जावास्क्रिप्ट का उपयोग करता है, तो आपको अपने वेबव्यू के लिए जावास्क्रिप्ट को सक्षम करना होगा। एक बार जावास्क्रिप्ट सक्षम हो जाने पर, आप अपने ऐप कोड और अपने जावास्क्रिप्ट कोड के बीच इंटरफेस भी बना सकते हैं।

वेबव्यू में जावास्क्रिप्ट डिफ़ॉल्ट रूप से अक्षम है। आप इसे अपने वेबव्यू से जुड़ी वेबसेटिंग्स के माध्यम से सक्षम कर सकते हैं। आप getSettings() के साथ वेबसेटिंग्स को पुनः प्राप्त कर सकते हैं, फिर 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. जावास्क्रिप्ट ब्रिज इंटरफ़ेस को कार्यान्वित करना

जावास्क्रिप्ट हैंडलर

वेबव्यू में Google Analytics का उपयोग करने में पहला कदम घटनाओं और उपयोगकर्ता गुणों को मूल कोड में अग्रेषित करने के लिए जावास्क्रिप्ट फ़ंक्शन बनाना है। निम्नलिखित उदाहरण दिखाता है कि इसे इस तरह से कैसे किया जाए जो Android और Apple दोनों के मूल कोड के साथ संगत हो:

इस उदाहरण में मैंने स्क्रिप्ट.जेएस नामक एक जावास्क्रिप्ट फ़ाइल बनाई है जिसमें निम्नलिखित शामिल हैं:

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");
});

अंतिम स्क्रिप्ट.जेएस फ़ाइल:

/* 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. फायरबेस में वेबव्यू इवेंट को डीबग करें

आपके ऐप में वेबव्यू ईवेंट को डीबग करना उसी तरह काम करता है जैसे आपके एसडीके के किसी मूल भाग को डीबग करना:

डिबग मोड को सक्षम करने के लिए कृपया अपने एंड्रॉइड स्टूडियो कंसोल में निम्नलिखित कमांड का उपयोग करें:

adb shell setprop debug.firebase.analytics.app package_name

एक बार यह हो जाने पर आप परीक्षण कर सकते हैं और अपने वेबव्यू इवेंट को जीवंत होते देख सकते हैं:

6. बधाई हो

बधाई हो, आपने अपने एंड्रॉइड ऐप में सफलतापूर्वक एक वेबव्यू बना लिया है। आप अपने ऐप में वेबव्यू के माध्यम से होने वाली प्रमुख फ़नल घटनाओं को भेज और माप सकते हैं। इसका अधिकतम लाभ उठाने के लिए, हम Google Ads से जुड़ने और इन घटनाओं को रूपांतरण के रूप में आयात करने का भी सुझाव देते हैं।

आपने सीखा है

फायरबेस पर वेबव्यू इवेंट कैसे भेजें
एंड्रॉइड में एक सरल वेबव्यू कैसे सेटअप करें और बनाएं