Firebase-এর জন্য Google Analytics-এর মাধ্যমে ওয়েবভিউ-তে ইভেন্টগুলি ট্র্যাক করুন

1. ভূমিকা

শেষ আপডেট: 2022-02-25

আপনি কি নির্মাণ করবেন

এই কোডল্যাবে, আপনি শিখবেন কিভাবে WebView-এর মধ্যে একটি ওয়েব-পৃষ্ঠা থেকে একটি নেটিভ কোডে ইভেন্ট ফরওয়ার্ড করতে হয় যাতে GA4F ইভেন্টগুলি ট্র্যাক করতে পারে।

আমরা নমুনা হাইব্রিড অ্যান্ড্রয়েড অ্যাপ ব্যবহার করব যা WebView ব্যবহার করে একটি ওয়েব-পৃষ্ঠা কল করে।

আপনি কি শিখবেন

  • হাইব্রিড অ্যাপে কীভাবে GA4F (Firebase এর জন্য Google Analytics) শুরু করবেন
  • ওয়েব পেজে কাস্টম ইভেন্ট এবং প্যারামিটার কিভাবে তৈরি করবেন
  • ওয়েবভিউ-এর মধ্যে একটি ওয়েব-পৃষ্ঠার ইভেন্টগুলিকে একটি নেটিভ কোডে কীভাবে ফরোয়ার্ড করবেন
  • কিভাবে ডিবাগ করতে হয়
  • কীভাবে ইভেন্টগুলি আমদানি করবেন এবং অ্যাকশন প্রচারের জন্য সেগুলি ব্যবহার করবেন।

আপনি কি প্রয়োজন হবে

  • অ্যান্ড্রয়েড স্টুডিও 3.6 বা উচ্চতর
  • ফায়ারবেস অ্যাকাউন্ট

2. সেট আপ করা হচ্ছে

কোড পান

Firebase অফিসিয়াল গাইড GitHub-এ নমুনা কোড প্রদান করে। আমরা এই প্রকল্পের জন্য এটি প্রয়োজন.

7074c0e83b5fd4b1.png

শুরু করতে, আপনাকে কোডটি ডাউনলোড করতে হবে এবং আপনার প্রিয় ডেভ পরিবেশে এটি খুলতে হবে। আমরা 2টি ডিরেক্টরি ব্যবহার করব: অ্যান্ড্রয়েড এবং ওয়েব। "অ্যান্ড্রয়েড" ডিরেক্টরিটি অ্যান্ড্রয়েড অ্যাপের জন্য এবং "ওয়েব" ডিরেক্টরিটি একটি ওয়েব-পৃষ্ঠার জন্য যা অ্যাপটি WebView এর মাধ্যমে কল করবে।

3. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন৷

Firebase এর সাথে শুরু করার জন্য, আপনাকে একটি Firebase প্রকল্প তৈরি এবং সেট আপ করতে হবে।

একটি ফায়ারবেস প্রকল্প তৈরি করুন

  1. Firebase এ সাইন ইন করুন।

ফায়ারবেস কনসোলে, প্রজেক্ট যোগ করুন (বা একটি প্রকল্প তৈরি করুন) এ ক্লিক করুন এবং আপনার ফায়ারবেস প্রকল্পের নাম Webview-test-codelab বা আপনার পছন্দের যেকোনো নাম দিন।

fd93054e27d6b386.png

  1. প্রকল্প তৈরির বিকল্পগুলির মাধ্যমে ক্লিক করুন। অনুরোধ করা হলে Firebase শর্তাবলী স্বীকার করুন। আপনার এই প্রকল্পের জন্য Google Analytics সক্ষম করা উচিত, যেহেতু অ্যাকশন ইভেন্টগুলি ট্র্যাক করতে এবং রূপান্তরগুলি বিশ্লেষণ করার জন্য আপনার Google Analytics ইভেন্টগুলির প্রয়োজন৷

d711cb170a42a355.png

ফায়ারবেস প্রকল্পগুলি সম্পর্কে আরও জানতে, ফায়ারবেস প্রকল্পগুলি বুঝতে দেখুন।

