Google Analytics की मदद से वेबव्यू में इवेंट ट्रैक करना

1. परिचय

पिछली बार अपडेट किया गया: 22-12-2021

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

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

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

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

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

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

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

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

कोड पाएं

Firebase गाइड वाले दस्तावेज़ों में सैंपल कोड होता है, जो हमें इस प्रोजेक्ट के लिए किसी जिथंब में चाहिए.

7074c0e83b5fd4b1.png

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

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

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

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

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

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

fd93054e27d6b386.png

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

e58151a081f0628.png

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

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

3e5b8f1b6ca538c4.png

Android को कॉन्फ़िगर करना

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

आपको अगली स्क्रीन में दिखाया गया डायलॉग दिखेगा.

3b7d3b33d81fe8ea.png

  1. Android पैकेज का नाम देना ज़रूरी है. यह नाम आपको इस तरीके से मिलेगा.
  1. अपनी ऐप्लिकेशन डायरेक्ट्री में, android/app/src/main/AndroidManifest.xml फ़ाइल खोलें.
  2. manifest एलिमेंट में, package एट्रिब्यूट की स्ट्रिंग की वैल्यू ढूंढें. यह वैल्यू Android पैकेज का नाम है (कुछ ऐसा com.yourcompany.yourproject). इस वैल्यू को कॉपी करें.
  3. Firebase डायलॉग में, कॉपी किए गए पैकेज का नाम Android package name फ़ील्ड में चिपकाएं.
  4. हमें यहां SHA-1 कुंजी की ज़रूरत नहीं है, जब तक कि आप Google साइन इन या Firebase डाइनैमिक लिंक का इस्तेमाल करने की योजना न बना रहे हों (ध्यान दें कि ये इस कोडलैब का हिस्सा नहीं हैं). अगर आपको Google Play से in_app_purchase का डेटा इंपोर्ट करना है, तो आपको बाद में पासकोड सेट करना होगा.
  5. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
  6. Firebase में जारी रखते हुए, google-services.json कॉन्फ़िगरेशन फ़ाइल डाउनलोड करने के लिए, निर्देशों का पालन करें.

52f08aa18c8d59d0.png

  1. अपनी ऐप्लिकेशन डायरेक्ट्री पर जाएं. इसके बाद, google-services.json फ़ाइल (जिसे आपने अभी-अभी डाउनलोड किया है) को android/app डायरेक्ट्री में ले जाएं.
  2. Firebase कंसोल के ज़रिए, बाकी चरणों को छोड़ें. इसके बाद, Firebase कंसोल के मुख्य पेज पर वापस जाएं.
  3. आखिर में, Firebase से जनरेट की गई google-services.json फ़ाइल को पढ़ने के लिए, आपको Google सेवाओं के ग्रेडल प्लगिन की ज़रूरत पड़ेगी.
  4. अपने 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 अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

6d9fac050fb64f4e.png

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

f40c1596678173ba.png

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

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

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

  • अपने टर्मिनल में, वेब डायरेक्ट्री डालें (जैसे, cd web) और इन कमांड को चलाएं:
  • npm install -g firebase-tools - इससे Firebase सीएलआई इंस्टॉल हो जाएगा.
  • firebase login
  • firebase init
  • ‘होस्टिंग’ चुनें जब आपसे पूछा जाए कि आपको कौनसी सुविधा सेट अप करनी है.
  • वह प्रोजेक्ट चुनें जिसे आपने अपने Android ऐप्लिकेशन के लिए सेट अप किया है.
  • बचे हुए सभी प्रॉम्प्ट के लिए डिफ़ॉल्ट सेटिंग स्वीकार करें.
  • firebase deploy --only hosting - Firebase होस्टिंग पर डिप्लॉय करें.

e7d56dd78a4448e7.png

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

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

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

6f069f438e4667ba.png

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

f2c6e5affd8c8993.png

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

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

अगर आपका कोड ठीक से काम करता है, तो आपको नीचे दिया गया लॉग दिखेगा.

33c64f811e7e9a0f.png

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

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

af6e8da348dbe775.png aa804eb02f0b7d3f.png

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

bde531c7a37c0851.png

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

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

486010186b929deb.png

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

b72cf934a76e174b.png

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

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

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

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

b711bf2e94fa0895.png

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

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

Google Ads पर जाएं.

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

73cec8d2e80eab03.png

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

4b1d8f6a712b2ac6.png

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

e2bd5e1f7b9b73d9.png

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

ab35e341dff32e48.png

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

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

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

af98c44d1476558.png

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

ee2bf8eb80cddd7c.png

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

11. बधाई हो

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

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

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