'Firebase के लिए Google Analytics' की मदद से, वेबव्यू में इवेंट ट्रैक करें

1. परिचय

पिछला अपडेट: 25-02-2022

आपको क्या बनाने को मिलेगा

इस कोडलैब में, आपको WebView में मौजूद वेब पेज से इवेंट को नेटिव कोड में फ़ॉरवर्ड करने का तरीका बताया जाएगा, ताकि GA4F उन इवेंट को ट्रैक कर सके.

हम हाइब्रिड Android ऐप्लिकेशन के इस सैंपल का इस्तेमाल करेंगे. यह WebView का इस्तेमाल करके वेब पेज को कॉल करता है.

आपको क्या सीखने को मिलेगा

  • हाइब्रिड ऐप्लिकेशन में GA4F (Google Analytics for Firebase) को कैसे शुरू करें
  • वेब पेज में कस्टम इवेंट और पैरामीटर बनाने का तरीका
  • वेबव्यू में मौजूद वेब पेज पर होने वाले इवेंट को नेटिव कोड पर फ़ॉरवर्ड करने का तरीका
  • डीबग करने का तरीका
  • इवेंट इंपोर्ट करने और उन्हें ऐक्शन कैंपेन के लिए इस्तेमाल करने का तरीका.

आपको इन चीज़ों की ज़रूरत होगी

  • Android Studio 3.6 या इसके बाद का वर्शन
  • Firebase खाता

2. सेट अप करना

कोड पाएं

Firebase की आधिकारिक गाइड में, GitHub पर सैंपल कोड दिया गया है. हमें इस प्रोजेक्ट के लिए इसकी ज़रूरत है.

7074c0e83b5fd4b1.png

शुरू करने के लिए, आपको कोड डाउनलोड करना होगा. इसके बाद, इसे अपने पसंदीदा डेवलपमेंट एनवायरमेंट में खोलें. हम android और web, दो डायरेक्ट्री का इस्तेमाल करेंगे. "android" डायरेक्ट्री, Android ऐप्लिकेशन के लिए होती है. वहीं, "web" डायरेक्ट्री, उस वेब पेज के लिए होती है जिसे ऐप्लिकेशन, WebView के ज़रिए कॉल करेगा.

3. Firebase प्रोजेक्ट बनाना और उसे सेट अप करना

Firebase का इस्तेमाल शुरू करने के लिए, आपको एक Firebase प्रोजेक्ट बनाना और उसे सेट अप करना होगा.

Firebase प्रोजेक्ट बनाना

  1. Firebase में साइन इन करें.

Firebase कंसोल में, 'प्रोजेक्ट जोड़ें' (या 'प्रोजेक्ट बनाएं') पर क्लिक करें. इसके बाद, अपने Firebase प्रोजेक्ट का नाम Webview-test-codelab या अपनी पसंद का कोई भी नाम रखें.

fd93054e27d6b386.png

  1. प्रोजेक्ट बनाने के विकल्पों पर क्लिक करें. अगर आपसे Firebase की शर्तें स्वीकार करने के लिए कहा जाता है, तो उन्हें स्वीकार करें. आपको इस प्रोजेक्ट के लिए Google Analytics चालू करना चाहिए, क्योंकि आपको ऐक्शन इवेंट ट्रैक करने और कन्वर्ज़न का विश्लेषण करने के लिए, Google Analytics इवेंट की ज़रूरत होती है.

d711cb170a42a355.png

Firebase प्रोजेक्ट के बारे में ज़्यादा जानने के लिए, Firebase प्रोजेक्ट के बारे में जानकारी लेख पढ़ें.

4. Android के लिए Firebase कॉन्फ़िगरेशन

Firebase कंसोल में Android ऐप्लिकेशन को कॉन्फ़िगर करना

  1. Firebase कंसोल के होम पेज पर, Android आइकॉन पर क्लिक करें. 143983fdc86ff670.png

इसके अलावा, बाईं ओर मौजूद नेविगेशन बार में प्रोजेक्ट की खास जानकारी पर जाकर, "अपने ऐप्लिकेशन में Firebase जोड़कर शुरू करें" में जाकर, Android बटन पर क्लिक करें

इसके बाद, आपको नीचे दी गई इमेज की तरह "अपने Android ऐप्लिकेशन में Firebase जोड़ें" स्क्रीन दिखेगी.

74e684bd64bd8d9d.png

  1. अपने ऐप्लिकेशन की डायरेक्ट्री में मौजूद android/app/src/main/AndroidManifest.xml में जाकर, Android पैकेज का नाम (उदाहरण के लिए, com.xxxx.myproject) देखा जा सकता है.