4. Android এর জন্য Firebase কনফিগারেশন

Firebase কনসোলে Android কনফিগার করুন

  1. Firebase কনসোল হোমে, আপনি নীচের মত Android আইকনে ক্লিক করতে পারেন। 143983fdc86ff670.png

অথবা আপনি বাম নেভিগেশন বারে প্রজেক্ট ওভারভিউতে যেতে পারেন এবং "আপনার অ্যাপে Firebase যোগ করে শুরু করুন" এর অধীনে Android বোতামে ক্লিক করুন।

তারপর আপনি নীচের মত "আপনার অ্যান্ড্রয়েড অ্যাপে ফায়ারবেস যোগ করুন" স্ক্রীন দেখতে পাবেন।

74e684bd64bd8d9d.png

  1. আপনি আপনার অ্যাপ ডিরেক্টরিতে android/app/src/main/AndroidManifest.xml এ আপনার Android প্যাকেজের নাম (ex. com.xxxx.myproject) খুঁজে পেতে পারেন।
package="com.xxxx.myproject"
  1. SHA-1 কী এখানে প্রয়োজন নেই। আপনি যখন Google সাইন ইন বা ফায়ারবেস ডায়নামিক লিঙ্কগুলি ব্যবহার করতে চান বা Google Play থেকে in_app_purchase ডেটা আমদানি করতে চান তখনই এই কীটির প্রয়োজন হয় যা এই কোডল্যাবের সুযোগ নয়৷
  2. রেজিস্টার অ্যাপে ক্লিক করুন।
  3. Firebase কনসোলে google-services.json কনফিগারেশন ফাইলটি ডাউনলোড করুন এবং আপনার অ্যাপ প্রোজেক্টের android/app ডিরেক্টরিতে এই ফাইলটি কপি করে পেস্ট করুন। a2c930b2dd517980.png
  4. Firebase কনসোলে ফিরে, অবশিষ্ট ধাপগুলি এড়িয়ে যান এবং Firebase কনসোলের মূল পৃষ্ঠায় ফিরে যান।
  5. অবশেষে, Firebase দ্বারা তৈরি করা google-services.json ফাইলটি পড়ার জন্য আপনার Google Services Gradle প্লাগইন প্রয়োজন
  6. আপনার IDE বা সম্পাদকে, 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. যদি আপনার অ্যাপটি এখনও চলমান থাকে, তাহলে গ্রেডলকে নির্ভরতা ইনস্টল করার অনুমতি দিতে এটিকে বন্ধ করুন এবং পুনর্নির্মাণ করুন।

আপনি অ্যান্ড্রয়েডের জন্য আপনার অ্যাপ কনফিগার করেছেন!

5. ওয়েবে একটি বিশ্লেষণ ওয়েব ইন্টারফেস বিকাশ করুন এবং কাস্টম ইভেন্টগুলি লগ করুন৷

গুগল অ্যানালিটিক্সের সাথে একটি ওয়েবভিউতে ইভেন্টগুলি ট্র্যাক করতে, আপনাকে ওয়েব এবং অ্যান্ড্রয়েড অ্যাপ উভয়েই কোডটি সন্নিবেশ করতে হবে৷

এই অংশে, আসুন দেখি কোন কোডটি আপনাকে ওয়েব-পৃষ্ঠায় রাখতে হবে। a0f31cdf21ea85d1.png

প্রথমে, একটি html ফাইলে ব্যবহার করার জন্য একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করুন। নমুনা কোডে, js ফাইলটিকে index.js নামে নামকরণ করা হয়েছে। Android এর জন্য "AnayticsWebInterface" কল করার জন্য আপনাকে "logEvent" ফাংশন তৈরি করতে হবে এবং iOS এর জন্য নিচের কোডের মত "messageHander" তৈরি করতে হবে।

66a13d9290c3b2c7.png

এবং এই ফাংশনটি কল করুন যেখানে আপনি নীচের মত html ফাইলে ইভেন্ট ট্র্যাক করতে চান।

1bf11ba7b8fae269.png

