১. ভূমিকা
সর্বশেষ হালনাগাদ: ২০২২-০২-২৫
আপনি যা তৈরি করবেন
এই কোডল্যাবে আপনি শিখবেন, কীভাবে WebView-এর মধ্যে থাকা একটি ওয়েব-পেজ থেকে নেটিভ কোডে ইভেন্ট ফরওয়ার্ড করতে হয়, যাতে GA4F সেই ইভেন্টগুলো ট্র্যাক করতে পারে।
আমরা নমুনা হাইব্রিড অ্যান্ড্রয়েড অ্যাপটি ব্যবহার করব, যেটি ওয়েবভিউ ব্যবহার করে একটি ওয়েব-পেজ কল করে।
আপনি যা শিখবেন
- হাইব্রিড অ্যাপে GA4F (Google Analytics for Firebase) কীভাবে ইনিশিয়ালাইজ করবেন
- ওয়েব-পেজে কাস্টম ইভেন্ট এবং প্যারামিটার কীভাবে তৈরি করবেন
- WebView-এর মধ্যে একটি ওয়েব-পেজের ইভেন্টগুলিকে কীভাবে নেটিভ কোডে ফরোয়ার্ড করবেন
- কিভাবে ডিবাগ করতে হয়
- কীভাবে ইভেন্ট ইম্পোর্ট করবেন এবং অ্যাকশন ক্যাম্পেইনের জন্য সেগুলো ব্যবহার করবেন।
আপনার যা যা লাগবে
- অ্যান্ড্রয়েড স্টুডিও ৩.৬ বা উচ্চতর
- ফায়ারবেস অ্যাকাউন্ট
২. প্রস্তুতি গ্রহণ
কোডটি নিন
ফায়ারবেসের অফিসিয়াল গাইডে গিটহাবে নমুনা কোড দেওয়া আছে। এই প্রজেক্টটির জন্য আমাদের সেটি প্রয়োজন।
শুরু করার জন্য, আপনাকে কোডটি ডাউনলোড করে আপনার পছন্দের ডেভেলপমেন্ট এনভায়রনমেন্টে খুলতে হবে। আমরা 'android' এবং 'web' নামে দুটি ডিরেক্টরি ব্যবহার করব। 'android' ডিরেক্টরিটি অ্যান্ড্রয়েড অ্যাপের জন্য এবং 'web' ডিরেক্টরিটি একটি ওয়েব-পেজের জন্য, যেটিকে অ্যাপটি WebView-এর মাধ্যমে কল করবে।
৩. একটি ফায়ারবেস প্রজেক্ট তৈরি ও সেট আপ করুন।
Firebase ব্যবহার শুরু করতে, আপনাকে একটি Firebase প্রজেক্ট তৈরি ও সেট আপ করতে হবে।
একটি ফায়ারবেস প্রজেক্ট তৈরি করুন
- Firebase- এ সাইন ইন করুন।
Firebase কনসোলে, Add Project (বা Create a project)-এ ক্লিক করুন এবং আপনার Firebase প্রজেক্টটির নাম Webview-test-codelab বা আপনার পছন্দমতো যেকোনো নাম দিন।
- প্রজেক্ট তৈরির অপশনগুলো একে একে দেখুন। অনুরোধ করা হলে Firebase-এর শর্তাবলী মেনে নিন। এই প্রজেক্টের জন্য আপনাকে Google Analytics চালু করতে হবে, কারণ অ্যাকশন ইভেন্ট ট্র্যাক করতে এবং কনভার্সন বিশ্লেষণ করতে আপনার Google Analytics ইভেন্টের প্রয়োজন হবে।
ফায়ারবেস প্রজেক্ট সম্পর্কে আরও জানতে, “ফায়ারবেস প্রজেক্ট বুঝুন” দেখুন।
৪. অ্যান্ড্রয়েডের জন্য ফায়ারবেস কনফিগারেশন
ফায়ারবেস কনসোলে অ্যান্ড্রয়েড কনফিগার করুন
- Firebase Console Home-এ, আপনি নিচের ছবির মতো Android আইকনটিতে ক্লিক করতে পারেন।
অথবা আপনি বাম দিকের নেভিগেশন বারে থাকা প্রজেক্ট ওভারভিউ- তে গিয়ে, "আপনার অ্যাপে ফায়ারবেস যোগ করে শুরু করুন" এর নিচে থাকা অ্যান্ড্রয়েড বোতামটিতে ক্লিক করতে পারেন।
এরপর আপনি নিচের ছবির মতো "আপনার অ্যান্ড্রয়েড অ্যাপে ফায়ারবেস যোগ করুন" স্ক্রিনটি দেখতে পাবেন।
- আপনার অ্যাপ ডিরেক্টরিতে থাকা
android/app/src/main/AndroidManifest.xmlফাইলে আপনি আপনার অ্যান্ড্রয়েড প্যাকেজ নেম (যেমন, com.xxxx.myproject) খুঁজে পাবেন।
package="com.xxxx.myproject"
- এখানে SHA-1 কী-এর প্রয়োজন নেই। এই কী-টি শুধুমাত্র তখনই প্রয়োজন হয় যখন আপনি গুগল সাইন ইন , ফায়ারবেস ডাইনামিক লিঙ্ক অথবা গুগল প্লে থেকে ইন-অ্যাপ পারচেজ ডেটা ইম্পোর্ট করতে চান, যা এই কোডল্যাবের আওতাভুক্ত নয়।
- অ্যাপটি নিবন্ধন করুন- এ ক্লিক করুন।
- Firebase কনসোল থেকে
google-services.jsonকনফিগারেশন ফাইলটি ডাউনলোড করুন এবং এই ফাইলটি আপনার অ্যাপ প্রজেক্টেরandroid/appডিরেক্টরিতে কপি ও পেস্ট করুন।
- ফায়ারবেস কনসোলে ফিরে এসে, বাকি ধাপগুলো এড়িয়ে যান এবং ফায়ারবেস কনসোলের মূল পৃষ্ঠায় ফিরে যান।
- অবশেষে, Firebase দ্বারা তৈরি
google-services.jsonফাইলটি পড়ার জন্য আপনার Google Services Gradle প্লাগইনটির প্রয়োজন হবে। - আপনার IDE বা এডিটরে
android/app/build.gradleফাইলটি খুলুন, তারপর ফাইলটির শেষ লাইন হিসেবে নিম্নলিখিত লাইনটি যোগ করুন:
apply plugin: 'com.google.gms.google-services'
-
android/build.gradleখুলুন। এরপর,buildscriptট্যাগের ভিতরে একটি নতুন ডিপেন্ডেন্সি যোগ করুন।
buildscript {
repositories {
// ...
}
dependencies {
// ...
Classpath 'com.google.gms:google-services:4.3.3'
}
}
- আপনার অ্যাপটি যদি এখনও চালু থাকে, তবে এটি বন্ধ করে পুনরায় তৈরি করুন, যাতে গ্রেডল ডিপেন্ডেন্সিগুলো ইনস্টল করতে পারে।
অ্যান্ড্রয়েডের জন্য আপনার অ্যাপটি কনফিগার করা শেষ!
৫. ওয়েবে একটি অ্যানালিটিক্স ওয়েব ইন্টারফেস তৈরি করুন এবং কাস্টম ইভেন্টগুলো লগ করুন।
গুগল অ্যানালিটিক্স ব্যবহার করে ওয়েবভিউয়ের ইভেন্টগুলো ট্র্যাক করতে হলে, আপনাকে ওয়েব এবং অ্যান্ড্রয়েড অ্যাপ উভয় ক্ষেত্রেই কোডটি যুক্ত করতে হবে।
এই অংশে, চলুন দেখে নেওয়া যাক ওয়েব-পেজে কোন কোডগুলো রাখতে হবে। 
প্রথমে, একটি html ফাইলে ব্যবহার করার জন্য একটি javascript ফাইল তৈরি করুন। নমুনা কোডে, js ফাইলটির নাম index.js। নিচের কোডের মতো করে Android-এর জন্য 'AnayticsWebInterface' এবং iOS-এর জন্য 'messageHander' কল করার জন্য আপনাকে 'logEvent' ফাংশনটি তৈরি করতে হবে।
এবং এইচটিএমএল ফাইলে যেখানে ইভেন্টটি ট্র্যাক করতে চান, সেখানে নিচের মতো করে এই ফাংশনটি কল করুন।
অ্যান্ড্রয়েড অ্যাপের WebView-তে যখন কোনো ইভেন্ট ট্রিগার হয়, তখন "window.AnalyticsWebInterface" কল করা হয় এবং এটি ইভেন্টের ঠিকানা হিসেবে অ্যাপের WebInterface কোডে ইভেন্টটি পাঠিয়ে দেয়।
৬. ওয়েব পেজের ইউআরএল পেতে হোস্ট ওয়েব ডিরেক্টরি ব্যবহার করুন।
আপনার অ্যাপের WebView-এর মধ্যে কোনো ওয়েব-পেজ কল করার আগে, আপনার একটি ওয়েব-পেজ ইউআরএল প্রয়োজন। ওয়েব-পেজ হোস্ট করার অনেক পদ্ধতি রয়েছে। এই কোডল্যাবে, আমরা শুধুমাত্র সুবিধার জন্য ফায়ারবেস হোস্টিং পরিষেবা ব্যবহার করব।
- আপনার টার্মিনালে web ডিরেক্টরিতে প্রবেশ করুন (যেমন,
cd web) এবং নিম্নলিখিত কমান্ডগুলো চালান: -
npm install -g firebase-tools
এটি ফায়ারবেস সিএলআই ইনস্টল করবে।
-
firebase login -
firebase init - কোন ফিচারটি সেট আপ করতে চান জিজ্ঞাসা করা হলে 'হোস্টিং' বেছে নিন।
- আপনার অ্যান্ড্রয়েড অ্যাপের জন্য তৈরি করা প্রজেক্টটি বেছে নিন।
- বাকি সমস্ত প্রম্পটের জন্য ডিফল্টগুলো গ্রহণ করুন।
-
firebase deploy --only hosting- ফায়ারবেস হোস্টিং-এ ডিপ্লয় করার জন্য।
- ওয়েব পেজের URL পাওয়ার পর, Android Studio-তে আপনার অ্যাপ প্রজেক্টে যান এবং নিচের মতো করে এই ধাপে তৈরি করা ওয়েব URL-টি WebView-এর মধ্যে প্রবেশ করান।
৭. অ্যান্ড্রয়েড অ্যাপে ইন্টারফেস কোড তৈরি করুন
GA4F ব্যবহার করে WebView-এর ইভেন্টগুলো ট্র্যাক করতে হলে, আপনাকে ওয়েব এবং অ্যান্ড্রয়েড উভয় ক্ষেত্রেই কোডটি যুক্ত করতে হবে। এই অংশে, চলুন দেখে নেওয়া যাক WebView-তে ওয়েব-পেজ থেকে ইভেন্ট গ্রহণ করার জন্য অ্যান্ড্রয়েড অ্যাপে কোন কোডটি রাখতে হবে।
'AnalyticsWebInterface' ক্লাসটি তৈরি করার জন্য 'AnalyticsWebInterface.java' ফাইলটি তৈরি করুন। এই ক্লাসের মধ্যে, নিচের মতো করে web js ফাইলের logEvent ফাংশনটি সংযোগ করার জন্য আপনাকে @JavascriptInterface কোডটি লিখতে হবে।
এরপরে, আপনাকে অ্যাক্টিভিটিতে একটি জাভাস্ক্রিপ্ট ইন্টারফেস যোগ করতে হবে, যা নিচের মতো করে ওয়েবভিউকে কল করবে।
এটির সম্পূর্ণ কোড দেখতে, অনুগ্রহ করে "সেট আপ করা" ধাপে GitHub থেকে ডাউনলোড করা নমুনা কোডটি দেখুন।
৮. ইভেন্ট পরীক্ষা ও ডিবাগ করা
টেস্ট ডিভাইসটি সংযোগ করার পর বা এমুলেটর চালু করার পর, ইভেন্ট ডিবাগ করার জন্য আপনি অ্যান্ড্রয়েড স্টুডিও টার্মিনালে নিম্নলিখিত কোডটি ব্যবহার করতে পারেন।
adb shell setprop debug.firebase.analytics.app [অ্যাপ প্যাকেজের নাম]
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"-এ ক্লিক করুন, এবং যদি আপনার কোড ঠিকভাবে কাজ করে, তাহলে আপনি নীচের মতো লগ দেখতে পাবেন।
আপনি যদি ফায়ারবেস কনসোলে চেক করতে চান, তাহলে রিয়েলটাইম ট্যাবটিও ব্যবহার করতে পারেন। ফায়ারবেস কনসোলে যান এবং নিচের ছবির মতো রিয়েলটাইম ট্যাবে ক্লিক করুন।
এরপর, 'Add comparison' ফাংশনটি ব্যবহার করে অ্যান্ড্রয়েড প্ল্যাটফর্ম ইভেন্ট ফিল্টার করুন।
আপনার কোডটি সঠিকভাবে প্রয়োগ করা হলে, আপনি অ্যান্ড্রয়েড অ্যাপের ইভেন্টগুলো রিয়েলটাইম ট্যাবে দেখতে পাবেন। 
কয়েক ঘণ্টার মধ্যেই আপনি ফায়ারবেস কনসোলের ইভেন্টস ট্যাবে আপনার লগ করা ইভেন্টগুলো দেখতে পাবেন। ফায়ারবেস কনসোলে থাকা অ্যানালিটিক্স সেকশন থেকে শুধু ইভেন্টস ট্যাবে ক্লিক করুন। এছাড়াও, ইভেন্টটিতে ক্লিক করে আপনি event1 ইভেন্টের ভেতরের ভ্যালুগুলোও দেখতে পারেন।
Google Ads-এ event1 একটি কনভার্সন হিসেবে ইম্পোর্ট করতে, 'Mark as conversion' সুইচটি ডানদিকে স্লাইড করে এটিকে কনভার্সন হিসেবে চিহ্নিত করুন।
ইভেন্টটি যদি কনভার্সন ট্যাবে থাকে, তাহলে আপনি সফলভাবে ইভেন্টটিকে একটি কনভার্সন হিসেবে চিহ্নিত করেছেন। গুগল অ্যাডস এখন ফায়ারবেস থেকে এই ইভেন্টটি ইম্পোর্ট করতে পারবে।
ডিবাগিংয়ের জন্য Firebase DebugView ব্যবহার করুন। আরও বিস্তারিত জানতে, ডিবাগিং ইভেন্ট দেখুন।
৯. গুগল অ্যাডস-এ অ্যানালিটিক্স ইভেন্ট ইম্পোর্ট করা
আপনার ফায়ারবেস সেটআপ সম্পূর্ণ হয়ে গেলে, আপনি অ্যাকশন ইভেন্ট সহ অ্যাপ ক্যাম্পেইন চালু করার জন্য প্রস্তুত। ফায়ারবেসকে গুগল অ্যাডস-এর সাথে লিঙ্ক করার মাধ্যমে শুরু করুন। ফায়ারবেসকে গুগল অ্যাডস-এর সাথে লিঙ্ক করার ফলে, অ্যাপ ক্যাম্পেইনগুলো ফায়ারবেস ইভেন্ট ইম্পোর্ট করতে পারে। এই প্রক্রিয়াটি গুগল অ্যাডসকে তার দর্শকদের সম্পর্কে আরও জানতে সাহায্য করে অ্যাপ ক্যাম্পেইনগুলোকে বুস্ট করতেও সহায়তা করে।
- প্রজেক্ট ওভারভিউ-এর পাশের বাটনে ক্লিক করে ফায়ারবেস সেটিংস- এ যান।
- ইন্টিগ্রেশন ট্যাবে আপনি গুগল অ্যাডস এবং একটি লিঙ্ক বাটন দেখতে পাবেন। লিঙ্কে ক্লিক করুন এবং তারপরে কন্টিনিউ-তে ক্লিক করুন।
- গুগল অ্যাডস অ্যাকাউন্ট বেছে নিন।
এখন ফায়ারবেসের অংশটি সম্পন্ন হয়েছে।
গুগল অ্যাডস- এ যান।
- লগ ইন করুন এবং কাস্টম ইভেন্টগুলোকে কনভার্সন হিসেবে ইম্পোর্ট করতে টুলস ও সেটিংস > পরিমাপ > কনভার্সন- এ যান।
- নতুন রূপান্তর ক্রিয়া যোগ করতে + বোতামে ক্লিক করুন।
- Google Analytics 4 প্রোপার্টিজ (ফায়ারবেস) বেছে নিন এবং 'চালিয়ে যান'-এ ক্লিক করুন।
- আপনি কনভার্সন হিসেবে চিহ্নিত সমস্ত অ্যানালিটিক্স ইভেন্ট দেখতে পারেন। আমরা আগে যে
event1ইভেন্টটি প্রয়োগ করেছিলাম, সেটি খুঁজুন।
- অ্যাকশনটি চেক করুন, ইম্পোর্ট-এ ক্লিক করুন এবং তারপর কন্টিনিউ-এ ক্লিক করুন।
event1 একটি রূপান্তর ক্রিয়া হিসেবে সেট করার পর, আপনি event1 ইভেন্টটি ব্যবহার করে অ্যাপ অ্যাকশন ক্যাম্পেইন চালু করতে পারবেন।
১০. ইম্পোর্ট করা ইভেন্ট ব্যবহার করে অ্যাপ অ্যাকশন ক্যাম্পেইন চালু করা
- আপনার বর্তমান অ্যাকাউন্টের ক্যাম্পেইন ট্যাবে যান এবং + বোতামে ক্লিক করে একটি নতুন ক্যাম্পেইন শুরু করুন। [নতুন ক্যাম্পেইন]-এ ক্লিক করুন এবং তারপরে চালিয়ে যান-এ ক্লিক করুন।
- অ্যাপ ইনস্টল অপশনটি ব্যবহার করে একটি অ্যাপ প্রচার অভিযান শুরু করুন।
- অ্যাপের নাম, প্যাকেজ নাম বা প্রকাশকের নাম টাইপ করে আপনার অ্যাপটি খুঁজুন।
- বিডিং বিভাগে, ড্রপডাউন মেনু থেকে ইন-অ্যাপ অ্যাকশন নির্বাচন করুন।
- প্রদত্ত তালিকা থেকে আপনার কাস্টম ইভেন্টটি খুঁজুন। প্রতিটি কাজের জন্য লক্ষ্যমাত্রা খরচ নির্ধারণ করুন এবং অন্য যেকোনো অতিরিক্ত অপশন পূরণ করুন।
- আপনার ক্যাম্পেইনের সেটিংস শেষ করুন।
১১. অভিনন্দন
অভিনন্দন, আপনি সফলভাবে আপনার Firebase এবং Google Ads সংযুক্ত করেছেন! এটি Firebase থেকে ইম্পোর্ট করা ইভেন্টগুলোর মাধ্যমে আপনার ক্যাম্পেইনের পারফরম্যান্স বাড়াতে সাহায্য করবে।
আপনি শিখেছেন
- হাইব্রিড অ্যাপে GA4F (Google Analytics for Firebase) কীভাবে ইনিশিয়ালাইজ করবেন
- ওয়েব-পেজে কাস্টম ইভেন্ট এবং প্যারামিটার কীভাবে তৈরি করবেন
- WebView-এর মধ্যে একটি ওয়েব-পেজের ইভেন্টগুলিকে কীভাবে নেটিভ কোডে ফরোয়ার্ড করবেন
- কিভাবে ডিবাগ করতে হয়
- কীভাবে ইভেন্ট ইম্পোর্ট করবেন এবং অ্যাকশন ক্যাম্পেইনের জন্য সেগুলো ব্যবহার করবেন।
১২. তথ্যসূত্র
অফিসিয়াল গাইড
- ওয়েবভিউতে অ্যানালিটিক্স ব্যবহার করুন - ফায়ারবেস - গুগল
ফায়ারবেস এবং গুগল অ্যাডস সেটআপ