টিউটোরিয়াল১ জুন ২০২৬ | FlexyConsent

Next.js, Gatsby এবং স্ট্যাটিক সাইটের জন্য কুকি সম্মতি: একটি ডেভেলপার ইন্টিগ্রেশন গাইড

স্ট্যাটিক সাইট সম্মতি সমস্যা

Next.js, Gatsby এবং Nuxt.js-এর মতো আধুনিক JavaScript ফ্রেমওয়ার্কগুলি ওয়েব পেজ কীভাবে তৈরি এবং ডেলিভার করা হয় তাতে একটি প্যারাডাইম শিফট এনেছে। পেজগুলি বিল্ড টাইমে বা সার্ভারে প্রি-রেন্ডার করা হয়, তারপর ক্লায়েন্টে হাইড্রেট করা হয়। এটি কুকি সম্মতির জন্য একটি অনন্য চ্যালেঞ্জ তৈরি করে: কোনো ট্র্যাকিং স্ক্রিপ্ট এক্সিকিউট হওয়ার আগেই সম্মতি ব্যানার প্রস্তুত থাকতে হবে, কিন্তু পেজটি নিজেই ইতিমধ্যে রেন্ডার এবং এজে ক্যাশ করা থাকতে পারে।

ঐতিহ্যবাহী CMP গুলি সার্ভার-রেন্ডার করা PHP বা সাধারণ HTML পেজের জন্য ডিজাইন করা হয়েছিল যেখানে ডকুমেন্ট উপর থেকে নিচে রৈখিকভাবে লোড হয়। কোড স্প্লিটিং, লেজি লোডিং এবং স্ট্রিমিং সার্ভার-সাইড রেন্ডারিং সহ একটি ফ্রেমওয়ার্ক জগতে, এই অনুমানগুলি ভেঙে পড়ে। এই পরিবেশে সম্মতি সঠিকভাবে পাওয়ার জন্য রেন্ডারিং পাইপলাইন বোঝা প্রয়োজন।

কেন টাইমিং আপনার ধারণার চেয়ে বেশি গুরুত্বপূর্ণ

একটি স্ট্যান্ডার্ড HTML পেজে, অন্যান্য স্ক্রিপ্টের আগে <head>-এ একটি CMP স্ক্রিপ্ট রাখা সহজ। Next.js App Router বা Gatsby-তে পরিস্থিতি আরও জটিল:

প্রি-রেন্ডার করা HTML প্রথমে আসে: ব্রাউজার CDN বা সার্ভার থেকে সম্পূর্ণ HTML পায়। যদি সেই HTML-এ কোনো ইনলাইন স্ক্রিপ্ট বা থার্ড-পার্টি ট্যাগ এম্বেড করা থাকে, তাহলে আপনার সম্মতি লজিক লোড হওয়ার আগেই সেগুলি এক্সিকিউট হতে পারে।
হাইড্রেশন গ্যাপ: React হাইড্রেশন HTML পেইন্ট হওয়ার পরে ঘটে। যদি আপনার সম্মতি কম্পোনেন্ট একটি React কম্পোনেন্ট হয়, হাইড্রেশন সম্পূর্ণ না হওয়া পর্যন্ত এটি কার্যকরী অবস্থায় থাকে না। এই গ্যাপের সময়, Google ট্যাগ বা অ্যানালিটিক্স স্ক্রিপ্ট সম্মতি ছাড়াই ফায়ার হতে পারে।
এজ ক্যাশিং জটিলতা: আপনি যদি ISR (ইনক্রিমেন্টাল স্ট্যাটিক রিজেনারেশন) বা এজ ফাংশন ব্যবহার করেন, HTML ক্যাশ করা হয়। ক্লায়েন্ট-সাইড মেকানিজম ছাড়া ক্যাশ করা HTML-এ সম্মতি-নির্ভর লজিক ডায়নামিকভাবে ইনজেক্ট করা সম্ভব নয়।

