কোড কপি হয়ে গেছে!
v4.0 রিলিজড — ৬টি নতুন প্রোডাকশন ফিচার

প্রোডাকশন লেভেলের
অ্যাড ব্যানার উইজেট

Shadow DOM + fetch() দিয়ে তৈরি। iframe নেই, CSS কনফ্লিক্ট নেই, cutting নেই। মোবাইল থেকে ডেস্কটপ — সব ডিভাইসে পারফেক্ট।

index.html
<!-- শুধু ২ লাইন — ব্যস, কাজ শুরু! -->
<script>
  window.adsClickUrl = "https://your-link.com";
  window.adsRefreshInterval = 8;
</script>
<script src="https://adscdn.pages.dev/ads-widget.v4.0.js" defer></script>
0
অ্যাড ব্যানার
0
রেসপন্সিভ ব্রেকপয়েন্ট
0
v4.0 নতুন ফিচার
iframe overhead
v4.0 ফিচার

সবকিছু একটি ছোট 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 দিয়ে রিয়েল-টাইম থিম সুইচ।

কিভাবে কাজ করে

মাত্র ৩ ধাপে শুরু

কোনো বিল্ড টুল লাগবে না, কোনো ফ্রেমওয়ার্ক লাগবে না। শুধু ২ লাইন কোড বসান।

1

ফাইল আপলোড করুন

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
2

কোড বসান

আপনার ওয়েবসাইটের <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>
3

হয়ে গেছে!

অ্যাড ব্যানার অটো-রেন্ডার হবে, প্রতি ৮ সেকেন্ডে পরিবর্তন হবে, ডুপ্লিকেট আসবে না, থিম অটো ডিটেক্ট হবে। কোনো অতিরিক্ত সেটআপ লাগবে না। ব্যবহারকারী ক্লিক করলে আপনার লিংকে রিডাইরেক্ট হবে।

কোড উদাহরণ

কপি-পেস্ট রেডি কোড

বেসিক ব্যবহার

<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+

ডার্ক/লাইট

অটো ডিটেক্ট

ট্র্যাকিং ফ্লো

কিভাবে ট্র্যাকিং কাজ করে

ইম্প্রেশন ট্র্যাকিং

1

অ্যাড HTML fetch সফল হলে trackImpression কল হয়

2

sendBeacon() দিয়ে URL এ GET রিকোয়েস্ট যায়

3

শাডো ডমে 1x1 <img> পিক্সেল ও রেন্ডার হয়

?event=impression
 &ad=5
 &page=https://example.com
 &ts=1721354321
 &theme=dark
 &r=x8k2m

ক্লিক ট্র্যাকিং

1

ব্যবহারকারী ব্যানারে ক্লিক করে (বা Enter/Space)

2

trackClick কল হয়, sendBeacon রিকোয়েস্ট যায়

3

তারপর adsClickUrl এ রিডাইরেক্ট হয়

?event=click
 &ad=5
 &page=https://example.com
 &ts=1721354400
 &r=p3n9q

ট্র্যাকিং URL না সেট করলে এই ফিচার সম্পূর্ণ নিষ্ক্রিয় থাকে। বাকি সব ফিচার স্বাভাবিকভাবে কাজ করবে।

আজই শুরু করুন

মাত্র ২ লাইন কোডে প্রোডাকশন লেভেলের অ্যাড ব্যানার সিস্টেম। ফ্রি, ওপেন, রেসপন্সিভ।