১. ভূমিকা
সর্বশেষ হালনাগাদ: ২০২১-১২-২২
আপনি যা তৈরি করবেন
এই কোডল্যাবে আপনি শিখবেন, কীভাবে WebView-এর মধ্যে থাকা একটি ওয়েব-পেজ থেকে নেটিভ কোডে ইভেন্ট ফরওয়ার্ড করতে হয়, যাতে GA4F সেই ইভেন্টগুলো ট্র্যাক করতে পারে।
আমরা নমুনা হাইব্রিড অ্যান্ড্রয়েড অ্যাপটি ব্যবহার করব, যেটি ওয়েবভিউ ব্যবহার করে একটি ওয়েব-পেজ কল করে।
আপনি যা শিখবেন
- হাইব্রিড অ্যাপে GA4F (Google Analytics for Firebase) কীভাবে ইনিশিয়ালাইজ করবেন
- ওয়েব-পেজে কাস্টম ইভেন্ট এবং প্যারামিটার কীভাবে তৈরি করবেন
- WebView-এর মধ্যে একটি ওয়েব-পেজের ইভেন্টগুলিকে কীভাবে নেটিভ কোডে ফরোয়ার্ড করবেন
- কিভাবে ডিবাগ করতে হয়
- কীভাবে ইভেন্ট ইম্পোর্ট করবেন এবং অ্যাকশন ক্যাম্পেইনের জন্য সেগুলো ব্যবহার করবেন।
আপনার যা যা লাগবে
- অ্যান্ড্রয়েড স্টুডিও ৩.৬ বা উচ্চতর
- ফায়ারবেস অ্যাকাউন্ট
২. প্রস্তুতি গ্রহণ
কোডটি নিন
ফায়ারবেস গাইড ডকুমেন্টগুলোতে এই প্রজেক্টের জন্য প্রয়োজনীয় স্যাম্পল কোড গিটহাবে দেওয়া আছে।
শুরু করার জন্য, আপনাকে কোডটি নিয়ে আপনার পছন্দের ডেভেলপমেন্ট এনভায়রনমেন্টে খুলতে হবে। আমরা দুটি ডিরেক্টরি ব্যবহার করব: android, web। 'android' ডিরেক্টরিটি অ্যান্ড্রয়েড অ্যাপের জন্য এবং 'web' ডিরেক্টরিটি একটি ওয়েব পেজের জন্য, যেটিকে অ্যাপটি WebView-এর মাধ্যমে কল করবে।
৩. একটি ফায়ারবেস প্রজেক্ট তৈরি ও সেট আপ করুন।
Firebase ব্যবহার শুরু করতে, আপনাকে একটি Firebase প্রজেক্ট তৈরি ও সেট আপ করতে হবে।
একটি ফায়ারবেস প্রজেক্ট তৈরি করুন
- Firebase- এ সাইন ইন করুন।
ফায়ারবেস কনসোলে, 'অ্যাড প্রজেক্ট' (বা 'ক্রিয়েট এ প্রজেক্ট')-এ ক্লিক করুন এবং আপনার ফায়ারবেস প্রজেক্টটির নাম 'Webview-test-codelab' অথবা আপনার পছন্দমতো যেকোনো নাম দিন।
- প্রজেক্ট তৈরির অপশনগুলো একে একে দেখুন। অনুরোধ করা হলে Firebase-এর শর্তাবলী মেনে নিন। এই প্রজেক্টের জন্য আপনাকে Google Analytics চালু করতে হবে, কারণ অ্যাকশন ইভেন্ট ট্র্যাক করতে এবং কনভার্সন বিশ্লেষণ করতে আপনার Google Analytics ইভেন্টের প্রয়োজন হবে।
ফায়ারবেস প্রজেক্ট সম্পর্কে আরও জানতে, “ফায়ারবেস প্রজেক্ট বুঝুন” দেখুন।
৪. অ্যান্ড্রয়েড ফায়ারবেস কনফিগারেশন
অ্যান্ড্রয়েড কনফিগার করুন
- Firebase কনসোলে, বাম দিকের নেভিগেশন থেকে Project Overview নির্বাচন করুন, তারপর "Get started by adding Firebase to your app" এর নিচে থাকা Android বোতামটিতে ক্লিক করুন।
আপনি পরবর্তী স্ক্রিনে দেখানো ডায়ালগটি দেখতে পাবেন।
- প্রদান করার জন্য গুরুত্বপূর্ণ মানটি হলো অ্যান্ড্রয়েড প্যাকেজ নেম, যা আপনি পরবর্তী ধাপটি অনুসরণ করে পাবেন।
- আপনার অ্যাপ ডিরেক্টরিতে
android/app/src/main/AndroidManifest.xmlফাইলটি খুলুন। -
manifestএলিমেন্টের মধ্যে,packageঅ্যাট্রিবিউটের স্ট্রিং ভ্যালুটি খুঁজুন। এই ভ্যালুটি হলো অ্যান্ড্রয়েড প্যাকেজের নাম (যেমনcom.yourcompany.yourproject)। এই ভ্যালুটি কপি করুন। - Firebase ডায়ালগ বক্সে, কপি করা প্যাকেজ নামটি
Android package nameফিল্ডে পেস্ট করুন। - এখানে আমাদের SHA-1 কী-এর প্রয়োজন নেই, যদি না আপনি গুগল সাইন ইন বা ফায়ারবেস ডাইনামিক লিঙ্ক ব্যবহার করার পরিকল্পনা করেন (উল্লেখ্য যে, এগুলো এই কোডল্যাবের অংশ নয়)। আপনি যদি গুগল প্লে থেকে
in_app_purchaseডেটা ইম্পোর্ট করার পরিকল্পনা করেন, তাহলে আপনাকে পরে কী-টি সেট করতে হবে। - অ্যাপটি নিবন্ধন করুন- এ ক্লিক করুন।
- এরপর Firebase-এ,
google-services.jsonকনফিগারেশন ফাইলটি ডাউনলোড করার জন্য নির্দেশাবলী অনুসরণ করুন।
- আপনার অ্যাপ ডিরেক্টরিতে যান, তারপর (এইমাত্র ডাউনলোড করা)
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'
}
}
- আপনার অ্যাপটি যদি এখনও চালু থাকে, তবে এটি বন্ধ করে পুনরায় তৈরি করুন, যাতে গ্রেডল ডিপেন্ডেন্সিগুলো ইনস্টল করতে পারে।
অ্যান্ড্রয়েডের জন্য আপনার অ্যাপটি কনফিগার করা শেষ!
৫. ওয়েবে একটি অ্যানালিটিক্স ওয়েব ইন্টারফেস তৈরি করুন এবং কাস্টম ইভেন্টগুলো লগ করুন।
গুগল অ্যানালিটিক্স ব্যবহার করে ওয়েবভিউয়ের ইভেন্টগুলো ট্র্যাক করতে হলে, আপনাকে ওয়েব এবং অ্যান্ড্রয়েড অ্যাপ উভয় ক্ষেত্রেই কোডটি যুক্ত করতে হবে।
এই অংশে, চলুন দেখে নেওয়া যাক ওয়েবে কোন কোডগুলো যুক্ত করতে হবে। 
প্রথমে, এইচটিএমএল ফাইলে ব্যবহারের জন্য একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করুন। নমুনা কোডে, js ফাইলটির নাম index.js। অ্যান্ড্রয়েডের জন্য AnalyticsWebInterface এবং আইওএসের জন্য messageHander কল করতে আপনাকে নিচের কোডের মতো করে "logEvent" ফাংশনটি তৈরি করতে হবে।
এবং যেখানে ইভেন্টটি ট্র্যাক করতে চান, সেখানে নিচের মতো করে এই ফাংশনটি কল করুন।
অ্যান্ড্রয়েডের ওয়েবভিউতে যখন কোনো ইভেন্ট ট্রিগার হয়, তখন "window.AnalyticsWebInterface" কল করা হয় এবং এটি ইভেন্টটিকে নেটিভ অ্যাপের সাথে সংযুক্ত করে।
৬. ওয়েব পেজের ইউআরএল পেতে হোস্ট ওয়েব ডিরেক্টরি ব্যবহার করুন।
আপনার অ্যাপের WebView-এর মধ্যে কোনো ওয়েব পেজ কল করার আগে, আপনার একটি ওয়েব পেজ ইউআরএল প্রয়োজন। ওয়েব পেজ হোস্ট করার অনেক পদ্ধতি থাকলেও, এই কোডল্যাবে আমরা শুধুমাত্র সুবিধার জন্য ফায়ারবেস হোস্টিং পরিষেবা ব্যবহার করার নির্দেশনা দেব।
- আপনার টার্মিনালে web ডিরেক্টরিতে প্রবেশ করুন (যেমন,
cd web) এবং নিম্নলিখিত কমান্ডগুলো চালান: -
npm install -g firebase-tools- এটি Firebase CLI ইনস্টল করবে। -
firebase login -
firebase init - কোন ফিচারটি সেট আপ করতে চান জিজ্ঞাসা করা হলে 'হোস্টিং' বেছে নিন।
- আপনার অ্যান্ড্রয়েড অ্যাপের জন্য তৈরি করা প্রজেক্টটি বেছে নিন।
- বাকি সমস্ত প্রম্পটের জন্য ডিফল্টগুলো গ্রহণ করুন।
-
firebase deploy --only hosting- ফায়ারবেস হোস্টিং-এ ডিপ্লয় করার জন্য।
৭. অ্যান্ড্রয়েড অ্যাপে ইন্টারফেস কোড তৈরি করুন
গুগল অ্যানালিটিক্স ব্যবহার করে একটি ওয়েবভিউ-এর ইভেন্টগুলো ট্র্যাক করতে হলে, আপনাকে ওয়েব এবং অ্যান্ড্রয়েড উভয় ক্ষেত্রেই কোডটি যুক্ত করতে হবে। এই অংশে, চলুন দেখে নেওয়া যাক অ্যান্ড্রয়েড অ্যাপে কোন কোডটি যুক্ত করতে হবে।
'AnalyticsWebInterface' ক্লাসটি তৈরি করার জন্য 'AnalyticsWebInterface.java' ফাইলটি তৈরি করুন। এই ক্লাসের মধ্যে, নিচের মতো করে web js ফাইলের logEvent ফাংশনটি সংযোগ করার জন্য আপনাকে @JavascriptInterface কোডটি লিখতে হবে।
এরপরে, আপনাকে অ্যাক্টিভিটিতে একটি জাভাস্ক্রিপ্ট ইন্টারফেস যোগ করতে হবে, যা নিচের মতো করে ওয়েবভিউকে কল করবে।
এটির সম্পূর্ণ কোড দেখতে, অনুগ্রহ করে "সেট আপ করা" ধাপে আপনার ডাউনলোড করা নমুনা কোডটি দেখুন।
৮. ইভেন্ট পরীক্ষা ও ডিবাগ করা
টেস্ট ডিভাইসটি সংযোগ করার পর বা এমুলেটর চালু করার পর, ইভেন্ট ডিবাগ করার জন্য আপনি অ্যান্ড্রয়েড স্টুডিও টার্মিনালে নিম্নলিখিত কোডটি ব্যবহার করতে পারেন।
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
আপনার কোড সঠিকভাবে কাজ করলে, আপনি নিচের মতো লগ দেখতে পাবেন।
আপনি যদি ফায়ারবেস কনসোলে চেক করতে চান, তাহলে রিয়েলটাইম ট্যাবটিও ব্যবহার করতে পারেন। ফায়ারবেস কনসোলে যান এবং নিচের ছবির মতো রিয়েলটাইম ট্যাবে ক্লিক করুন।
এরপর, 'Add comparison' ফাংশনটি ব্যবহার করে অ্যান্ড্রয়েড প্ল্যাটফর্ম ইভেন্ট ফিল্টার করুন।
আপনার কোডটি সঠিকভাবে প্রয়োগ করা হলে, আপনি অ্যান্ড্রয়েড অ্যাপের ইভেন্টগুলো রিয়েলটাইম ট্যাবে দেখতে পাবেন।
কয়েক ঘণ্টার মধ্যেই আপনি ফায়ারবেস কনসোলের ইভেন্টস ট্যাবে আপনার লগ করা ইভেন্টগুলো দেখতে পাবেন। ফায়ারবেস কনসোলে থাকা অ্যানালিটিক্স সেকশন থেকে শুধু ইভেন্টস ট্যাবে ক্লিক করুন। এছাড়াও, ইভেন্টটিতে ক্লিক করে আপনি event1 ইভেন্টের ভেতরের ভ্যালুগুলোও দেখতে পারেন।
'Mark as conversion' সুইচটি ডানদিকে স্লাইড করে event1 একটি রূপান্তর হিসেবে চিহ্নিত করুন।
ইভেন্টটি যদি কনভার্সন ট্যাবে থাকে, তাহলে আপনি সফলভাবে ইভেন্টটিকে একটি কনভার্সন হিসেবে চিহ্নিত করেছেন। গুগল অ্যাডস এখন ফায়ারবেস থেকে এই ইভেন্টটি ইম্পোর্ট করতে পারবে।
ডিবাগিংয়ের জন্য Firebase DebugView ব্যবহার করুন। আরও বিস্তারিত জানতে, ডিবাগিং ইভেন্ট দেখুন।
৯. গুগল অ্যাডস-এ অ্যানালিটিক্স ইভেন্ট ইম্পোর্ট করা
আপনার Firebase-Flutter সেটআপ সম্পূর্ণ হয়ে গেলে, আপনি অ্যাকশন ইভেন্ট সহ অ্যাপ ক্যাম্পেইন চালু করার জন্য প্রস্তুত। Firebase-কে Google Ads-এর সাথে লিঙ্ক করার মাধ্যমে শুরু করুন। Firebase-কে Google Ads-এর সাথে লিঙ্ক করার ফলে, অ্যাপ ক্যাম্পেইনগুলো Firebase ইভেন্ট ইম্পোর্ট করতে পারে। এই প্রক্রিয়াটি Google Ads-কে তাদের অডিয়েন্স সম্পর্কে আরও জানতে সাহায্য করে অ্যাপ ক্যাম্পেইনগুলোকে বুস্ট করতেও সহায়তা করে।
- প্রজেক্ট ওভারভিউ-এর পাশের বাটনে ক্লিক করে ফায়ারবেস সেটিংস- এ যান।
- ইন্টিগ্রেশন ট্যাবে আপনি গুগল অ্যাডস এবং একটি লিঙ্ক বাটন দেখতে পাবেন। লিঙ্কে ক্লিক করুন এবং তারপরে কন্টিনিউ-তে ক্লিক করুন।
- গুগল অ্যাডস অ্যাকাউন্ট বেছে নিন।
এখন ফায়ারবেসের অংশটি সম্পন্ন হয়েছে।
গুগল অ্যাডস- এ যান।
- লগ ইন করুন এবং কাস্টম ইভেন্টগুলোকে কনভার্সন হিসেবে ইম্পোর্ট করতে টুলস ও সেটিংস > পরিমাপ > কনভার্সন- এ যান।
- নতুন রূপান্তর ক্রিয়া যোগ করতে + বোতামে ক্লিক করুন।
- Google Analytics 4 প্রোপার্টিজ (ফায়ারবেস) বেছে নিন এবং 'চালিয়ে যান'-এ ক্লিক করুন।
- আপনি কনভার্সন হিসেবে চিহ্নিত সমস্ত অ্যানালিটিক্স ইভেন্ট দেখতে পারেন। আমরা আগে যে
event1ইভেন্টটি প্রয়োগ করেছিলাম, সেটি খুঁজুন।
- অ্যাকশনটি চেক করুন, ইম্পোর্ট-এ ক্লিক করুন এবং তারপর কন্টিনিউ-এ ক্লিক করুন।
event1 একটি কনভার্সন অ্যাকশন হিসেবে সেট করার পর, আপনি এমন অ্যাকশন ক্যাম্পেইন চালু করতে পারেন যা সেইসব ব্যবহারকারীদের টার্গেট করবে যারা সম্ভবত ৫ বারের বেশি event1 ইভেন্টটি ট্রিগার করবে।
১০. ইম্পোর্ট করা ইভেন্ট ব্যবহার করে অ্যাপ অ্যাকশন ক্যাম্পেইন চালু করা
- আপনার বর্তমান অ্যাকাউন্টের ক্যাম্পেইন ট্যাবে যান এবং + বোতামে ক্লিক করে একটি নতুন ক্যাম্পেইন শুরু করুন। [নতুন ক্যাম্পেইন]-এ ক্লিক করুন এবং তারপরে চালিয়ে যান-এ ক্লিক করুন।
- অ্যাপ ইনস্টল অপশনটি ব্যবহার করে একটি অ্যাপ প্রচার অভিযান শুরু করুন।
- অ্যাপের নাম, প্যাকেজ নাম বা প্রকাশকের নাম টাইপ করে আপনার অ্যাপটি খুঁজুন।
- বিডিং বিভাগে, ড্রপডাউন মেনু থেকে ইন-অ্যাপ অ্যাকশন নির্বাচন করুন।
- প্রদত্ত তালিকা থেকে আপনার কাস্টম ইভেন্টটি খুঁজুন। প্রতিটি কাজের জন্য লক্ষ্যমাত্রা খরচ নির্ধারণ করুন এবং অন্য যেকোনো অতিরিক্ত অপশন পূরণ করুন।
- আপনার ক্যাম্পেইনের সেটিংস শেষ করুন।
১১. অভিনন্দন
অভিনন্দন, আপনি সফলভাবে আপনার Firebase এবং Google Ads সংযুক্ত করেছেন! এটি Firebase থেকে ইম্পোর্ট করা ইভেন্টগুলোর মাধ্যমে আপনার ক্যাম্পেইনের পারফরম্যান্স বাড়াতে সাহায্য করবে।
আপনি শিখেছেন
- হাইব্রিড অ্যাপে GA4F (Google Analytics for Firebase) কীভাবে ইনিশিয়ালাইজ করবেন
- ওয়েব-পেজে কাস্টম ইভেন্ট এবং প্যারামিটার কীভাবে তৈরি করবেন
- WebView-এর মধ্যে একটি ওয়েব-পেজের ইভেন্টগুলিকে কীভাবে নেটিভ কোডে ফরোয়ার্ড করবেন
- কিভাবে ডিবাগ করতে হয়
- কীভাবে ইভেন্ট ইম্পোর্ট করবেন এবং অ্যাকশন ক্যাম্পেইনের জন্য সেগুলো ব্যবহার করবেন।