মূল নীতি হল: সম্মতি অবশ্যই স্ক্রিপ্ট লেভেলে প্রতিষ্ঠিত হতে হবে, কম্পোনেন্ট লেভেলে নয়। একটি React কম্পোনেন্ট যা সম্মতি ব্যানার রেন্ডার করে, যদি শুধুমাত্র হাইড্রেশনের পরে ইন্টারেক্টিভ হয় তাহলে অনেক দেরি হয়ে যায়।

Next.js App Router ইন্টিগ্রেশন

App Router সহ Next.js 13+ স্ক্রিপ্ট হ্যান্ডেল করার একটি নতুন উপায় চালু করেছে। সম্মতি ইন্টিগ্রেশনের জন্য এখানে প্রস্তাবিত পদ্ধতি:

ধাপ 1: রুট Layout-এ CMP স্ক্রিপ্ট লোড করুন

আপনার রুট layout.tsx-এ beforeInteractive স্ট্র্যাটেজি সহ Next.js Script কম্পোনেন্ট ব্যবহার করুন। এটি Next.js-কে হাইড্রেশন শুরু হওয়ার আগে প্রাথমিক HTML ডকুমেন্টে স্ক্রিপ্ট ইনজেক্ট করতে বলে:

beforeInteractive স্ট্র্যাটেজি অত্যন্ত গুরুত্বপূর্ণ। ডিফল্ট afterInteractive স্ট্র্যাটেজি হাইড্রেশনের পরে স্ক্রিপ্ট লোড করে, যা সম্মতির জন্য অনেক দেরি। beforeInteractive দিয়ে, CMP স্ক্রিপ্ট সার্ভার-রেন্ডার করা HTML-এ অন্তর্ভুক্ত হয় এবং পেজ লোড হওয়ার সাথে সাথে এক্সিকিউট হয়।

ধাপ 2: Google ট্যাগের আগে ডিফল্ট সম্মতি সেট করুন

আপনার Google Tag Manager বা gtag.js স্নিপেটের আগে, ডিফল্ট সম্মতি অবস্থা সেট করে এমন একটি ইনলাইন স্ক্রিপ্ট অন্তর্ভুক্ত করুন। এটি নিশ্চিত করে যে GTM CMP ব্যানার প্রদর্শিত হওয়ার আগে লোড হলেও, এটি প্রত্যাখ্যাত ডিফল্ট মান্য করে:

এই ইনলাইন স্ক্রিপ্টটি আপনার রুট layout-এর <head>-এ, CMP এবং GTM স্ক্রিপ্টের আগে রাখতে হবে। Next.js-এ, আপনি এই উদ্দেশ্যে আপনার layout-এর <head> এলিমেন্টের ভিতরে একটি সাধারণ <script> ট্যাগ ব্যবহার করতে পারেন।

ধাপ 3: রাউট পরিবর্তন হ্যান্ডেল করুন

সিঙ্গেল-পেজ অ্যাপ্লিকেশন নেভিগেশনে, CMP স্ক্রিপ্ট একবার লোড হয় কিন্তু রাউট পরিবর্তন একটি সম্পূর্ণ পেজ রিলোড ট্রিগার করে না। আপনার CMP অবশ্যই ক্লায়েন্ট-সাইড নেভিগেশন জুড়ে টিকে থাকতে হবে। FlexyConsent এটি স্বয়ংক্রিয়ভাবে পরিচালনা করে — একবার লোড হলে, পুনরায় ইনিশিয়ালাইজেশন ছাড়াই সমস্ত রাউট পরিবর্তনে সক্রিয় থাকে।

Next.js Pages Router ইন্টিগ্রেশন

যেসব প্রজেক্ট এখনও Pages Router ব্যবহার করছে, তাদের জন্য পদ্ধতি একই রকম তবে রুট layout-এর পরিবর্তে _document.tsx ব্যবহার করে। আপনার কাস্টম Document ক্লাসের <Head> কম্পোনেন্টে CMP স্ক্রিপ্ট রাখুন। beforeInteractive স্ট্র্যাটেজি Pages Router-এ একইভাবে কাজ করে।

মূল পার্থক্য হল _document.tsx শুধুমাত্র সার্ভারে রেন্ডার হয়, তাই এখানে যেকোনো সম্মতি লজিক প্রাথমিক HTML পেলোডে থাকার নিশ্চয়তা রয়েছে।

