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

1. परिचय

पिछला अपडेट: 22-12-2021

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

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

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

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

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

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

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

2. सेट अप करना

कोड पाएं

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

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

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

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

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

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

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

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

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

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

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

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

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

2. आपको Android पैकेज का नाम देना होगा. यह नाम आपको यहाँ दिए गए तरीके से मिलेगा.

अहम जानकारी: पैकेज और ऐप्लिकेशन आईडी के बारे में ज़्यादा जानने के लिए, ऐप्लिकेशन आईडी सेट करना लेख पढ़ें.

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

9. अपने ऐप्लिकेशन डायरेक्ट्री पर जाएं. इसके बाद, अभी डाउनलोड की गई google-services.json फ़ाइल को android/app डायरेक्ट्री में ले जाएं.
10. Firebase कंसोल में वापस जाकर, बाकी चरणों को छोड़ें और Firebase कंसोल के मुख्य पेज पर वापस जाएं.
11. आखिर में, आपको Google Services Gradle plugin की ज़रूरत होगी. इससे Firebase से जनरेट हुई google-services.json फ़ाइल को पढ़ा जा सकता है.
12. अपने आईडीई या एडिटर में, android/app/build.gradle खोलें. इसके बाद, फ़ाइल में आखिरी लाइन के तौर पर यह लाइन जोड़ें:

apply plugin: 'com.google.gms.google-services'

13. android/build.gradle खोलें. इसके बाद, buildscript टैग में नई डिपेंडेंसी जोड़ें:

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

14. अगर आपका ऐप्लिकेशन अब भी चल रहा है, तो उसे बंद करें और फिर से बनाएं, ताकि Gradle डिपेंडेंसी इंस्टॉल कर सके.

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

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

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

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

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

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

Android में वेबव्यू में इवेंट ट्रिगर होने पर, "window.AnalyticsWebInterface" को कॉल किया जाएगा. इससे इवेंट को नेटिव ऐप्लिकेशन से कनेक्ट किया जाएगा.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ध्यान दें: अगर टारगेट इवेंट को कन्वर्ज़न इवेंट के तौर पर मार्क नहीं किया गया है, तो Google Ads उसे इंपोर्ट नहीं कर पाएगा. पक्का करें कि इवेंट को कन्वर्ज़न के तौर पर सही तरीके से मार्क किया गया हो.

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

Google Ads पर जाएं.

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

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

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

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

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

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

अहम जानकारी: ऐप्लिकेशन कैंपेन को सही तरीके से लॉन्च करने के लिए, आपको Google Play में प्रोडक्शन लेवल का ऐप्लिकेशन पाना होगा. हालांकि, अगर आप अभी पब्लिश करने के लिए तैयार नहीं हैं, तो इस चरण को अभी के लिए छोड़ा जा सकता है.

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

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

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

11. बधाई हो

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

आपने सीखा

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