বিজ্ঞাপন মেট্রিক্স দিয়ে কোর ওয়েব ভাইটাল ফিল্ড ডেটা পরিমাপ করুন

১. শুরু করার আগে

এই কোডল্যাবে, আপনি শিখবেন কীভাবে একটি আগে থেকে তৈরি গুগল ট্যাগ ম্যানেজার (GTM) ট্যাগ টেমপ্লেট ব্যবহার করে কোর ওয়েব ভাইটালস পরিমাপ করতে হয় এবং সেই ডেটা একটি গুগল অ্যানালিটিক্স ৪ (GA4) প্রপার্টিতে পাঠাতে হয়। এছাড়াও আপনি শিখবেন কীভাবে গুগল অ্যাড ম্যানেজার এবং গুগল অ্যাডসেন্স থেকে GA4-এ ডেটা আনতে হয়, যাতে একটি আগে থেকে তৈরি লুকার স্টুডিও ড্যাশবোর্ডের সাথে কোর ওয়েব ভাইটালস ফিল্ডের ডেটা এবং বিজ্ঞাপনের পারফরম্যান্স মেট্রিক্সের মধ্যে সম্পর্ক স্থাপন করা যায়।

আপনি যা করবেন

• আপনার গুগল ট্যাগ ম্যানেজার কন্টেইনারে একটি ট্যাগ ইম্পোর্ট ও সেটআপ করুন।
• GA4-এ ওয়েব পেজটির কোর ওয়েব ভাইটালস পরিমাপ করুন।
• গুগল ট্যাগ ম্যানেজারে একটি GA4 ইভেন্ট ট্যাগ সেটআপ করুন।
• dataLayer এবং GA4 রিপোর্টিং-এ ওয়েব ভাইটালস ডেটা অন্বেষণ করুন।
• আপনার GA4 প্রপার্টিকে Google Ad Manager এবং Google AdSense-এর সাথে লিঙ্ক করুন।
• লুকার স্টুডিও ড্যাশবোর্ডের মাধ্যমে কোর ওয়েব ভাইটালস এবং বিজ্ঞাপন রাজস্বের মধ্যে সম্পর্ক স্থাপন করুন।

আপনার যা যা লাগবে

• একটি গুগল অ্যানালিটিক্স অ্যাকাউন্ট এবং এডিটর অ্যাক্সেস সহ একটি GA4 ওয়েব প্রপার্টি।
• প্রকাশের অধিকারসহ একটি গুগল ট্যাগ ম্যানেজার অ্যাকাউন্ট এবং ওয়েব কন্টেইনার।
• অ্যাডমিন অ্যাক্সেস সহ একটি গুগল অ্যাড ম্যানেজার নেটওয়ার্ক এবং/অথবা গুগল অ্যাডসেন্স অ্যাকাউন্ট।
• একটি লুকার স্টুডিও অ্যাকাউন্ট।

২. গিটহাব থেকে ট্যাগ টেমপ্লেটটি GTM-এ যোগ করুন।

একটি GTM ট্যাগ টেমপ্লেটের মাধ্যমে কোর ওয়েব ভাইটালস পরিমাপ করা web-vitals লাইব্রেরির উপর ভিত্তি করে করা হয়। প্রথমে, আমরা GTM ট্যাগ টেমপ্লেটটি ডাউনলোড করব।

1. template.tpl ফাইলটি খুলুন
2. আপনার কম্পিউটারে ফাইলটি ডাউনলোড করুন

এখন, আপনার গুগল ট্যাগ ম্যানেজার অ্যাকাউন্টে যান ।

1. আপনার ওয়েব কন্টেইনারটি খুলুন।
2. একটি নতুন ওয়ার্কস্পেস তৈরি করুন এবং একটি নাম লিখুন (যেমন "কোর ওয়েব ভাইটালস মেজারমেন্ট")।
3. 'টেমপ্লেট'-এ যান।
4. "ট্যাগ টেমপ্লেট" বিভাগে, "নতুন" বোতামটি ক্লিক করুন।

5. More Actions মেনুতে ক্লিক করুন এবং Import নির্বাচন করুন।

6. আপনার কম্পিউটার থেকে পূর্বে ডাউনলোড করা TPL ফাইলটি নির্বাচন করুন।
7. 'Save' বাটনটিতে ক্লিক করুন।

আপনি আপনার গুগল ট্যাগ ম্যানেজার কন্টেইনারে ট্যাগ টেমপ্লেটটি যোগ করেছেন।