Gatsby স্ট্যাটিক সাইট ইন্টিগ্রেশন

Gatsby বিল্ড টাইমে সম্পূর্ণ স্ট্যাটিক HTML জেনারেট করে। রিকোয়েস্ট টাইমে কোনো সার্ভার-সাইড রেন্ডারিং নেই, যা কিছু দিক সরলীকৃত করে কিন্তু অন্যগুলি জটিল করে:

প্রতিটি পেজের <head>-এ CMP স্ক্রিপ্ট ইনজেক্ট করতে gatsby-ssr.tsx ব্যবহার করুন। onRenderBody API আপনাকে হেডে স্ক্রিপ্ট যোগ করতে দেয় যা প্রতিটি স্ট্যাটিক HTML ফাইলে উপস্থিত থাকবে।
সম্মতি লেজি-লোড করে এমন Gatsby প্লাগইন এড়িয়ে চলুন: কিছু কমিউনিটি প্লাগইন সম্মতিকে React কম্পোনেন্টে র‍্যাপ করে যা শুধুমাত্র হাইড্রেশনের পরে মাউন্ট হয়। এটি আগে আলোচিত টাইমিং গ্যাপ তৈরি করে।
সম্মতি ডিফল্ট ইনলাইনে রাখুন: ডিফল্ট সম্মতি অবস্থা সেট করে এমন একটি ইনলাইন স্ক্রিপ্ট যোগ করতে gatsby-ssr.tsx-এ setHeadComponents ব্যবহার করুন। এই স্ক্রিপ্টটি স্ট্যাটিক HTML-এ থাকবে এবং অবিলম্বে এক্সিকিউট হবে।

Gatsby-র বিল্ড-টাইম পদ্ধতি মানে আপনার CDN-এর প্রতিটি HTML ফাইলে সম্মতি স্ক্রিপ্ট অন্তর্ভুক্ত থাকবে। এটি আসলে আদর্শ — ব্যর্থ হতে পারে বা ভুলভাবে ক্যাশ হতে পারে এমন কোনো সার্ভার লজিক নেই।

Nuxt.js বিবেচনা

Nuxt.js (Vue-ভিত্তিক) এর নিজস্ব প্যাটার্ন আছে। Nuxt 3-এ, গ্লোবালি CMP স্ক্রিপ্ট যোগ করতে useHead composable বা nuxt.config.ts অ্যাপ হেড কনফিগারেশন ব্যবহার করুন। Nuxt body: false অপশন (যা স্ক্রিপ্ট হেডে রাখে) এবং নন-ব্লকিং লোডিংয়ের জন্য async অ্যাট্রিবিউট সাপোর্ট করে।

Nuxt-এর সার্ভার-সাইড রেন্ডারিং মোডের জন্য, একই নীতি প্রযোজ্য: CMP স্ক্রিপ্ট অবশ্যই প্রাথমিক HTML রেসপন্সে থাকতে হবে, মাউন্টের পরে Vue কম্পোনেন্ট দ্বারা ডায়নামিকভাবে ইনজেক্ট করা যাবে না।

লেআউট শিফট এড়ানো

সম্মতি ব্যানার Cumulative Layout Shift (CLS) ঘটানোর জন্য কুখ্যাত, যা একটি Core Web Vital যা SEO র‍্যাংকিংকে প্রভাবিত করে। পেজ রেন্ডার হওয়ার পরে যখন একটি ব্যানার দেখা যায়, এটি কন্টেন্টকে নিচে ঠেলে দেয় বা অপ্রত্যাশিতভাবে ওভারলে করে।

সম্মতি ব্যানার থেকে CLS কমানোর কৌশল:

