গুগল অ্যানালিটিক্সের সাথে একটি ওয়েবভিউতে ইভেন্টগুলি ট্র্যাক করুন

1. ভূমিকা

শেষ আপডেট: 2021-12-22

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

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

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

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

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

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

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

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

কোড পান

ফায়ারবেস গাইড নথিগুলি একটি গিথুবে এই প্রকল্পের জন্য আমাদের প্রয়োজনীয় নমুনা কোড সরবরাহ করে।

7074c0e83b5fd4b1.png

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

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

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

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

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

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

fd93054e27d6b386.png

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

e58151a081f0628.png

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

4. অ্যান্ড্রয়েড ফায়ারবেস কনফিগারেশন

3e5b8f1b6ca538c4.png

অ্যান্ড্রয়েড কনফিগার করুন

  1. ফায়ারবেস কনসোলে, বাম নেভিতে প্রজেক্ট ওভারভিউ নির্বাচন করুন, তারপর "আপনার অ্যাপে ফায়ারবেস যোগ করে শুরু করুন" এর অধীনে অ্যান্ড্রয়েড বোতামে ক্লিক করুন।

আপনি নিম্নলিখিত স্ক্রিনে দেখানো ডায়ালগ দেখতে পাবেন।

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 সাইন ইন বা ফায়ারবেস ডায়নামিক লিঙ্ক ব্যবহার করার পরিকল্পনা করেন (মনে রাখবেন যে এগুলো এই কোডল্যাবের অংশ নয়)। আপনি যদি 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 Services Gradle প্লাগইন প্রয়োজন।
  4. আপনার 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 এর জন্য মেসেজহ্যান্ডার নিচের কোডের মতো।

6d9fac050fb64f4e.png

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

f40c1596678173ba.png

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

6. ওয়েব পেজ ইউআরএল পেতে ওয়েব ডিরেক্টরি হোস্ট করুন

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

  • আপনার টার্মিনালে, ওয়েব ডিরেক্টরি লিখুন (উদাঃ cd web ) এবং নিম্নলিখিত কমান্ডগুলি চালান:
  • npm install -g firebase-tools - এটি Firebase CLI ইনস্টল করবে।
  • firebase login
  • firebase init
  • আপনি কোন বৈশিষ্ট্যটি সেট আপ করতে চান তা জিজ্ঞাসা করা হলে 'হোস্টিং' চয়ন করুন।
  • আপনার অ্যান্ড্রয়েড অ্যাপের জন্য আপনি যে প্রকল্পটি সেট আপ করেছেন সেটি বেছে নিন।
  • সমস্ত অবশিষ্ট প্রম্পটের জন্য ডিফল্ট গ্রহণ করুন।
  • firebase deploy --only hosting - Firebase হোস্টিং এ স্থাপন করুন।

e7d56dd78a4448e7.png

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

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

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

6f069f438e4667ba.png

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

f2c6e5affd8c8993.png

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

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

আপনার কোড ভাল কাজ করে, আপনি নীচের মত লগ দেখতে পাবেন.

33c64f811e7e9a0f.png

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

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

af6e8da348dbe775.pngaa804eb02f0b7d3f.png

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

bde531c7a37c0851.png

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

ডানদিকে রূপান্তর হিসাবে চিহ্নিত সুইচটি স্লাইড করে একটি রূপান্তর হিসাবে event1 চিহ্নিত করুন৷

486010186b929deb.png

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

b72cf934a76e174b.png

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

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

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

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

b711bf2e94fa0895.png

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

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

Google Ads এ যান।

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

73cec8d2e80eab03.png

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

4b1d8f6a712b2ac6.png

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

e2bd5e1f7b9b73d9.png

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

ab35e341dff32e48.png

একটি রূপান্তর ক্রিয়া হিসাবে event1 সেট করার পরে, আপনি এমন অ্যাকশন প্রচারাভিযান চালু করতে পারেন যা এমন ব্যবহারকারীদের লক্ষ্য করতে পারে যারা সম্ভবত 5 বারের বেশি event1 ইভেন্টগুলিকে ফায়ার করবে৷

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

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

af98c44d1476558.png

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

ee2bf8eb80cddd7c.png

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

11. অভিনন্দন

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

আপনি শিখেছেন

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