৩. ওয়েব ভাইটালস ট্যাগ সেটআপ করুন

1. আপনার গুগল ট্যাগ ম্যানেজার ওয়ার্কস্পেসে, "ট্যাগস"-এ যান।
2. 'New'-তে ক্লিক করে, তারপর 'Tag Configuration'-এ গিয়ে 'Custom' সেকশন থেকে 'Web Vitals' ট্যাগটি বেছে নিয়ে Web Vitals ট্যাগটি যোগ করুন।
3. পরবর্তী ধাপ হলো বিভিন্ন সেটিংস কনফিগার করা। সমস্ত সেটিংস গিটহাব রিপোজিটরিতে ব্যাখ্যা করা আছে। এই কোডল্যাব এবং চূড়ান্ত ড্যাশবোর্ডটি কাজ করার জন্য নিম্নলিখিত সেটিংসই যথেষ্ট।

4. পেজ ভিউ ট্রিগারগুলোর মধ্যে একটি প্রয়োগ করুন, যেমন 'সকল পেজ' ট্রিগারটি।
5. প্রয়োজনে ব্যতিক্রম ট্রিগার করার ব্যবস্থাও যোগ করুন।
6. ট্যাগটির নাম "Core Web Vitals - All Pages" দিন এবং এটি সংরক্ষণ করুন।

৪. ডেটালেয়ারে ওয়েব ভাইটালস ডেটা অন্বেষণ করুন

ট্যাগটি বাস্তবে দেখতে, গুগল ট্যাগ ম্যানেজারের প্রিভিউ মোডে যান । ট্যাগ অ্যাসিস্ট্যান্ট খুলবে এবং আপনার সেটআপ প্রিভিউ ও ডিবাগ করার জন্য একটি ইউআরএল চাইবে। গুগল ট্যাগ ম্যানেজার কন্টেইনার যুক্ত আছে এমন একটি পেজের ইউআরএল দিন এবং 'কানেক্ট' বাটনে ক্লিক করুন। দেওয়া ইউআরএলটি সহ একটি আলাদা ট্যাব খুলে যাবে।

1. পৃষ্ঠাটি স্ক্রল করে এবং বিভিন্ন উপাদান বা ফাঁকা স্থানে ক্লিক করে এর সাথে মিথস্ক্রিয়া করুন।
2. এরপর ট্যাগ অ্যাসিস্ট্যান্ট এবং গুগল ট্যাগ ম্যানেজারের প্রিভিউ মোড থাকা ট্যাবটিতে ফিরে যান।
3. বামদিকে আপনি dataLayer পুশ করা বিভিন্ন ইভেন্টগুলো দেখতে পাবেন।
4. প্রথমে আপনার নির্বাচিত পেজ ভিউ ট্রিগারে ওয়েব ভাইটালস ট্যাগটি ফায়ার হয়েছে কিনা তা যাচাই করে দেখা উচিত।

5. এছাড়াও আপনি তিনটি "web_vitals" ইভেন্ট দেখতে পাবেন, যেখানে প্রতিটি একটি করে কোর ওয়েব ভাইটাল (Core Web Vital) নির্দেশ করে: LCP, INP এবং CLS।

6. প্রথমটিতে ক্লিক করুন এবং ডানদিকে 'API Call' ট্যাবটি খুলুন, যেখানে আপনি ট্যাগ টেমপ্লেট থেকে dataLayer এ পাঠানো ডেটা দেখতে পাবেন।

7. "web_vitals" ইভেন্টের অন্যান্য এন্ট্রিগুলোও পরীক্ষা করুন। বিভিন্ন ডেটা টাইপের জন্য রেফারেন্স হিসেবে web-vitals.js ডকুমেন্টেশন ব্যবহার করুন।

৫. ওয়েব ভাইটালস ডেটা GA4-এ পাঠান

dataLayer থেকে Core Web Vitals ডেটা নিয়ে GA4-এ পাঠাতে হলে আপনাকে যা করতে হবে তা হলো:

• GA4 ট্যাগের জন্য একটি ট্রিগার তৈরি করুন
• dataLayer থেকে ডেটা নেওয়ার জন্য ভেরিয়েবল তৈরি করুন।
• GA4 ইভেন্ট ট্যাগ তৈরি করুন

ট্রিগার তৈরি করুন