অ্যান্ড্রয়েড অ্যাপের ওয়েবভিউ-তে কোনও ইভেন্ট ট্রিগার করা হলে, "window.AnalyticsWebInterface" বলা হবে এবং এটি অ্যাপের WebInterface কোডে ইভেন্টটিকে ফরোয়ার্ড করবে।

6. ওয়েব পৃষ্ঠার URL পেতে ওয়েব ডিরেক্টরি হোস্ট করুন

আপনার অ্যাপে WebView-এর মধ্যে একটি ওয়েব-পৃষ্ঠা কল করার আগে, আপনার একটি ওয়েব-পৃষ্ঠার url প্রয়োজন৷ ওয়েব পেজ হোস্ট করার অনেক পদ্ধতি থাকবে। এই কোডল্যাবে, আমরা শুধুমাত্র সুবিধার জন্য Firebase হোস্টিং পরিষেবা ব্যবহার করব।

  • আপনার টার্মিনালে, ওয়েব ডিরেক্টরি লিখুন (উদাঃ cd web ) এবং নিম্নলিখিত কমান্ডগুলি চালান:
  • npm install -g firebase-tools

এটি Firebase CLI ইনস্টল করবে।

  • firebase login
  • firebase init
  • আপনি কোন বৈশিষ্ট্যটি সেট আপ করতে চান তা জিজ্ঞাসা করা হলে 'হোস্টিং' চয়ন করুন।
  • আপনার অ্যান্ড্রয়েড অ্যাপের জন্য আপনি যে প্রকল্পটি সেট আপ করেছেন সেটি বেছে নিন।
  • সমস্ত অবশিষ্ট প্রম্পটের জন্য ডিফল্ট গ্রহণ করুন।
  • firebase deploy --only hosting - Firebase হোস্টিং এ স্থাপন করুন।

a2c132502ffa8a04.png

  • ওয়েব পৃষ্ঠা URL পাওয়ার পর, Android স্টুডিওতে আপনার অ্যাপ প্রকল্পে যান এবং নীচের মত WebView-এর মধ্যে এই ধাপে তৈরি করা ওয়েব URLটি সন্নিবেশ করুন৷

86b44d7bf72383a7.png

7. অ্যান্ড্রয়েড অ্যাপে ইন্টারফেস কোড তৈরি করুন

GA4F এর সাথে WebView এর ইভেন্টগুলি ট্র্যাক করতে, আপনাকে ওয়েব এবং অ্যান্ড্রয়েড উভয় ক্ষেত্রেই কোডটি সন্নিবেশ করতে হবে৷ এই অংশে, ওয়েবভিউ-তে ওয়েব-পৃষ্ঠা থেকে ইভেন্টগুলি পেতে আপনাকে অ্যান্ড্রয়েড অ্যাপে কোন কোডটি রাখতে হবে তা দেখুন।

"AnalyticsWebInterface" ক্লাস করতে "AnalyticsWebInterface.java" ফাইল তৈরি করুন। এই ক্লাসে, নিচের মত ওয়েব js ফাইলে লগইভেন্ট ফাংশন সংযোগ করতে আপনাকে @JavascriptInterface কোড করতে হবে।

796981318ff44346.png

এরপরে, আপনাকে অ্যাক্টিভিটিতে জাভাস্ক্রিপ্ট ইন্টারফেস যোগ করতে হবে যা নিচের মত ওয়েবভিউকে কল করে।

b1bd1d9bb50d418f.png

এটির জন্য পুরো কোডটি দেখতে, অনুগ্রহ করে "সেট আপ করা" ধাপে GitHub থেকে ডাউনলোড করা নমুনা কোডটি পড়ুন।

8. ইভেন্টগুলি পরীক্ষা করা এবং ডিবাগ করা৷

ডিবাগিং ইভেন্টগুলির জন্য, আপনি পরীক্ষা ডিভাইস সংযোগ করার পরে বা এমুলেটর চালু করার পরে Android স্টুডিও টার্মিনালে নিম্নলিখিত কোডটি ব্যবহার করতে পারেন।

> adb shell setprop debug.firebase.analytics.app [অ্যাপ প্যাকেজের নাম]

