Live Preview — All Versions

v1.0 থেকে v4.0 পর্যন্ত
সম্পূর্ণ যাত্রা

iframe থেকে Shadow DOM — প্রতিটি ভার্সনের লাইভ প্রিভিউ দেখুন এবং বুঝুন কিভাবে একটি অ্যাড উইজেট প্রোডাকশন লেভেলে পৌঁছেছে।

v1.0 দেখুন v4.0 দেখুন
v1.0

Basic iframe

Jan 2025

 v2.0

Improved iframe

Mar 2025

 v3.0

Shadow DOM

May 2025

 v4.0

Production

Jul 2025
v1.0

Basic iframe

সবচেয়ে সাধারণ ভার্সন — একটি সাধারণ iframe দিয়ে র‍্যান্ডম অ্যাড HTML ফাইল লোড করে। কোনো responsive handling, error handling বা CSS isolation নেই।

~20 lines
র‍্যান্ডম অ্যাড লোড
Responsive না
iframe height cutting
Error handling নেই
CSS isolation নেই
Tracking নেই
Live Preview
v1.0
<script> window.adsClickUrl = "https://your-link.com"; </script> <script src="https://adscdn.pages.dev/ads-widget.v1.0.js"></script>
v2.0

Improved iframe

v1.0 থেকে উন্নতি — wrapper div, shadow, border-radius, lazy loading এবং basic fetch error check যোগ। তবে iframe-এর inherent height cutting সমস্যা থেকে যায়।

~40 lines
র‍্যান্ডম অ্যাড লোড
Wrapper div + shadow
Lazy loading
Basic error handling
ARIA attributes
iframe height সমস্যা আছে
Live Preview
v2.0
<script> window.adsClickUrl = "https://your-link.com"; </script> <script src="https://adscdn.pages.dev/ads-widget.v2.0.js" defer></script>
v3.0

Shadow DOM

Breaking Change

সম্পূর্ণ আর্কিটেকচার পরিবর্তন — iframe বাদ। Shadow DOM + fetch() দিয়ে CSS আইসোলেশন, অটো height, responsive design এবং silent fail error handling।

~90 lines
Shadow DOM (CSS isolation)
fetch() API
অটো height (কোনো cutting নেই)
Responsive ডিজাইন
Silent fail error handling
ARIA + Keyboard nav
Live Preview
v3.0
<script> window.adsClickUrl = "https://your-link.com"; </script> <script src="https://adscdn.pages.dev/ads-widget.v3.0.js" defer></script>
v4.0

Production Level

Latest

v3.0 এর উপর ভিত্তি করে ট্র্যাকিং, রোটেশন, সেশন ম্যানেজমেন্ট, রিট্রাই লজিক এবং ডার্ক/লাইট মোড ডিটেকশন যোগ — সম্পূর্ণ প্রোডাকশন লেভেল।

~500 lines

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

sendBeacon + Image fallback

অ্যাড রোটেশন / ক্যারোসেল

Fade transition, tab pause

সেশন ডুপ্লিকেট এড়ানো

sessionStorage based

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

1x1 img pixel

রিট্রাই লজিক

ভিন্ন index দিয়ে আবার চেষ্টা

ডার্ক/লাইট মোড ডিটেকশন

MutationObserver

Live Preview — Basic Config
v4.0 Basic
Live Preview — Full Config (Rotation: 5s)
v4.0 Full

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

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

Feature Comparison

চারটি ভার্সনের সব ফিচার একনজরে তুলনা করুন

Feature v1.0 v2.0 v3.0 v4.0
Architecture iframe iframe + wrap Shadow DOM Shadow DOM
HTML Loading iframe src iframe src fetch() fetch()
CSS Isolation
Responsive
Auto Height
Error Handling
Click Tracking
Impression Tracking
Ad Rotation
Session Duplicate Avoid
Retry Logic
Dark/Light Mode
ARIA / A11y

Quick Start

মাত্র ২ লাইনে আপনার সাইটে যোগ করুন

Basic
<script> window.adsClickUrl = "https://your-link.com"; </script> <script src="https://adscdn.pages.dev/ads-widget.v4.0.js" defer></script>
Full Config
<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>

আজই ব্যবহার শুরু করুন

মাত্র ২ লাইন কোড দিয়ে আপনার ওয়েবসাইটে প্রোডাকশন-লেভেল অ্যাড উইজেট যোগ করুন।

Live Site দেখুন
Code copied!