1. আপনার গুগল ট্যাগ ম্যানেজার ওয়ার্কস্পেসে, "ট্রিগারস"-এ যান।
2. একটি নতুন ট্রিগার যোগ করতে, 'New'-তে ক্লিক করুন, তারপর 'Trigger Configuration'-এ যান এবং 'Other' সেকশন থেকে 'Custom Event' বেছে নিন।
3. ইভেন্টের নামের ফিল্ডে "web_vitals" সেট করুন, ট্রিগারটির নাম দিন এবং সেভ করুন।

ডেটালেয়ার ভেরিয়েবল তৈরি করুন

1. আপনার গুগল ট্যাগ ম্যানেজার ওয়ার্কস্পেসে, "ভেরিয়েবলস"-এ যান।
2. "ডেটা লেয়ার ভেরিয়েবল" টাইপ থেকে একটি নতুন ব্যবহারকারী-সংজ্ঞায়িত ভেরিয়েবল তৈরি করুন।
3. ডেটা লেয়ার ভেরিয়েবল নেম ফিল্ডে 'webVitalsData.name' সেট করুন, ভেরিয়েবলটির একটি নাম দিন (যেমন "DLV - webVitalsData.name") এবং সেভ করুন।

4. বাকি চারটি প্রয়োজনীয় ডেটা লেয়ার ভেরিয়েবলের জন্য এই ধাপগুলো পুনরাবৃত্তি করুন। 'webVitalsData.value' তৈরি করুন।

5. "webVitalsData.id" নামে আরেকটি ভেরিয়েবল তৈরি করুন।

6. "webVitalsData.rating" তৈরি করুন।

7. "webVitalsData.delta" তৈরি করুন।

8. শেষ পর্যন্ত আপনার নিম্নলিখিত ব্যবহারকারী-সংজ্ঞায়িত dataLayer ভেরিয়েবলগুলো তৈরি হবে:

GA4 ইভেন্ট ট্যাগ তৈরি করুন

GA4 ইভেন্ট ট্যাগ তৈরি করার আগে নিশ্চিত করুন যে আপনার গুগল ট্যাগটি আগে থেকেই সেট আপ করা আছে ।

1. আপনার গুগল ট্যাগ ম্যানেজার ওয়ার্কস্পেসে, "ট্যাগস"-এ যান।
2. একটি GA4 ইভেন্ট ট্যাগ যোগ করতে, 'New'-তে ক্লিক করুন, তারপর 'Tag Configuration'-এ যান এবং 'Google Analytics' সেকশন থেকে 'Google Analytics: GA4 event' ট্যাগটি বেছে নিন।
3. আপনার পরিমাপ আইডিটি সংশ্লিষ্ট ক্ষেত্রে প্রবেশ করান ।

4. 'ইভেন্টের নাম' ইনপুট ফিল্ডের জন্য, পূর্ববর্তী ধাপে তৈরি করা dataLayer ভেরিয়েবল 'DLV - webVitalsData.name' নির্বাচন করুন।

5. স্ক্রিনশটে দেখানো অনুযায়ী অন্যান্য dataLayer ভেরিয়েবলগুলোকে ইভেন্ট প্যারামিটার হিসেবে যোগ করুন। এছাড়াও, Core Web Vitals ইভেন্টগুলোকে গ্রুপ করার জন্য "event_category" প্যারামিটারটি "Web Vitals"-এর মতো কোনো ভ্যালু দিয়ে যোগ করতে ভুলবেন না।

6. এই ইভেন্ট প্যারামিটারগুলোকে GA4 UI-তে কাস্টম ডাইমেনশন হিসেবে রেজিস্টার করুন ।
7. আপনার GA4 সেটআপের প্রয়োজন অনুযায়ী অতিরিক্ত সেটিংস প্রয়োগ করুন।
8. GA4 ট্যাগের ট্রিগার হিসেবে "web_vitals" কাস্টম ইভেন্টটি সেট করুন।
9. প্রয়োজনে ব্যতিক্রম ট্রিগার করার ব্যবস্থাও যোগ করুন।

৬. GA4-এ ডেটা যাচাই করুন

GA4-এ ডেটা প্রবাহ যাচাই করতে আবার গুগল ট্যাগ ম্যানেজারের প্রিভিউ মোডে যান। ট্যাগ অ্যাসিস্ট্যান্টকে একটি URL দিন এবং 'কানেক্ট'-এ ক্লিক করুন।