নিচে অবস্থিত ব্যানার ব্যবহার করুন: ভিউপোর্টের নিচের ব্যানার পেজ কন্টেন্ট শিফট করে না। এটি CLS-এর জন্য সবচেয়ে উপযুক্ত পদ্ধতি।
জায়গা সংরক্ষণ করুন: আপনাকে যদি উপরের ব্যানার ব্যবহার করতেই হয়, আপনার CSS-এ উল্লম্ব জায়গা সংরক্ষণ করুন যাতে পেজ লেআউট রেন্ডার হওয়ার আগে ব্যানারের জন্য হিসাব করে।
লোডে মোডাল ওভারলে এড়িয়ে চলুন: পেজ রেন্ডার হওয়ার পরে প্রদর্শিত ফুল-স্ক্রিন সম্মতি ওয়াল অনুভূত লেআউট অস্থিরতা সৃষ্টি করে। আপনার যদি ওয়াল প্রয়োজন হয়, প্রাথমিক পেজ স্টেটের অংশ হিসেবে রেন্ডার করুন।
হেডে CMP সিঙ্ক্রোনাসভাবে লোড করুন: CMP যখন হেডে রেন্ডার-ব্লকিং স্ক্রিপ্ট হিসেবে লোড হয়, ব্যানার পরে পপ ইন করার পরিবর্তে প্রাথমিক পেইন্টের অংশ হিসেবে দেখা যেতে পারে।

FlexyConsent-এর ফ্রেমওয়ার্ক-অজ্ঞেয় পদ্ধতি

FlexyConsent যেকোনো ফ্রেমওয়ার্কের সাথে — বা কোনো ফ্রেমওয়ার্ক ছাড়াই — কাজ করার জন্য ডিজাইন করা হয়েছে, কম্পোনেন্ট লেভেলের পরিবর্তে স্ক্রিপ্ট লেভেলে কাজ করে। এটি কেন গুরুত্বপূর্ণ তা এখানে:

একটি async স্ক্রিপ্ট ট্যাগ: <head>-এ একটি <script> ট্যাগই যথেষ্ট। ইনস্টল করার জন্য কোনো npm প্যাকেজ নেই, ফ্রেমওয়ার্ক-নির্দিষ্ট র‍্যাপার নেই, বিল্ড কনফিগারেশন নেই।
সম্মতি ডিফল্ট অবিলম্বে ফায়ার হয়: স্ক্রিপ্ট যেকোনো কলব্যাক বা DOM ম্যানিপুলেশনের আগে তার প্রথম কাজ হিসেবে Consent Mode V2 ডিফল্ট সেট করে। এর মানে Google ট্যাগ প্রথম মিলিসেকেন্ড থেকেই সম্মতি মান্য করে।
DOM নির্ভরতা নেই: সম্মতি লজিক React, Vue বা Svelte হাইড্রেট হওয়ার জন্য অপেক্ষা করে না। এটি ফ্রেমওয়ার্ক লাইফসাইকেল থেকে স্বাধীনভাবে কাজ করে।
SSG, SSR, ISR এবং CSR-এর সাথে কাজ করে: এটি একটি সাধারণ স্ক্রিপ্ট হওয়ায়, পেজটি স্ট্যাটিকভাবে জেনারেট করা হোক, সার্ভার-রেন্ডার করা হোক, ইনক্রিমেন্টালি রিজেনারেট করা হোক বা ক্লায়েন্ট-সাইড রেন্ডার করা হোক, একইভাবে কাজ করে।

ডেভেলপার টিপ: সঠিক CMP ইন্টিগ্রেশনের সবচেয়ে সহজ পরীক্ষা হল আপনার ব্রাউজারের Network ট্যাব খোলা, Google ডোমেইন দিয়ে ফিল্টার করা এবং পেজ রিলোড করা। কনসোলে ডিফল্ট সম্মতি কমান্ড প্রদর্শিত হওয়ার আগে কোনো Google রিকোয়েস্ট ফায়ার হওয়া উচিত নয়। যদি হয়, আপনার CMP অনেক দেরিতে লোড হচ্ছে।

FlexyConsent-এর ফ্রি প্ল্যান আনলিমিটেড পেজভিউ সাপোর্ট করে এবং Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix এবং প্লেইন HTML-এর সাথে কাজ করে। ইন্টিগ্রেশন সব ক্ষেত্রে একই: একটি স্ক্রিপ্ট ট্যাগ, সঠিকভাবে স্থাপিত।