> adb শেল সেটপ্রপ log.tag.FA VERBOSE

> adb শেল সেটপ্রপ log.tag.FA-SVC VERBOSE

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

আপনার অ্যাপে "LOG EVENT 1" এ ক্লিক করুন এবং আপনার কোডটি ভালোভাবে কাজ করলে, আপনি নিচের মতো লগ দেখতে পাবেন।

f84d06d3534ad034.png

আপনি যদি Firebase কনসোলে চেক করতে চান, আপনি রিয়েলটাইম ট্যাবও ব্যবহার করতে পারেন। Firebase কনসোলে যান এবং নিচের মত রিয়েলটাইম ট্যাবে ক্লিক করুন।

তারপর, "তুলনা যোগ করুন" ফাংশন ব্যবহার করে অ্যান্ড্রয়েড প্ল্যাটফর্ম ইভেন্ট ফিল্টার করুন৷

aa804eb02f0b7d3f.png

আপনার কোড সঠিকভাবে প্রয়োগ করা হলে আপনি রিয়েলটাইম ট্যাবে অ্যান্ড্রয়েড অ্যাপ থেকে ইভেন্টগুলি দেখতে পাবেন। 334afcae650c58d4.png

কয়েক ঘন্টার মধ্যে, আপনি Firebase কনসোলের ইভেন্ট ট্যাবে আপনার লগ করা ইভেন্টগুলি দেখতে পাবেন। Firebase কনসোলে উপস্থিত Analytics বিভাগ থেকে ইভেন্ট ট্যাবে ক্লিক করুন। আপনি ইভেন্টে ক্লিক করে ইভেন্ট event1 ভিতরের মানগুলিও পরীক্ষা করতে পারেন।

b72cf934a76e174b.png

Google বিজ্ঞাপনে একটি রূপান্তর হিসাবে event1 আমদানি করতে, রূপান্তর হিসাবে চিহ্নিত সুইচটি ডানদিকে স্লাইড করে এটিকে রূপান্তর হিসাবে চিহ্নিত করুন।

486010186b929deb.png

যদি ইভেন্টটি রূপান্তর ট্যাবে থাকে, তাহলে আপনি সফলভাবে ইভেন্টটিকে একটি রূপান্তর হিসাবে চিহ্নিত করেছেন৷ Google Ads এখন Firebase থেকে এই ইভেন্টটি আমদানি করতে সক্ষম হবে৷

ডিবাগিং উদ্দেশ্যে, Firebase DebugView ব্যবহার করুন। আরো বিস্তারিত জানার জন্য, ডিবাগিং ইভেন্ট দেখুন।

9. Google বিজ্ঞাপনে বিশ্লেষণ ইভেন্ট আমদানি করা

একবার আপনার ফায়ারবেস-সেটআপ সম্পূর্ণ হলে, আপনি অ্যাকশন ইভেন্ট সহ অ্যাপ প্রচারাভিযান চালু করতে প্রস্তুত। Google বিজ্ঞাপনের সাথে Firebase লিঙ্ক করে শুরু করুন। Google Ads-এর সাথে Firebase লিঙ্ক করার মাধ্যমে, অ্যাপ প্রচারগুলি Firebase ইভেন্টগুলি আমদানি করতে পারে৷ এই প্রক্রিয়াটি Google Adsকে তাদের দর্শকদের সম্পর্কে আরও জানতে অনুমতি দিয়ে অ্যাপ প্রচারাভিযানকে বুস্ট করতে সাহায্য করে।

  1. প্রজেক্ট ওভারভিউ- এর পাশের বোতামে ক্লিক করে Firebase সেটিংসে যান।
  2. ইন্টিগ্রেশন ট্যাবে, আপনি Google বিজ্ঞাপন এবং একটি লিঙ্ক বোতাম দেখতে পাবেন। লিঙ্কে ক্লিক করুন এবং তারপরে অবিরত ক্লিক করুন।

67fc1b7f75f9dcaa.png

  1. Google Ads অ্যাকাউন্ট বেছে নিন।

এখন Firebase অংশ সম্পন্ন হয়েছে.