package="com.xxxx.myproject"
  1. यहां SHA-1 कुंजी की ज़रूरत नहीं है. इस कुंजी की ज़रूरत सिर्फ़ तब होती है, जब आपको Google से साइन इन करें या Firebase Dynamic Links का इस्तेमाल करना हो या Google Play से इन-ऐप्लिकेशन खरीदारी का डेटा इंपोर्ट करना हो. हालांकि, यह इस कोडलैब के दायरे में नहीं आता.
  2. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
  3. Firebase कंसोल में जाकर, कॉन्फ़िगरेशन फ़ाइल google-services.json डाउनलोड करें. इसके बाद, इस फ़ाइल को अपने ऐप्लिकेशन प्रोजेक्ट की android/app डायरेक्ट्री में कॉपी करके चिपकाएं. a2c930b2dd517980.png
  4. Firebase कंसोल में वापस जाकर, बाकी चरणों को छोड़ें और Firebase कंसोल के मुख्य पेज पर वापस जाएं.
  5. आखिर में, आपको Firebase से जनरेट हुई google-services.json फ़ाइल को पढ़ने के लिए, Google Services Gradle प्लगिन की ज़रूरत होगी
  6. अपने आईडीई या एडिटर में, android/app/build.gradle खोलें. इसके बाद, फ़ाइल में आखिरी लाइन के तौर पर यह लाइन जोड़ें:
apply plugin: 'com.google.gms.google-services'
  1. android/build.gradle खोलें. इसके बाद, buildscript टैग में नई डिपेंडेंसी जोड़ें.
buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}
  1. अगर आपका ऐप्लिकेशन अब भी चल रहा है, तो उसे बंद करें और फिर से बनाएं, ताकि Gradle डिपेंडेंसी इंस्टॉल कर सके.

आपने Android के लिए अपना ऐप्लिकेशन कॉन्फ़िगर कर लिया है!

5. वेब पर Analytics वेब इंटरफ़ेस डेवलप करना और कस्टम इवेंट लॉग करना

Google Analytics की मदद से वेबव्यू में इवेंट ट्रैक करने के लिए, आपको वेब और Android ऐप्लिकेशन, दोनों में कोड डालना होगा.

इस हिस्से में, आइए देखते हैं कि आपको वेब पेज में कौन सा कोड डालना है. a0f31cdf21ea85d1.png

सबसे पहले, एचटीएमएल फ़ाइल में इस्तेमाल करने के लिए एक JavaScript फ़ाइल बनाएं. सैंपल कोड में, js फ़ाइल का नाम index.js है. आपको Android के लिए "AnayticsWebInterface" और iOS के लिए "messageHander" को कॉल करने के लिए, "logEvent" फ़ंक्शन बनाना होगा. इसके लिए, नीचे दिया गया कोड इस्तेमाल करें.

66a13d9290c3b2c7.png

इसके बाद, इस फ़ंक्शन को एचटीएमएल फ़ाइल में उस जगह पर कॉल करें जहां आपको इवेंट को ट्रैक करना है. जैसे, यहां दिया गया है.

1bf11ba7b8fae269.png

जब Android ऐप्लिकेशन में WebView में कोई इवेंट ट्रिगर होता है, तो "window.AnalyticsWebInterface" को कॉल किया जाएगा. यह इवेंट को ऐप्लिकेशन में WebInterface कोड को फ़ॉरवर्ड करेगा.

6. वेब पेज का यूआरएल पाने के लिए, वेब डायरेक्ट्री को होस्ट करना

अपने ऐप्लिकेशन में WebView के अंदर किसी वेब-पेज को कॉल करने से पहले, आपको वेब-पेज के यूआरएल की ज़रूरत होती है. वेब-पेज होस्ट करने के कई तरीके होंगे. इस कोडलैब में, हम Firebase की होस्टिंग सेवा का इस्तेमाल सिर्फ़ सुविधा के लिए करेंगे.

  • अपने टर्मिनल में, वेब डायरेक्ट्री डालें (उदाहरण के लिए, cd web) और ये कमांड चलाएं:
  • npm install -g firebase-tools

इससे Firebase CLI इंस्टॉल हो जाएगी.

  • firebase login
  • firebase init
  • जब आपसे पूछा जाए कि आपको कौनसी सुविधा सेट अप करनी है, तो ‘होस्टिंग' चुनें.
  • वह प्रोजेक्ट चुनें जिसे आपने अपने Android ऐप्लिकेशन के लिए सेट अप किया है.
  • बाकी सभी प्रॉम्प्ट के लिए, डिफ़ॉल्ट सेटिंग स्वीकार करें.
  • firebase deploy --only hosting - Firebase होस्टिंग पर डिप्लॉय करें.