1. পৃষ্ঠাটি স্ক্রল করে এবং বিভিন্ন উপাদান বা ফাঁকা স্থানে ক্লিক করে এর সাথে মিথস্ক্রিয়া করুন।
2. এরপর ট্যাগ অ্যাসিস্ট্যান্ট এবং গুগল ট্যাগ ম্যানেজারের প্রিভিউ মোড থাকা ট্যাবটিতে ফিরে যান।
3. বামদিকে, প্রতিটি "web_vitals" এন্ট্রিতে ক্লিক করুন এবং নিশ্চিত করুন যে GA4 Core Web Vitals ট্যাগটি সক্রিয় হচ্ছে।

4. dataLayer থেকে ডেটা সঠিকভাবে নেওয়া হয়েছে কিনা তা যাচাই করতে, কার্ডটিতে ক্লিক করে GA4 ট্যাগটি খুলুন। ভ্যারিয়েবলগুলোকে ভ্যালু হিসেবে প্রদর্শন করতে ভুলবেন না।

5. এখন আপনার GA4 প্রপার্টিতে যান এবং রিয়েলটাইম রিপোর্টটি খুলুন।
6. "ইভেন্টের নাম অনুসারে ইভেন্টের সংখ্যা" কার্ডে আপনি যাচাই করতে পারেন যে আপনার কোর ওয়েব ভাইটালস ইভেন্টগুলি সফলভাবে সংগ্রহ করা হয়েছে কিনা।

7. রিয়েলটাইম রিপোর্টে যদি বিপুল পরিমাণ ডেটা প্রসেস করা হয়, তবে ইভেন্টগুলো সহজে শনাক্ত করা কঠিন হতে পারে। সেক্ষেত্রে ডিবাগভিউ রিপোর্ট ব্যবহার করুন, যা আপনাকে একটি নির্দিষ্ট ডিভাইসের ডেটা দেখতে দেয়।

৭. আপনার সেটআপ প্রকাশ করুন।

আপনার সেটআপটি সফলভাবে পরীক্ষা করা হয়ে গেলে, এখন আপনার ওয়ার্কস্পেসটি প্রকাশ করার সময় এসেছে।

1. আপনার গুগল ট্যাগ ম্যানেজার ওয়ার্কস্পেসটি খুলুন।
2. UI-এর উপরের ডানদিকে "Submit"-এ ক্লিক করুন।
3. একটি ভার্সনের নাম ও বিবরণ দিন এবং "Publish"-এ ক্লিক করে আপনার সেটআপটি লাইভ করুন।

৮. GA4-কে Google Ad Manager বা Google AdSense-এর সাথে সংযুক্ত করুন।

GA4-এ কোর ওয়েব ভাইটালস ডেটা সংগ্রহ করার পর, ড্যাশবোর্ডটি কাজ করার জন্য GA4-এ বিজ্ঞাপন-সম্পর্কিত মেট্রিকগুলোও উপলব্ধ থাকতে হবে। GA4-এর সাথে হয় গুগল অ্যাড ম্যানেজার এবং গুগল অ্যাডসেন্স উভয়ই সংযুক্ত করুন, অথবা এই বিজ্ঞাপন সমাধানগুলোর মধ্যে শুধু একটিকে সংযুক্ত করুন। অনুগ্রহ করে মনে রাখবেন, এই সংযোগ স্থাপনের জন্য আপনার GA4-এ এডিটর (বা উচ্চতর) অনুমতি এবং গুগল অ্যাড ম্যানেজার ও গুগল অ্যাডসেন্স-এ অ্যাডমিনিস্ট্রেটর অনুমতি থাকতে হবে।

GA4-কে গুগল অ্যাড ম্যানেজারের সাথে সংযুক্ত করুন

1. আপনার গুগল অ্যাড ম্যানেজার নেটওয়ার্কে যান।
2. "অ্যাডমিন" -> "গ্লোবাল সেটিংস" -> "নেটওয়ার্ক সেটিংস"-এ ক্লিক করুন।
3. 'রিপোর্ট সেটিংস' বিভাগে, 'অ্যাড ম্যানেজার রিপোর্টিং-এ গুগল অ্যানালিটিক্স ৪ প্রপার্টি রিপোর্টস' সক্রিয় করুন।