Google Ads এ যান।

  1. লগ ইন করুন, এবং কাস্টম ইভেন্টগুলিকে রূপান্তর হিসাবে আমদানি করতে টুল এবং সেটিংস > পরিমাপ > রূপান্তরগুলিতে যান৷
  2. নতুন রূপান্তর ক্রিয়া যুক্ত করতে + বোতামে ক্লিক করুন।

1eb800ed1ae776cc.png

  1. Google Analytics 4 বৈশিষ্ট্য (Firebase) চয়ন করুন এবং অবিরত ক্লিক করুন।

8b0a0b34b1d3eae2.png

  1. আপনি রূপান্তর হিসাবে চিহ্নিত সমস্ত বিশ্লেষণ ইভেন্ট দেখতে পারেন৷ event1 ইভেন্টটি খুঁজুন যা আমরা আগে প্রয়োগ করেছি।

e2bd5e1f7b9b73d9.png

  1. ক্রিয়াটি পরীক্ষা করুন, আমদানিতে ক্লিক করুন এবং তারপরে অবিরত ক্লিক করুন।

2402f11ee4e3ed2e.png

একটি রূপান্তর ক্রিয়া হিসাবে event1 সেট করার পরে, আপনি event1 ইভেন্টের সাথে অ্যাপ অ্যাকশন প্রচারাভিযান চালু করতে পারেন।

10. আমদানি করা ইভেন্ট সহ অ্যাপ অ্যাকশন প্রচারাভিযান চালু করা

  1. আপনার বর্তমান অ্যাকাউন্টের প্রচারাভিযান ট্যাবে যান এবং + বোতামে ক্লিক করে একটি নতুন প্রচার শুরু করুন। [নতুন প্রচারাভিযান] ক্লিক করুন এবং তারপরে চালিয়ে যান ক্লিক করুন।
  2. অ্যাপ ইনস্টল বিকল্পের সাথে একটি অ্যাপ প্রচার প্রচারণা চালু করুন।

eda56ea9bd38c6d5.png

  1. অ্যাপের নাম, প্যাকেজের নাম বা প্রকাশক টাইপ করে আপনার অ্যাপ খুঁজুন।
  2. বিডিং বিভাগে, ড্রপডাউন মেনুতে ইন-অ্যাপ অ্যাকশন নির্বাচন করুন।
  3. প্রদত্ত তালিকায় আপনার কাস্টম ইভেন্ট খুঁজুন। কর্ম প্রতি লক্ষ্য খরচ সেট করুন, এবং কোনো অতিরিক্ত বিকল্প সম্পূর্ণ করুন।

438e581eb1b40003.png

  1. আপনার প্রচারের সেটিংস শেষ করুন।

11. অভিনন্দন

অভিনন্দন, আপনি সফলভাবে আপনার Firebase এবং Google বিজ্ঞাপনগুলিকে একীভূত করেছেন! এটি আপনাকে Firebase ইম্পোর্ট করা ইভেন্টগুলির সাথে আপনার প্রচারাভিযানের কর্মক্ষমতা বাড়াতে সাহায্য করবে৷

আপনি শিখেছেন

  • হাইব্রিড অ্যাপে কীভাবে GA4F (Firebase এর জন্য Google Analytics) শুরু করবেন
  • ওয়েব পেজে কাস্টম ইভেন্ট এবং প্যারামিটার কিভাবে তৈরি করবেন
  • ওয়েবভিউ-এর মধ্যে একটি ওয়েব-পৃষ্ঠার ইভেন্টগুলিকে একটি নেটিভ কোডে কীভাবে ফরোয়ার্ড করবেন
  • কিভাবে ডিবাগ করতে হয়
  • কীভাবে ইভেন্টগুলি আমদানি করবেন এবং অ্যাকশন প্রচারের জন্য সেগুলি ব্যবহার করবেন।

12. তথ্যসূত্র

অফিসিয়াল গাইড

  • একটি WebView - Firebase - Google-এ Analytics ব্যবহার করুন৷

ফায়ারবেস এবং গুগল বিজ্ঞাপন সেটআপ