a2c132502ffa8a04.png

  • वेब पेज का यूआरएल मिलने के बाद, Android Studio में अपने ऐप्लिकेशन प्रोजेक्ट पर जाएं. इसके बाद, इस चरण में बनाए गए वेब यूआरएल को WebView में इस तरह डालें.

86b44d7bf72383a7.png

7. Android ऐप्लिकेशन में इंटरफ़ेस कोड डेवलप करना

GA4F की मदद से WebView में इवेंट ट्रैक करने के लिए, आपको वेब और Android, दोनों में कोड डालना होगा. इस हिस्से में, आइए देखते हैं कि WebView में वेब पेज से इवेंट पाने के लिए, आपको Android ऐप्लिकेशन में कौनसा कोड डालना होगा.

"AnalyticsWebInterface" क्लास बनाने के लिए, "AnalyticsWebInterface.java" फ़ाइल बनाएं. इस क्लास में, आपको वेब js फ़ाइल में logEvent फ़ंक्शन को कनेक्ट करने के लिए, @JavascriptInterface को इस तरह कोड करना होगा.

796981318ff44346.png

इसके बाद, आपको उस गतिविधि में JavaScript इंटरफ़ेस जोड़ना होगा जो वेबव्यू को इस तरह कॉल करता है.

b1bd1d9bb50d418f.png

इसके पूरे कोड को देखने के लिए, कृपया उस सैंपल कोड को देखें जिसे आपने "सेट अप करना" चरण में GitHub से डाउनलोड किया था.

8. इवेंट की जांच करना और उन्हें डीबग करना

इवेंट डीबग करने के लिए, टेस्ट डिवाइस को कनेक्ट करने या एम्युलेटर लॉन्च करने के बाद, Android Studio टर्मिनल में इस कोड का इस्तेमाल किया जा सकता है.

> adb shell setprop debug.firebase.analytics.app [app package name]

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

> adb logcat -v time -s FA FA-SVC

अपने ऐप्लिकेशन में "LOG EVENT 1" पर क्लिक करें. अगर आपका कोड सही तरीके से काम करता है, तो आपको नीचे दिए गए जैसा लॉग दिखेगा.

f84d06d3534ad034.png

अगर आपको Firebase कंसोल में इसकी जांच करनी है, तो रीयलटाइम टैब का भी इस्तेमाल किया जा सकता है. Firebase कंसोल पर जाएं और नीचे दिए गए तरीके से, रीयलटाइम टैब पर क्लिक करें.

इसके बाद, "तुलना जोड़ें" फ़ंक्शन का इस्तेमाल करके, Android प्लैटफ़ॉर्म के इवेंट को फ़िल्टर करें.

aa804eb02f0b7d3f.png

अगर आपका कोड सही तरीके से लागू किया गया है, तो आपको Android ऐप्लिकेशन के इवेंट, रीयलटाइम टैब में दिखेंगे. 334afcae650c58d4.png

कुछ घंटों के बाद, Firebase कंसोल में मौजूद इवेंट टैब में जाकर, लॉग किए गए इवेंट देखे जा सकते हैं. Firebase कंसोल में मौजूद Analytics सेक्शन में जाकर, इवेंट टैब पर क्लिक करें. इवेंट event1 में मौजूद वैल्यू देखने के लिए, इवेंट पर क्लिक करें.

b72cf934a76e174b.png

Google Ads में event1 को कन्वर्ज़न के तौर पर इंपोर्ट करने के लिए, इसे कन्वर्ज़न के तौर पर मार्क करें. इसके लिए, कन्वर्ज़न के तौर पर मार्क करें स्विच को दाईं ओर स्लाइड करें.

486010186b929deb.png

अगर इवेंट, कन्वर्ज़न टैब में दिखता है, तो इसका मतलब है कि आपने इवेंट को कन्वर्ज़न के तौर पर मार्क कर दिया है. अब Google Ads, इस इवेंट को Firebase से इंपोर्ट कर पाएगा.

डीबग करने के लिए, Firebase DebugView का इस्तेमाल करें. ज़्यादा जानकारी के लिए, इवेंट को डीबग करना लेख पढ़ें.

9. Google Ads में Analytics इवेंट इंपोर्ट करना

