__tcfapi ইভেন্ট লিসেনার ব্যবহার: সম্মতি-সচেতন স্ক্রিপ্টের জন্য ডেভেলপার টিউটোরিয়াল
কেন আপনার স্ক্রিপ্টের শোনা উচিত, পোল করা নয়
সম্মতির ওপর নির্ভরশীল যেকোনো স্ক্রিপ্ট — বিজ্ঞাপন ট্যাগ, অ্যানালিটিক্স লোডার, হেডার বিডিং র্যাপার — দুটি বিষয় জানতে চায়: CMP-র কাছে এখনও কোনো সিদ্ধান্ত আছে কি না, এবং সেই সিদ্ধান্ত কী। একটি সাধারণ ভুল হলো পেজ লোডের সময় কুকি পড়া, অথবা কিছু না দেখা পর্যন্ত টাইমার দিয়ে CMP-কে পোল করতে থাকা। দুটি পদ্ধতিই অনুমেয়ভাবে ভেঙে যায়: কুকির ফরম্যাট CMP-র অভ্যন্তরীণ বিষয় এবং বদলে যেতে পারে, আর পোলিং হয় খুব আগে চলে যায়, নয়তো অপেক্ষায় সময় নষ্ট করে।
IAB TCF ঠিক এই কাজের জন্যই একটি স্ট্যান্ডার্ড JavaScript ইন্টারফেস নির্ধারণ করেছে: __tcfapi ফাংশন। এই টিউটোরিয়ালে ধাপে ধাপে দেখানো হয়েছে আপনার আসলে কোন কমান্ডগুলো দরকার, কোন ইভেন্ট পাবেন, এবং প্রোডাকশনে সবচেয়ে বেশি কোন বাগগুলো দেখা যায়।
স্টাব এবং কিউ
একটি TCF CMP-র কাছে প্রত্যাশা করা হয় যে সে পূর্ণ CMP স্ক্রিপ্ট লোড হওয়ার আগেই, যত দ্রুত সম্ভব, পেজে একটি ছোট স্টাব বসাবে। স্টাব window.__tcfapi সংজ্ঞায়িত করে এবং CMP প্রস্তুত হওয়ার আগে করা সব কল কিউতে রাখে। CMP লোড শেষ করলে সে কিউ প্রক্রিয়া করে এবং প্রতিটি কলের উত্তর দেয়।
এ কারণেই অন্য স্ক্রিপ্টের পক্ষে সঙ্গে সঙ্গে __tcfapi কল করা নিরাপদ: স্টাব যতক্ষণ তাদের আগে পেজে আছে, তাদের কল হারায় না। কোনো স্ক্রিপ্ট যদি __tcfapi সংজ্ঞায়িত নেই বলে ত্রুটি দেয়, তাহলে স্টাব হয় অনুপস্থিত, নয়তো খুব দেরিতে লোড হচ্ছে — রিট্রাই যোগ না করে লোডের ক্রম ঠিক করুন।
যে কমান্ডগুলো গুরুত্বপূর্ণ
ping
__tcfapi('ping', 2, callback) ব্যবহারকারীর সিদ্ধান্তের অপেক্ষা না করে মৌলিক অবস্থা ফেরত দেয়। উত্তরে থাকে cmpLoaded, stub, loading, loaded বা error-এর মতো একটি cmpStatus, এবং visible, hidden বা disabled মানের একটি displayStatus। জানা গেলে এটি gdprApplies-ও জানায়। ডায়াগনস্টিকসের জন্য এবং এই দর্শকের ক্ষেত্রে TCF আদৌ প্রাসঙ্গিক কি না তা ঠিক করতে এটি ব্যবহার করুন।
addEventListener
__tcfapi('addEventListener', 2, callback) হলো সেই কমান্ড যা বেশির ভাগ ইন্টিগ্রেশনের ব্যবহার করা উচিত। কলব্যাক একটি tcData অবজেক্ট ও একটি সাফল্য ফ্ল্যাগ পায়, এবং সম্মতির অবস্থা বদলালেই তা আবার কল হয়। TCF v2.2 থেকে সম্মতির ডেটা পাওয়ার জন্য এটাই সুপারিশকৃত পদ্ধতি; পুরোনো getTCData কমান্ড অবচিত করা হয়েছে।
removeEventListener
প্রতিটি tcData অবজেক্টে একটি listenerId থাকে। আপনার স্ক্রিপ্টের যখন আর আপডেট দরকার নেই — যেমন একবারের লোডার যে ইতিমধ্যে সিদ্ধান্ত নিয়ে ফেলেছে — তখন সেটি __tcfapi('removeEventListener', 2, callback, listenerId)-এ পাস করুন।
eventStatus পড়া
tcData-র মূল ফিল্ড হলো eventStatus। এর তিনটি মান আছে:
tcloaded— CMP একটি বৈধ সংরক্ষিত সিদ্ধান্ত পেয়েছে এবং কোনো ব্যানার দেখানো হবে না। আপনি সঙ্গে সঙ্গে ডেটার ভিত্তিতে কাজ করতে পারেন।cmpuishown— ব্যানার দেখানো হচ্ছে। ডেটা আগের কোনো অবস্থাকে প্রতিফলিত করে, কিন্তু ব্যবহারকারী সেটি বদলাতে চলেছেন।useractioncomplete— ব্যবহারকারী এইমাত্র একটি পছন্দ করেছেন বা নিশ্চিত করেছেন। নতুন ডেটার ভিত্তিতে কাজ করুন।
একটি সাধারণ লোডার tcloaded বা useractioncomplete-এর যেকোনো একটির জন্য অপেক্ষা করে, তারপর তার প্রয়োজনীয় উদ্দেশ্য ও ভেন্ডর যাচাই করে। ব্যানার দেখা গেছে সেটা লগ করা ছাড়া সে cmpuishown উপেক্ষা করে।
উদ্দেশ্য ও ভেন্ডর যাচাই
tcData-র ভেতরে সম্মতি ও বৈধ স্বার্থ ID দিয়ে কী-যুক্ত অবজেক্ট হিসেবে পাওয়া যায়:
tcData.purpose.consents[1]— উদ্দেশ্য ১ (ডিভাইস স্টোরেজ) এর সম্মতি।tcData.purpose.legitimateInterests[7]— উদ্দেশ্য ৭-এর বৈধ স্বার্থের অবস্থা।tcData.vendor.consents[ID]এবংtcData.vendor.legitimateInterests[ID]— ভেন্ডরের Global Vendor List ID ব্যবহার করে ভেন্ডরভিত্তিক অবস্থা।tcData.gdprApplies— CMP ঠিক করেছে কি না যে এই দর্শকের ক্ষেত্রে GDPR প্রযোজ্য। এটিfalseহলে আপনার স্ক্রিপ্টকে তার নন-TCF যুক্তি অনুসরণ করতে হবে।tcData.tcString— এনকোড করা স্ট্রিং, যা আপনি সেই পার্টনারদের কাছে পাঠান যারা এটি আশা করে।
উদ্দেশ্য ও ভেন্ডর দুটোই যাচাই করুন। ভেন্ডর-সম্মতি ছাড়া উদ্দেশ্য-সম্মতি, বা এর উল্টোটা, বেশির ভাগ ভেন্ডরের জন্য ডেটা প্রক্রিয়া করতে যথেষ্ট নয়।
iframe এবং ক্রস-ফ্রেম কল
বিজ্ঞাপন ও উইজেট প্রায়ই এমন iframe-এর ভেতরে চলে যেগুলো প্যারেন্ট পেজের __tcfapi দেখতে পায় না। TCF এটি সমাধান করে postMessage প্রোটোকল দিয়ে: CMP টপ পেজে __tcfapiLocator নামে একটি ফ্রেম যোগ করে, এবং iframe-এর ভেতরের কোড সেটি খুঁজে নিয়ে __tcfapiCall বার্তা পাঠাতে ও __tcfapiReturn উত্তর পেতে পারে। বেশির ভাগ বিজ্ঞাপন SDK ইতিমধ্যে এটি করে। আপনি নিজের iframe কোড লিখলে ফ্রেমের মধ্যে কুকি পড়ার বদলে একই প্যাটার্ন প্রয়োগ করুন।
সাধারণ বাগ এবং কীভাবে চিনবেন
cmpuishown-এর ভিত্তিতে কাজ করা। যেসব স্ক্রিপ্ট যেকোনো কলব্যাক চলামাত্র লোড হয়, সেগুলো ব্যবহারকারীর সিদ্ধান্তের আগেই চলে যাবে।eventStatusদিয়ে ফিল্টার করুন।- লিসেনার খুব তাড়াতাড়ি সরিয়ে ফেলা। প্রথম কলব্যাকের পরেই সরিয়ে দিলে আপনি পরবর্তী
useractioncompleteমিস করবেন এবং কখনও লোড হবে না। - প্রত্যাহার উপেক্ষা করা। স্থায়ী স্ক্রিপ্টের শুনতে থাকা উচিত এবং সম্মতি প্রত্যাহার হলে নিজেকে থামানো বা নতুন করে কনফিগার করা উচিত।
gdprAppliesউপেক্ষা করা। TCF অঞ্চলের বাইরে উদ্দেশ্য অবজেক্ট খালি থাকতে পারে; এটিকে “সম্মতি নেই” ধরলে আপনি যে রাজস্ব আয় করতে পারেন তা বন্ধ হয়ে যেতে পারে।- সাফল্য ফ্ল্যাগ না দেখা।
successfalse হলে তা লগ করুন; এটি সাধারণত ভাঙা CMP সেটআপের ইঙ্গিত।
আপনার ইন্টিগ্রেশন পরীক্ষা
ব্রাউজার কনসোলে CMP আছে কি না নিশ্চিত করতে __tcfapi('ping', 2, console.log) কল করুন, তারপর কলব্যাক হিসেবে console.log দিয়ে একটি লিসেনার নিবন্ধন করুন এবং ব্যানারে ক্লিক করে দেখুন। প্রথম ভিজিটে cmpuishown এবং তার পর useractioncomplete দেখা উচিত, আর রিলোডে tcloaded। সব গ্রহণ, সব প্রত্যাখ্যান ও কাস্টম নির্বাচন দিয়ে পুনরাবৃত্তি করুন এবং নিশ্চিত করুন প্রতিটি ক্ষেত্রে আপনার স্ক্রিপ্ট সঠিকভাবে আচরণ করছে।
মূল বিষয়গুলো
- CMP কুকি পড়া বা পোলিংয়ের বদলে
__tcfapiব্যবহার করুন। - API কল করে এমন যেকোনো স্ক্রিপ্টের আগে CMP স্টাব লোড হচ্ছে তা নিশ্চিত করুন।
addEventListenerব্যবহার করুন এবং শুধুtcloadedবাuseractioncomplete-এর ভিত্তিতে কাজ করুন।- উদ্দেশ্য ও ভেন্ডর দুটোর অবস্থাই যাচাই করুন এবং
gdprAppliesমানুন। - iframe-এর ভেতরে
__tcfapiLocatorpostMessage প্যাটার্ন ব্যবহার করুন।