প্রোডাকশন লেভেলের
অ্যাড ব্যানার উইজেট
Shadow DOM + fetch() দিয়ে তৈরি। iframe নেই, CSS কনফ্লিক্ট নেই, cutting নেই। মোবাইল থেকে ডেস্কটপ — সব ডিভাইসে পারফেক্ট।
<!-- শুধু ২ লাইন — ব্যস, কাজ শুরু! -->
<script>
window.adsClickUrl = "https://your-link.com";
window.adsRefreshInterval = 8;
</script>
<script src="https://adscdn.pages.dev/ads-widget.v4.0.js" defer></script>
সবকিছু একটি ছোট JS ফাইলে
iframe ছাড়াই, Shadow DOM দিয়ে পূর্ণ CSS আইসোলেশন। প্রোডাকশনের জন্য তৈরি।
ক্লিক ও ইম্প্রেশন ট্র্যাকিং
sendBeacon() দিয়ে analytics endpoint এ রিয়েল-টাইম ডাটা পাঠায়। পেজ আনলোডেও নির্ভরযোগ্য — Image fallback সহ।
অ্যাড রোটেশন / ক্যারোসেল
নির্দিষ্ট সেকেন্ড পর পর অটো-পরিবর্তন। Fade-out, fetch, fade-in স্মুথ ট্রানজিশন। Tab hidden হলে পজ করে।
সেশন ডুপ্লিকেট এড়ানো
sessionStorage এ ট্র্যাক করে একই সেশনে একই অ্যাড বারবার দেখায় না। নতুন ট্যাব = নতুন ক্রম।
ইম্প্রেশন ট্র্যাকিং পিক্সেল
অ্যাড লোড হলে Shadow DOM এর ভিতর 1x1 অদৃশ্য <img> রেন্ডার। সার্ভারে গুনলেই impression count পাওয়া যায়।
রিট্রাই লজিক
fetch ব্যর্থ হলে অটোমেটিক্যালি ভিন্ন অ্যাড দিয়ে আবার চেষ্টা। ডিফল্ট ৩ বার রিট্রাই, সব ব্যর্থ হলে silent fail।
ডার্ক/লাইট মোড ডিটেকশন
OS preference, class, data-attribute চেক। MutationObserver দিয়ে রিয়েল-টাইম থিম সুইচ।
মাত্র ৩ ধাপে শুরু
কোনো বিল্ড টুল লাগবে না, কোনো ফ্রেমওয়ার্ক লাগবে না। শুধু ২ লাইন কোড বসান।
ফাইল আপলোড করুন
ads-widget.v4.0.js ফাইলটি এবং ads/ ফোল্ডারটি আপনার Cloudflare Pages / GitHub Pages / যেকোনো স্ট্যাটিক হোস্টে আপলোড করুন। কোনো বিল্ড প্রসেস লাগবে না।
your-site.com/
├── ads-widget.v4.0.js
└── ads/
├── 1.html
├── 2.html
└── ... 11.html
কোড বসান
আপনার ওয়েবসাইটের <head> বা <body> এ নিচের কোডটি পেস্ট করুন। ব্যস!
<script>
window.adsClickUrl = "https://your-link.com";
window.adsRefreshInterval = 8;
window.adsTheme = "auto";
</script>
<script src="https://adscdn.pages.dev/ads-widget.v4.0.js" defer></script>
হয়ে গেছে!
অ্যাড ব্যানার অটো-রেন্ডার হবে, প্রতি ৮ সেকেন্ডে পরিবর্তন হবে, ডুপ্লিকেট আসবে না, থিম অটো ডিটেক্ট হবে। কোনো অতিরিক্ত সেটআপ লাগবে না। ব্যবহারকারী ক্লিক করলে আপনার লিংকে রিডাইরেক্ট হবে।
কপি-পেস্ট রেডি কোড
বেসিক ব্যবহার
<script>
window.adsClickUrl = "https://your-link.com";
</script>
<script src="https://adscdn.pages.dev/ads-widget.v4.0.js"
defer></script>
ফুল কনফিগারেশন
<script>
window.adsClickUrl = "https://your-link.com";
window.adsTrackClickUrl = "https://your-server/track";
window.adsTrackImpressionUrl =
"https://your-server/impression";
window.adsRefreshInterval = 8;
window.adsRetryCount = 3;
window.adsTheme = "auto";
</script>
<script src="https://adscdn.pages.dev/ads-widget.v4.0.js"
defer></script>
Blogger Widget
<!-- Blogger: Layout → Add a Gadget
→ HTML/JavaScript → Paste -->
<script>
window.adsClickUrl = "https://your-link.com";
window.adsRefreshInterval = 8;
</script>
<script src="https://adscdn.pages.dev/ads-widget.v4.0.js"
defer></script>
WordPress / Custom HTML
<!-- WordPress: Appearance → Widgets
→ Custom HTML → Paste -->
<script>
window.adsClickUrl = "https://your-link.com";
window.adsRefreshInterval = 8;
window.adsTheme = "auto";
</script>
<script src="https://adscdn.pages.dev/ads-widget.v4.0.js"
defer></script>
সব অপশন
| অপশন | ডিফল্ট |
|---|---|
adsClickUrl |
"/" |
adsBasePath |
অটো |
adsCount |
11 |
adsTrackClickUrl |
"" |
adsTrackImpressionUrl |
"" |
adsRefreshInterval |
0 |
adsRetryCount |
3 |
adsTheme |
"auto" |
= v4.0 নতুন অপশন
v3.0 vs v4.0
| বিষয় | v3.0 | v4.0 |
|---|---|---|
| ক্লিক/ইম্প্রেশন ট্র্যাকিং | ||
| ইম্প্রেশন পিক্সেল (1x1) | ||
| অ্যাড রোটেশন / ক্যারোসেল | ||
| সেশন ডুপ্লিকেট এড়ানো | ||
| রিট্রাই লজিক | ||
| ডার্ক/লাইট মোড | ||
| Shadow DOM + fetch | ||
| রেসপন্সিভ (5 breakpoint) | ||
| অ্যাক্সেসিবিলিটি | ||
| Silent error handling |
সব ডিভাইসে পারফেক্ট
CSS clamp() দিয়ে fluid sizing + ৫টি media query breakpoint। কোনো জাম্প নেই, সব স্মুথ।
ছোট ফোন
< 360px
ফোন
360 - 480px
ট্যাবলেট
481 - 768px
ডেস্কটপ
769 - 1199px
বড় ডেস্কটপ
1200px+
ডার্ক/লাইট
অটো ডিটেক্ট
কিভাবে ট্র্যাকিং কাজ করে
ইম্প্রেশন ট্র্যাকিং
অ্যাড HTML fetch সফল হলে trackImpression কল হয়
sendBeacon() দিয়ে URL এ GET রিকোয়েস্ট যায়
শাডো ডমে 1x1 <img> পিক্সেল ও রেন্ডার হয়
?event=impression
&ad=5
&page=https://example.com
&ts=1721354321
&theme=dark
&r=x8k2m
ক্লিক ট্র্যাকিং
ব্যবহারকারী ব্যানারে ক্লিক করে (বা Enter/Space)
trackClick কল হয়, sendBeacon রিকোয়েস্ট যায়
তারপর adsClickUrl এ রিডাইরেক্ট হয়
?event=click
&ad=5
&page=https://example.com
&ts=1721354400
&r=p3n9q
ট্র্যাকিং URL না সেট করলে এই ফিচার সম্পূর্ণ নিষ্ক্রিয় থাকে। বাকি সব ফিচার স্বাভাবিকভাবে কাজ করবে।