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

1. परिचय

पिछली बार अपडेट किए जाने की तारीख: 25-02-2022

आपको क्या बनाना होगा

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

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

आपको इनके बारे में जानकारी मिलेगी

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

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

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

2. सेट अप किया जा रहा है

कोड पाएं

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

7074c0e83b5fd4b1.png

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

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

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

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

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

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

fd93054e27d6b386.png

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

d711cb170a42a355.png

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

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

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

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

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

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

74e684bd64bd8d9d.png

  1. आपके पास अपने ऐप्लिकेशन की डायरेक्ट्री के android/app/src/main/AndroidManifest.xml में, अपने Android पैकेज का नाम (जैसे, com.xxxx.myproject) देखने का विकल्प है.
package="com.xxxx.myproject"
  1. यहां SHA-1 कुंजी की ज़रूरत नहीं है. इस कुंजी की ज़रूरत सिर्फ़ तब होती है, जब आपको Google साइन इन या Firebase डाइनैमिक लिंक का इस्तेमाल करना हो या Google Play से in_app_purchase डेटा इंपोर्ट करना हो, जो इस कोडलैब के दायरे में नहीं आता.
  2. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
  3. Firebase कंसोल में google-services.json कॉन्फ़िगरेशन फ़ाइल डाउनलोड करें और & इस फ़ाइल को अपने ऐप्लिकेशन प्रोजेक्ट की android/app डायरेक्ट्री में चिपकाएं. a2c930b2dd517980.png
  4. Firebase कंसोल के ज़रिए, बाकी चरणों को छोड़ें. इसके बाद, Firebase कंसोल के मुख्य पेज पर वापस जाएं.
  5. आखिर में, Firebase से जनरेट की गई google-services.json फ़ाइल को पढ़ने के लिए, आपको Google सेवाओं के ग्रेडल प्लगिन की ज़रूरत पड़ेगी
  6. अपने IDE या Editor में, 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 का नाम दिया गया है. आपको "logEvent" फ़ंक्शन बनाना होगा "AnayticsWebInterface" को कॉल करने के लिए Android के लिए, और "messageHander" और iOS के लिए नीचे दिया गया कोड जैसे कोड का इस्तेमाल करें.

66a13d9290c3b2c7.png

और इस फ़ंक्शन को वहां कॉल करें जहां आप नीचे की तरह html फ़ाइल में इवेंट को ट्रैक करना चाहते हैं.

1bf11ba7b8fae269.png

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

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

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

  • अपने टर्मिनल में, वेब डायरेक्ट्री डालें (जैसे, cd web) और इन कमांड को चलाएं:
  • npm install -g firebase-tools

तो Firebase सीएलआई इंस्टॉल हो जाएगा.

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

a2c132502ffa8a04.png

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

86b44d7bf72383a7.png

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

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

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

796981318ff44346.png

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

b1bd1d9bb50d418f.png

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

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

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

> adb Shell setprop डीबग.firebase.analytics.app [app Package name]

> adb Shell सेटप्रॉप log.tag.FA VERBOSE

> adb Shell सेटप्रॉप log.tag.FA-SVC VERBOSE

> adb logcat -v समय -s FA FA-SVC

"इवेंट लॉग करें 1" पर क्लिक करें और अगर आपका कोड ठीक से काम करता है, तो आपको नीचे जैसा लॉग दिखाई देगा.

f84d06d3534ad034.png

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

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

aa804eb02f0b7d3f.png

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

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

b72cf934a76e174b.png

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

486010186b929deb.png

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

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

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

Firebase का सेटअप पूरा होने के बाद, कार्रवाई इवेंट वाले ऐप्लिकेशन कैंपेन लॉन्च किए जा सकते हैं. Firebase को Google Ads से लिंक करके शुरुआत करें. Firebase को Google Ads से लिंक करने पर ऐप्लिकेशन कैंपेन,Firebase इवेंट इंपोर्ट कर सकते हैं. इस प्रोसेस से 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. अपने मौजूदा खाते के कैंपेन टैब पर जाएं और + बटन पर क्लिक करके नया कैंपेन शुरू करें. [New campaign] पर क्लिक करने के बाद, जारी रखें पर क्लिक करें.
  2. ऐप्लिकेशन इंस्टॉल विकल्प के साथ, ऐप्लिकेशन प्रमोशन कैंपेन लॉन्च करें.

eda56ea9bd38c6d5.png

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

438e581eb1b40003.png

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

11. बधाई हो

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

आपको सीख मिली है

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

12. रेफ़रंस

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

  • वेबव्यू में Analytics का इस्तेमाल करना - Firebase - Google

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