Firebase सेटअप पूरा होने के बाद, ऐक्शन इवेंट के साथ ऐप्लिकेशन कैंपेन लॉन्च किए जा सकते हैं. सबसे पहले, Firebase को Google Ads से लिंक करें. Firebase को Google Ads से लिंक करने पर,ऐप्लिकेशन कैंपेन Firebase इवेंट इंपोर्ट कर सकते हैं. इस प्रोसेस से, Google Ads को ऐप्लिकेशन कैंपेन की परफ़ॉर्मेंस को बेहतर बनाने में भी मदद मिलती है. ऐसा इसलिए, क्योंकि इससे Google Ads को ऑडियंस के बारे में ज़्यादा जानकारी मिलती है.

  1. प्रोजेक्ट की खास जानकारी के बगल में मौजूद बटन पर क्लिक करके, Firebase की सेटिंग पर जाएं.
  2. इंटिग्रेशन टैब में, आपको Google Ads और लिंक करें बटन दिखेगा. लिंक करें पर क्लिक करें. इसके बाद, जारी रखें पर क्लिक करें.

67fc1b7f75f9dcaa.png

  1. Google Ads खाता चुनें.

अब Firebase का काम पूरा हो गया है.

Google Ads पर जाएं.

  1. कस्टम इवेंट को कन्वर्ज़न के तौर पर इंपोर्ट करने के लिए, लॉग इन करें और टूल और सेटिंग > मेज़रमेंट > कन्वर्ज़न पर जाएं.
  2. नए कन्वर्ज़न ऐक्शन जोड़ने के लिए, + बटन पर क्लिक करें.

1eb800ed1ae776cc.png

  1. Google Analytics 4 प्रॉपर्टी (Firebase) चुनें और जारी रखें पर क्लिक करें.

8b0a0b34b1d3eae2.png

  1. आपको कन्वर्ज़न के तौर पर मार्क किए गए सभी Analytics इवेंट दिख सकते हैं. हमने पहले जिस event1 इवेंट को लागू किया था उसे ढूंढें.

e2bd5e1f7b9b73d9.png

  1. कार्रवाई चुनें. इसके बाद, इंपोर्ट करें और फिर जारी रखें पर क्लिक करें.

2402f11ee4e3ed2e.png

event1 को कन्वर्ज़न ऐक्शन के तौर पर सेट करने के बाद, event1 इवेंट के साथ ऐप्लिकेशन ऐक्शन कैंपेन लॉन्च किए जा सकते हैं.

10. इंपोर्ट किए गए इवेंट की मदद से, ऐप्लिकेशन ऐक्शन कैंपेन लॉन्च करना

  1. अपने मौजूदा खाते के कैंपेन टैब पर जाएं और + बटन पर क्लिक करके, नया कैंपेन शुरू करें. [नया कैंपेन] पर क्लिक करें. इसके बाद, जारी रखें पर क्लिक करें.
  2. ऐप्लिकेशन इंस्टॉल विकल्प का इस्तेमाल करके, ऐप्लिकेशन का प्रमोशन करने वाला कैंपेन लॉन्च करें.

eda56ea9bd38c6d5.png

  1. ऐप्लिकेशन का नाम, पैकेज का नाम या पब्लिशर का नाम टाइप करके, अपना ऐप्लिकेशन खोजें.
  2. बिडिंग सेक्शन में, ड्रॉपडाउन मेन्यू में जाकर ऐप्लिकेशन में होने वाली गतिविधियां चुनें.
  3. दी गई सूची में अपना कस्टम इवेंट ढूंढें. हर ऐक्शन के लिए खर्च का टारगेट सेट करें और अन्य विकल्प भरें.

438e581eb1b40003.png

  1. कैंपेन की सेटिंग पूरी करें.

11. बधाई हो

बधाई हो, आपने Firebase और Google Ads को इंटिग्रेट कर लिया है! इससे, आपको Firebase से इंपोर्ट किए गए इवेंट की मदद से, अपने कैंपेन की परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलेगी.

आपने सीखा

  • हाइब्रिड ऐप्लिकेशन में GA4F (Google Analytics for Firebase) को कैसे शुरू करें
  • वेब पेज में कस्टम इवेंट और पैरामीटर बनाने का तरीका
  • वेबव्यू में मौजूद वेब पेज पर होने वाले इवेंट को नेटिव कोड पर फ़ॉरवर्ड करने का तरीका
  • डीबग करने का तरीका
  • इवेंट इंपोर्ट करने और उन्हें ऐक्शन कैंपेन के लिए इस्तेमाल करने का तरीका.

12. रेफ़रंस

आधिकारिक गाइड

  • WebView में Analytics का इस्तेमाल करना - Firebase - Google

Firebase और Google Ads सेटअप करना