4. শর্তাবলী পর্যালোচনা করুন এবং 'নিশ্চিত করুন'-এ ক্লিক করুন।
5. আপডেটটি সংরক্ষণ করুন।
6. "অ্যাডমিন" -> "লিঙ্ক করা অ্যাকাউন্ট" -> "গুগল অ্যানালিটিক্স ৪"-এ যান।
7. 'New Google Analytics 4 property link'-এ ক্লিক করুন।
8. আপনার যে GA4 প্রপার্টিটি লিঙ্ক করতে চান, সেটি খুঁজুন এবং নির্বাচন করুন।
9. সেভ-এ ক্লিক করুন এবং আপনার কাজ শেষ।

GA4-কে Google AdSense-এর সাথে সংযুক্ত করুন

1. আপনার গুগল অ্যাডসেন্স অ্যাকাউন্টে যান।
2. 'Account' -> 'Access and authorization' -> 'Google Analytics integration'-এ ক্লিক করুন।
3. "+নতুন লিঙ্ক"-এ ক্লিক করুন।

4. আপনার যে GA4 প্রপার্টিটি লিঙ্ক করতে চান, সেটি খুঁজুন এবং নির্বাচন করুন।
5. 'লিঙ্ক তৈরি করুন'-এ ক্লিক করুন।

৯. লুকার স্টুডিও দিয়ে ডেটা ভিজ্যুয়ালাইজ করুন।

বিজ্ঞাপনের মেট্রিক্সের সাথে কোর ওয়েব ভাইটালস ডেটার একটি ভিজ্যুয়াল উপস্থাপনার জন্য এই ধাপে একটি লুকার স্টুডিও ড্যাশবোর্ড সেটআপ করতে হবে। কোর ওয়েব ভাইটালস এবং বিজ্ঞাপনের আয়ের মধ্যে সম্পর্ক স্থাপন করতে অনুগ্রহ করে এই ধাপগুলো অনুসরণ করুন।

1. এই লুকার স্টুডিও ড্যাশবোর্ড টেমপ্লেটটি খুলুন
2. ড্যাশবোর্ডটি কপি করুন ।
3. ড্রপডাউন তালিকা থেকে আপনার GA4 প্রপার্টি নির্বাচন করে ডেটা সোর্স আপডেট করুন।
4. সম্পন্ন হয়েছে

অনুগ্রহ করে মনে রাখবেন, ড্যাশবোর্ডটি সঠিকভাবে কাজ করতে এবং ডেটা প্রদর্শন করতে, ডেটা এই কোডল্যাবের সিনট্যাক্স এবং নামকরণের নিয়মের উপর নির্ভর করে।

ড্যাশবোর্ডের প্রথম পৃষ্ঠাটি আপনাকে আপনার কোর ওয়েব ভাইটালস পারফরম্যান্সের একটি ঐতিহাসিক চিত্র দেবে:

দ্বিতীয় পৃষ্ঠায় আপনি কোর ওয়েব ভাইটালস-এর সাথে গুগল অ্যাড ম্যানেজার এবং/অথবা গুগল অ্যাডসেন্স থেকে প্রাপ্ত বিজ্ঞাপনের আয়ের সম্পর্ক স্থাপন করতে পারবেন:

তৃতীয় পৃষ্ঠাটি আপনাকে বিজ্ঞাপন-সম্পর্কিত মেট্রিক্সের পাশাপাশি পৃষ্ঠা পথের স্তরে কোর ওয়েব ভাইটালস-এর পারফরম্যান্স বিশ্লেষণ করার ক্ষমতা দেয়:

১০. উপসংহার

অভিনন্দন! আপনি GA4 ব্যবহার করে কোর ওয়েব ভাইটালস এবং গুগল অ্যাড ম্যানেজার ও গুগল অ্যাডসেন্স থেকে বিজ্ঞাপনের পারফরম্যান্স মেট্রিক্স পরিমাপ ও রিপোর্ট করার পদ্ধতি শিখেছেন।

আরও জানুন

• গুগল টুলস ব্যবহার করে কোর ওয়েব ভাইটালস এবং বিজ্ঞাপন রাজস্বের মধ্যে সম্পর্ক স্থাপন
• পেজের গতিকে প্রভাবিত না করে কার্যকরভাবে বিজ্ঞাপন লোড করা।
• বৃহত্তম বিষয়বস্তুপূর্ণ পেইন্ট অপ্টিমাইজ করুন
• ক্রমবর্ধমান লেআউট শিফট অপ্টিমাইজ করুন
• পরবর্তী পেইন্টের সাথে মিথস্ক্রিয়া অপ্টিমাইজ করুন