sovads-sdk 1.0.2 → 1.0.4

package/dist/index.js

@@ -5,31 +5,58 @@ class SovAds {
         this.components = new Map();
         this.siteId = null;
         this.renderObservers = new Map();
-        this.debugLoggingEnabled = true;
+        this.debugLoggingEnabled = false;
+        this.adTrackingTokens = new Map();
         this.config = {
             apiUrl: typeof window !== 'undefined' && window.location.hostname === 'localhost'
                 ? 'http://localhost:3000'
                 : 'https://ads.sovseas.xyz',
             debug: false,
+            refreshInterval: 0, // No auto-refresh by default
+            lazyLoad: true,
+            rotationEnabled: true,
+            popupMinIntervalMinutes: 30,
+            popupSessionMax: 1,
             ...config
         };
+        this.debugLoggingEnabled = Boolean(this.config.debug);
         this.fingerprint = this.generateFingerprint();
         if (this.config.debug) {
             console.log('SovAds SDK initialized:', this.config);
         }
     }
     generateFingerprint() {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        ctx?.fillText('SovAds fingerprint', 10, 10);
-        const fingerprint = [
-            navigator.userAgent,
-            navigator.language,
-            screen.width + 'x' + screen.height,
-            new Date().getTimezoneOffset(),
-            canvas.toDataURL()
-        ].join('|');
-        return btoa(fingerprint).substring(0, 16);
+        const storageKey = 'sovads_fingerprint_v1';
+        try {
+            if (typeof window !== 'undefined' && window.localStorage) {
+                const existing = window.localStorage.getItem(storageKey);
+                if (existing) {
+                    return existing;
+                }
+            }
+        }
+        catch {
+            // Ignore storage access errors and fall back to generated value.
+        }
+        const browserParts = [
+            typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown-ua',
+            typeof navigator !== 'undefined' ? navigator.language : 'unknown-lang',
+            typeof screen !== 'undefined' ? `${screen.width}x${screen.height}` : 'unknown-screen',
+            String(new Date().getTimezoneOffset()),
+            typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+                ? crypto.randomUUID()
+                : `${Date.now()}-${Math.random()}`,
+        ];
+        const value = btoa(browserParts.join('|')).replace(/=+$/g, '');
+        try {
+            if (typeof window !== 'undefined' && window.localStorage) {
+                window.localStorage.setItem(storageKey, value);
+            }
+        }
+        catch {
+            // Ignore storage write failures.
+        }
+        return value;
     }
     async detectSiteId() {
         if (this.siteId) {
@@ -47,6 +74,7 @@ class SovAds {
             const domain = window.location.hostname;
             const payload = {
                 domain,
+                pathname: window.location.pathname,
                 fingerprint: this.fingerprint,
                 userAgent: navigator.userAgent,
                 pageUrl: window.location.href,
@@ -212,18 +240,39 @@ class SovAds {
             timestamp: Date.now()
         };
     }
+    /**
+     * Normalize URL - add protocol if missing for localhost
+     */
+    normalizeUrl(url) {
+        const trimmed = url.trim();
+        if (!trimmed.includes('://')) {
+            // Allow localhost URLs without protocol for debugging
+            if (trimmed.startsWith('localhost') || trimmed.startsWith('127.0.0.1')) {
+                return `http://${trimmed}`;
+            }
+            // Treat bare domains as https by default.
+            return `https://${trimmed}`;
+        }
+        return trimmed;
+    }
     /**
      * Validate URL format
      */
     isValidUrl(url) {
         try {
-            const parsed = new URL(url);
+            const normalized = this.normalizeUrl(url);
+            const parsed = new URL(normalized);
             return parsed.protocol === 'http:' || parsed.protocol === 'https:';
         }
         catch {
             return false;
         }
     }
+    inferMediaTypeFromUrl(url) {
+        const value = (url || '').toLowerCase();
+        const videoExts = ['.mp4', '.webm', '.ogg', '.ogv', '.mov', '.m3u8'];
+        return videoExts.some((ext) => value.includes(ext)) ? 'video' : 'image';
+    }
     /**
      * Fetch with retry logic
      */
@@ -250,13 +299,15 @@ class SovAds {
         }
         throw lastError || new Error('Fetch failed after retries');
     }
-    async loadAd(consumerId) {
+    async loadAd(options = {}) {
         const startTime = Date.now();
         try {
             const siteId = await this.detectSiteId();
             const params = new URLSearchParams({
                 siteId,
-                ...(consumerId && { consumerId })
+                ...(options.consumerId && { consumerId: options.consumerId }),
+                ...(options.placement && { placement: options.placement }),
+                ...(options.size && { size: options.size }),
             });
             const endpoint = `${this.config.apiUrl}/api/ads?${params}`;
             const response = await this.fetchWithRetry(endpoint);
@@ -271,7 +322,7 @@ class SovAds {
                 pageUrl: window.location.href,
                 userAgent: navigator.userAgent,
                 fingerprint: this.fingerprint,
-                requestBody: { siteId, consumerId },
+                requestBody: { siteId, ...options },
                 responseStatus: response.status,
                 duration,
             });
@@ -320,8 +371,15 @@ class SovAds {
             }
             const normalizedAd = {
                 ...rawAd,
-                mediaType: rawAd.mediaType === 'video' ? 'video' : 'image',
+                bannerUrl: this.normalizeUrl(rawAd.bannerUrl),
+                targetUrl: this.normalizeUrl(rawAd.targetUrl),
+                mediaType: rawAd.mediaType === 'video'
+                    ? 'video'
+                    : this.inferMediaTypeFromUrl(this.normalizeUrl(rawAd.bannerUrl)),
             };
+            if (normalizedAd.trackingToken) {
+                this.adTrackingTokens.set(normalizedAd.id, normalizedAd.trackingToken);
+            }
             if (this.config.debug) {
                 console.log('Ad loaded:', normalizedAd);
             }
@@ -355,6 +413,105 @@ class SovAds {
             return null;
         }
     }
+    toBase64(bytes) {
+        let binary = '';
+        for (const b of bytes) {
+            binary += String.fromCharCode(b);
+        }
+        return btoa(binary);
+    }
+    async signTrackingPayload(payload, timestamp) {
+        if (!this.config.apiSecret || typeof crypto === 'undefined' || !crypto.subtle) {
+            return null;
+        }
+        try {
+            const encoder = new TextEncoder();
+            const key = await crypto.subtle.importKey('raw', encoder.encode(this.config.apiSecret), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
+            const message = `${timestamp}:${payload}`;
+            const signature = await crypto.subtle.sign('HMAC', key, encoder.encode(message));
+            return this.toBase64(new Uint8Array(signature));
+        }
+        catch (error) {
+            if (this.config.debug) {
+                console.error('Failed to sign tracking payload:', error);
+            }
+            return null;
+        }
+    }
+    async sendTrackingEnvelope(eventPayload, useBeacon) {
+        if (eventPayload.trackingToken) {
+            const tokenBody = JSON.stringify({
+                trackingToken: eventPayload.trackingToken,
+                payload: eventPayload,
+            });
+            const tokenWebhookUrl = `${this.config.apiUrl}/api/webhook/track`;
+            try {
+                if (useBeacon && navigator.sendBeacon) {
+                    return navigator.sendBeacon(tokenWebhookUrl, new Blob([tokenBody], { type: 'application/json' }));
+                }
+                const response = await fetch(tokenWebhookUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: tokenBody,
+                    keepalive: true,
+                });
+                return response.ok;
+            }
+            catch {
+                return false;
+            }
+        }
+        if (!this.config.apiKey || !this.config.apiSecret) {
+            if (this.config.debug) {
+                const devWebhookUrl = `${this.config.apiUrl}/api/webhook/beacon`;
+                const body = JSON.stringify(eventPayload);
+                try {
+                    if (useBeacon && navigator.sendBeacon) {
+                        return navigator.sendBeacon(devWebhookUrl, new Blob([body], { type: 'application/json' }));
+                    }
+                    const response = await fetch(devWebhookUrl, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body,
+                        keepalive: true,
+                    });
+                    return response.ok;
+                }
+                catch {
+                    return false;
+                }
+            }
+            else {
+                console.warn('SovAds: Missing apiKey/apiSecret, skipping signed tracking event');
+            }
+            return false;
+        }
+        const timestamp = Date.now();
+        const payload = JSON.stringify(eventPayload);
+        const signature = await this.signTrackingPayload(payload, timestamp);
+        if (!signature) {
+            return false;
+        }
+        const envelope = JSON.stringify({
+            apiKey: this.config.apiKey,
+            siteId: eventPayload.siteId,
+            payload,
+            signature,
+            timestamp,
+        });
+        const webhookUrl = `${this.config.apiUrl}/api/webhook/track`;
+        if (useBeacon && navigator.sendBeacon) {
+            const blob = new Blob([envelope], { type: 'application/json' });
+            return navigator.sendBeacon(webhookUrl, blob);
+        }
+        const response = await fetch(webhookUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: envelope,
+            keepalive: true,
+        });
+        return response.ok;
+    }
     /**
      * Track event with retry logic (internal helper)
      */
@@ -374,24 +531,15 @@ class SovAds {
                 renderTime: renderInfo?.renderTime ?? Date.now(),
                 timestamp: metadata.timestamp,
                 pageUrl: metadata.pageUrl,
-                userAgent: metadata.userAgent
+                userAgent: metadata.userAgent,
+                trackingToken: this.adTrackingTokens.get(adId),
             };
-            const webhookUrl = `${this.config.apiUrl}/api/webhook/beacon`;
-            const response = await fetch(webhookUrl, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(payload),
-                keepalive: true // Similar behavior to beacon
-            });
-            if (response.ok) {
-                if (this.config.debug) {
-                    console.log(`SovAds: Tracked ${type} event via fetch (attempt ${attempt})`, payload);
-                }
+            const ok = await this.sendTrackingEnvelope(payload, false);
+            if (!ok) {
+                throw new Error('Tracking endpoint rejected event');
             }
-            else {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            if (this.config.debug) {
+                console.log(`SovAds: Tracked ${type} event via signed fetch (attempt ${attempt})`, payload);
             }
         }
         catch (error) {
@@ -431,35 +579,25 @@ class SovAds {
                 renderTime: renderInfo?.renderTime ?? Date.now(),
                 timestamp: metadata.timestamp,
                 pageUrl: metadata.pageUrl,
-                userAgent: metadata.userAgent
+                userAgent: metadata.userAgent,
+                trackingToken: this.adTrackingTokens.get(adId),
             };
-            // Use sendBeacon for reliable delivery (better for tracking impressions)
-            // Beacon API ensures events are sent even if user navigates away
-            if (navigator.sendBeacon) {
-                const blob = new Blob([JSON.stringify(payload)], {
-                    type: 'application/json'
-                });
-                // Send to dedicated webhook endpoint for beamer interactions
-                const webhookUrl = `${this.config.apiUrl}/api/webhook/beacon`;
-                const sent = navigator.sendBeacon(webhookUrl, blob);
-                if (!sent) {
-                    // Beacon failed, fallback to fetch with retry
+            if (typeof navigator.sendBeacon === 'function') {
+                const sent = await this.sendTrackingEnvelope(payload, true);
+                if (sent) {
                     if (this.config.debug) {
-                        console.warn(`SovAds: Beacon failed for ${type}, falling back to fetch`);
+                        console.log(`SovAds: Tracked ${type} event via signed beacon`, {
+                            payload: { ...payload, fingerprint: payload.fingerprint.substring(0, 8) + '...' }
+                        });
                     }
-                    await this.trackEventWithRetry(type, adId, campaignId, renderInfo, 1);
-                }
-                else if (this.config.debug) {
-                    console.log(`SovAds: Tracked ${type} event via beacon`, {
-                        sent,
-                        payload: { ...payload, fingerprint: payload.fingerprint.substring(0, 8) + '...' }
-                    });
+                    return;
                 }
             }
-            else {
-                // Fallback to fetch for older browsers
-                await this.trackEventWithRetry(type, adId, campaignId, renderInfo, 1);
+            // Fallback to signed fetch for older browsers and beacon failures
+            if (this.config.debug) {
+                console.warn(`SovAds: Beacon unavailable/failed for ${type}, falling back to signed fetch`);
             }
+            await this.trackEventWithRetry(type, adId, campaignId, renderInfo, 1);
         }
         catch (error) {
             if (this.config.debug) {
@@ -540,17 +678,22 @@ class SovAds {
 }
 // Banner Component
 export class Banner {
-    constructor(sovads, containerId) {
+    constructor(sovads, containerId, slotConfig = {}) {
         this.currentAd = null;
         this.renderStartTime = 0;
         this.hasTrackedImpression = false;
         this.isRendering = false;
+        this.refreshTimer = null;
+        this.lastAdId = null;
+        this.retryCount = 0;
+        this.maxRetries = 3;
         this.sovads = sovads;
         this.containerId = containerId;
+        this.slotConfig = slotConfig;
     }
-    async render(consumerId) {
+    async render(consumerId, forceRefresh = false) {
         // Prevent concurrent renders
-        if (this.isRendering) {
+        if (this.isRendering && !forceRefresh) {
             if (this.sovads.getConfig().debug) {
                 console.warn(`Banner render already in progress for ${this.containerId}`);
             }
@@ -564,8 +707,33 @@ export class Banner {
                 this.isRendering = false;
                 return;
             }
+            // Lazy loading: wait for container to be in viewport
+            if (this.sovads.getConfig().lazyLoad && !forceRefresh) {
+                const isInViewport = await this.checkViewport(container);
+                if (!isInViewport) {
+                    // Set up intersection observer for lazy loading
+                    this.setupLazyLoadObserver(container, consumerId);
+                    this.isRendering = false;
+                    return;
+                }
+            }
             this.renderStartTime = Date.now();
-            this.currentAd = await this.sovads.loadAd(consumerId);
+            this.currentAd = await this.sovads.loadAd({
+                consumerId,
+                placement: this.slotConfig.placementId || 'banner',
+                size: this.slotConfig.size,
+            });
+            this.hasTrackedImpression = false;
+            // Skip if same ad (rotation disabled or same ad returned)
+            if (!forceRefresh && this.lastAdId === this.currentAd?.id && this.sovads.getConfig().rotationEnabled) {
+                if (this.sovads.getConfig().debug) {
+                    console.log('Same ad returned, skipping render');
+                }
+                this.isRendering = false;
+                return;
+            }
+            this.lastAdId = this.currentAd?.id || null;
+            this.retryCount = 0; // Reset retry count on success
             if (!this.currentAd) {
                 container.innerHTML = '<div class="sovads-no-ad">No ads available</div>';
                 this.isRendering = false;
@@ -573,6 +741,7 @@ export class Banner {
             }
             // Handle dummy ads for unregistered sites
             if (this.currentAd.isDummy) {
+                container.innerHTML = '';
                 const dummyElement = document.createElement('div');
                 dummyElement.className = 'sovads-banner-dummy';
                 dummyElement.setAttribute('data-ad-id', this.currentAd.id);
@@ -603,7 +772,7 @@ export class Banner {
                 dummyElement.appendChild(img);
                 dummyElement.appendChild(message);
                 dummyElement.addEventListener('click', () => {
-                    window.open(this.currentAd.targetUrl, '_blank', 'noopener,noreferrer');
+                    window.open(this.sovads.normalizeUrl(this.currentAd.targetUrl), '_blank', 'noopener,noreferrer');
                 });
                 dummyElement.addEventListener('mouseenter', () => {
                     dummyElement.style.transform = 'scale(1.02)';
@@ -618,16 +787,21 @@ export class Banner {
                 return;
             }
             const adElement = document.createElement('div');
+            container.innerHTML = '';
             adElement.className = 'sovads-banner';
             adElement.setAttribute('data-ad-id', this.currentAd.id);
+            const mediaType = this.currentAd.mediaType === 'video' ? 'video' : 'image';
             adElement.style.cssText = `
       border: 1px solid #333;
       border-radius: 8px;
       overflow: hidden;
-      cursor: pointer;
+      cursor: ${mediaType === 'video' ? 'default' : 'pointer'};
       transition: transform 0.2s ease;
+      max-width: 100%;
+      width: 100%;
+      box-sizing: border-box;
+      opacity: 0;
     `;
-            const mediaType = this.currentAd.mediaType === 'video' ? 'video' : 'image';
             const handleVisibilityTracking = (renderInfo) => {
                 this.sovads.setupRenderObserver(adElement, this.currentAd.id, (isVisible) => {
                     renderInfo.viewportVisible = isVisible;
@@ -638,6 +812,7 @@ export class Banner {
                 });
             };
             const handleRenderSuccess = () => {
+                adElement.style.opacity = '1';
                 const renderTime = Date.now() - this.renderStartTime;
                 handleVisibilityTracking({
                     rendered: true,
@@ -646,6 +821,7 @@ export class Banner {
                 });
             };
             const handleRenderError = () => {
+                adElement.style.opacity = '1';
                 if (this.sovads.getConfig().debug) {
                     console.warn(`Failed to load ad media: ${this.currentAd.bannerUrl}`);
                 }
@@ -673,28 +849,50 @@ export class Banner {
                 const img = document.createElement('img');
                 img.src = this.currentAd.bannerUrl;
                 img.alt = this.currentAd.description;
-                img.style.cssText = 'width: 100%; height: auto; display: block;';
+                img.style.cssText = 'width: 100%; height: auto; display: block; max-width: 100%; object-fit: contain;';
                 img.addEventListener('load', handleRenderSuccess, { once: true });
                 img.addEventListener('error', handleRenderError, { once: true });
                 mediaElement = img;
             }
-            mediaElement.style.cursor = 'pointer';
-            // Add click handler
-            adElement.addEventListener('click', () => {
+            mediaElement.style.cursor = mediaType === 'video' ? 'default' : 'pointer';
+            mediaElement.style.maxWidth = '100%';
+            const handleClickThrough = () => {
                 this.sovads._trackEvent('CLICK', this.currentAd.id, this.currentAd.campaignId, {
                     rendered: true,
                     viewportVisible: true,
                     renderTime: Date.now() - this.renderStartTime
                 });
-                // Log interaction
                 this.sovads.logInteraction('CLICK', {
                     adId: this.currentAd.id,
                     campaignId: this.currentAd.campaignId,
                     elementType: 'BANNER',
                     metadata: { renderTime: Date.now() - this.renderStartTime },
                 });
-                window.open(this.currentAd.targetUrl, '_blank', 'noopener,noreferrer');
-            });
+                window.open(this.sovads.normalizeUrl(this.currentAd.targetUrl), '_blank', 'noopener,noreferrer');
+            };
+            if (mediaType === 'video') {
+                const ctaButton = document.createElement('button');
+                ctaButton.type = 'button';
+                ctaButton.textContent = 'Learn more';
+                ctaButton.style.cssText = `
+          width: 100%;
+          border: none;
+          border-top: 1px solid #333;
+          background: #111;
+          color: #fff;
+          font-size: 12px;
+          font-weight: 600;
+          padding: 8px 12px;
+          cursor: pointer;
+        `;
+                ctaButton.addEventListener('click', handleClickThrough);
+                adElement.appendChild(mediaElement);
+                adElement.appendChild(ctaButton);
+            }
+            else {
+                adElement.addEventListener('click', handleClickThrough);
+                adElement.appendChild(mediaElement);
+            }
             // Add hover effect
             adElement.addEventListener('mouseenter', () => {
                 adElement.style.transform = 'scale(1.02)';
@@ -702,13 +900,94 @@ export class Banner {
             adElement.addEventListener('mouseleave', () => {
                 adElement.style.transform = 'scale(1)';
             });
-            adElement.appendChild(mediaElement);
             container.appendChild(adElement);
+            // Set up auto-refresh if enabled
+            this.setupAutoRefresh(consumerId);
+        }
+        catch (error) {
+            // Retry logic on error
+            if (this.retryCount < this.maxRetries) {
+                this.retryCount++;
+                if (this.sovads.getConfig().debug) {
+                    console.warn(`Banner render failed, retrying (${this.retryCount}/${this.maxRetries})...`);
+                }
+                await new Promise(resolve => setTimeout(resolve, 1000 * this.retryCount)); // Exponential backoff
+                this.isRendering = false;
+                return this.render(consumerId, true);
+            }
+            else {
+                const container = document.getElementById(this.containerId);
+                if (container) {
+                    container.innerHTML = '<div class="sovads-error" style="padding: 10px; text-align: center; color: #666; font-size: 12px;">Ad temporarily unavailable</div>';
+                }
+                if (this.sovads.getConfig().debug) {
+                    console.error('Banner render failed after retries:', error);
+                }
+            }
         }
         finally {
             this.isRendering = false;
         }
     }
+    async checkViewport(element) {
+        return new Promise((resolve) => {
+            if (typeof IntersectionObserver === 'undefined') {
+                resolve(true); // Fallback: load immediately if IntersectionObserver not supported
+                return;
+            }
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        observer.disconnect();
+                        resolve(true);
+                    }
+                });
+            }, { rootMargin: '50px' } // Start loading 50px before entering viewport
+            );
+            observer.observe(element);
+            // Timeout after 5 seconds - load anyway
+            setTimeout(() => {
+                observer.disconnect();
+                resolve(true);
+            }, 5000);
+        });
+    }
+    setupLazyLoadObserver(container, consumerId) {
+        if (typeof IntersectionObserver === 'undefined') {
+            // Fallback: load immediately
+            this.render(consumerId);
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && !this.isRendering) {
+                    observer.disconnect();
+                    this.render(consumerId);
+                }
+            });
+        }, { rootMargin: '50px' });
+        observer.observe(container);
+    }
+    setupAutoRefresh(consumerId) {
+        // Clear existing timer
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer);
+        }
+        const refreshInterval = this.sovads.getConfig().refreshInterval || 0;
+        if (refreshInterval > 0) {
+            this.refreshTimer = window.setInterval(() => {
+                if (!this.isRendering) {
+                    this.render(consumerId, true);
+                }
+            }, refreshInterval * 1000);
+        }
+    }
+    destroy() {
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer);
+            this.refreshTimer = null;
+        }
+    }
 }
 // Popup Component
 export class Popup {
@@ -716,8 +995,40 @@ export class Popup {
         this.currentAd = null;
         this.popupElement = null;
         this.isShowing = false;
+        this.retryCount = 0;
+        this.maxRetries = 3;
+        this.storageKeyLastShown = 'sovads_popup_last_shown';
+        this.storageKeySessionCount = 'sovads_popup_session_count';
         this.sovads = sovads;
     }
+    canShowByFrequencyCap() {
+        try {
+            const minIntervalMs = (this.sovads.getConfig().popupMinIntervalMinutes || 30) * 60 * 1000;
+            const sessionMax = this.sovads.getConfig().popupSessionMax || 1;
+            const now = Date.now();
+            const lastShown = Number(localStorage.getItem(this.storageKeyLastShown) || 0);
+            const sessionCount = Number(sessionStorage.getItem(this.storageKeySessionCount) || 0);
+            if (sessionCount >= sessionMax)
+                return false;
+            if (lastShown > 0 && now - lastShown < minIntervalMs)
+                return false;
+            return true;
+        }
+        catch {
+            return true;
+        }
+    }
+    markShown() {
+        try {
+            const now = Date.now();
+            const currentSessionCount = Number(sessionStorage.getItem(this.storageKeySessionCount) || 0);
+            localStorage.setItem(this.storageKeyLastShown, String(now));
+            sessionStorage.setItem(this.storageKeySessionCount, String(currentSessionCount + 1));
+        }
+        catch {
+            // Ignore storage access issues.
+        }
+    }
     async show(consumerId, delay = 3000) {
         // Prevent concurrent shows
         if (this.isShowing) {
@@ -726,65 +1037,113 @@ export class Popup {
             }
             return;
         }
-        this.isShowing = true;
-        this.currentAd = await this.sovads.loadAd(consumerId);
-        if (!this.currentAd) {
-            console.log('No popup ad available');
-            this.isShowing = false;
+        if (!this.canShowByFrequencyCap()) {
+            if (this.sovads.getConfig().debug) {
+                console.log('Popup skipped due to frequency cap');
+            }
             return;
         }
-        // Show popup after delay
-        setTimeout(() => {
-            this.renderPopup();
+        this.isShowing = true;
+        try {
+            this.currentAd = await this.sovads.loadAd({
+                consumerId,
+                placement: 'popup',
+                size: window.innerWidth < 640 ? '320x100' : '360x120',
+            });
+            if (!this.currentAd) {
+                if (this.retryCount < this.maxRetries) {
+                    this.retryCount++;
+                    await new Promise(resolve => setTimeout(resolve, 1000 * this.retryCount));
+                    this.isShowing = false;
+                    return this.show(consumerId, delay);
+                }
+                if (this.sovads.getConfig().debug) {
+                    console.log('No popup ad available after retries');
+                }
+                this.isShowing = false;
+                this.retryCount = 0;
+                return;
+            }
+            this.retryCount = 0; // Reset on success
+            // Show popup after delay
+            setTimeout(() => {
+                this.renderPopup();
+                this.markShown();
+                this.isShowing = false;
+            }, delay);
+        }
+        catch (error) {
+            if (this.sovads.getConfig().debug) {
+                console.error('Error loading popup ad:', error);
+            }
             this.isShowing = false;
-        }, delay);
+            this.retryCount = 0;
+        }
     }
     renderPopup() {
         if (!this.currentAd)
             return;
         const renderStartTime = Date.now();
-        // Don't track impressions for dummy ads
-        if (!this.currentAd.isDummy) {
-            // Track impression immediately when popup is rendered (not waiting for image load)
-            // This ensures impression is tracked even if user closes popup quickly
+        let impressionTracked = false;
+        const trackPopupImpression = (rendered, renderTime) => {
+            if (impressionTracked || !this.currentAd || this.currentAd.isDummy)
+                return;
+            impressionTracked = true;
             this.sovads._trackEvent('IMPRESSION', this.currentAd.id, this.currentAd.campaignId, {
-                rendered: true,
+                rendered,
                 viewportVisible: true,
-                renderTime: 0 // Will be updated when image loads
+                renderTime,
             });
-            // Log interaction
             this.sovads.logInteraction('IMPRESSION', {
                 adId: this.currentAd.id,
                 campaignId: this.currentAd.campaignId,
                 elementType: 'POPUP',
-                metadata: { renderTime: 0 },
+                metadata: { renderTime, rendered },
             });
-        }
-        // Create overlay
-        const overlay = document.createElement('div');
-        overlay.className = 'sovads-popup-overlay';
-        overlay.style.cssText = `
+        };
+        // Create non-blocking sticky container
+        const wrapper = document.createElement('div');
+        wrapper.className = 'sovads-popup-overlay';
+        wrapper.style.cssText = `
       position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.5);
+      right: 16px;
+      bottom: 16px;
+      width: min(360px, calc(100vw - 24px));
       z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
     `;
         // Create popup
         this.popupElement = document.createElement('div');
         this.popupElement.style.cssText = `
       background: white;
       border-radius: 12px;
-      padding: 20px;
-      max-width: 400px;
+      padding: 14px;
+      max-width: 360px;
       position: relative;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    `;
+        // SovAds logo badge in small left corner
+        const logoBadge = document.createElement('div');
+        logoBadge.style.cssText = `
+      position: absolute;
+      top: 8px;
+      left: 12px;
+      width: 24px;
+      height: 24px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      font-weight: bold;
+      color: white;
+      z-index: 1;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     `;
+        logoBadge.textContent = 'SA';
+        logoBadge.title = 'SovAds';
         // Close button
         const closeBtn = document.createElement('button');
         closeBtn.innerHTML = '×';
@@ -797,10 +1156,24 @@ export class Popup {
       font-size: 24px;
       cursor: pointer;
       color: #666;
+      z-index: 2;
     `;
         closeBtn.addEventListener('click', () => {
             this.hide();
         });
+        // Add "Ad" message text below logo
+        const adLabel = document.createElement('div');
+        adLabel.style.cssText = `
+      position: absolute;
+      top: 36px;
+      left: 12px;
+      font-size: 9px;
+      color: #999;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    `;
+        adLabel.textContent = 'Ad';
         // Handle dummy ads
         if (this.currentAd.isDummy) {
             const dummyContent = document.createElement('div');
@@ -821,7 +1194,7 @@ export class Popup {
             message.textContent = 'Register your site to get ads';
             message.style.cssText = 'color: #333; font-size: 16px; font-weight: 500; margin-bottom: 16px;';
             const link = document.createElement('a');
-            link.href = this.currentAd.targetUrl;
+            link.href = this.sovads.normalizeUrl(this.currentAd.targetUrl);
             link.target = '_blank';
             link.rel = 'noopener noreferrer';
             link.textContent = 'Register Now';
@@ -829,10 +1202,12 @@ export class Popup {
             dummyContent.appendChild(img);
             dummyContent.appendChild(message);
             dummyContent.appendChild(link);
+            this.popupElement.appendChild(logoBadge);
+            this.popupElement.appendChild(adLabel);
             this.popupElement.appendChild(closeBtn);
             this.popupElement.appendChild(dummyContent);
-            overlay.appendChild(this.popupElement);
-            document.body.appendChild(overlay);
+            wrapper.appendChild(this.popupElement);
+            document.body.appendChild(wrapper);
             // Auto close after 10 seconds
             setTimeout(() => {
                 this.hide();
@@ -841,15 +1216,14 @@ export class Popup {
         }
         const mediaType = this.currentAd.mediaType === 'video' ? 'video' : 'image';
         const handleMediaError = () => {
+            if (this.popupElement) {
+                this.popupElement.style.opacity = '1';
+            }
             if (this.sovads.getConfig().debug) {
                 console.warn(`Failed to load popup ad media: ${this.currentAd.bannerUrl}`);
             }
             const renderTime = Date.now() - renderStartTime;
-            this.sovads._trackEvent('IMPRESSION', this.currentAd.id, this.currentAd.campaignId, {
-                rendered: false,
-                viewportVisible: true,
-                renderTime
-            });
+            trackPopupImpression(false, renderTime);
         };
         let mediaElement;
         if (mediaType === 'video') {
@@ -862,7 +1236,11 @@ export class Popup {
             video.controls = true;
             video.style.cssText = 'width: 100%; height: auto; border-radius: 8px; cursor: pointer;';
             video.addEventListener('loadeddata', () => {
+                if (this.popupElement) {
+                    this.popupElement.style.opacity = '1';
+                }
                 const renderTime = Date.now() - renderStartTime;
+                trackPopupImpression(true, renderTime);
                 if (this.sovads.getConfig().debug) {
                     console.log(`Popup ad video loaded in ${renderTime}ms`);
                 }
@@ -876,7 +1254,11 @@ export class Popup {
             img.alt = this.currentAd.description;
             img.style.cssText = 'width: 100%; height: auto; border-radius: 8px; cursor: pointer;';
             img.addEventListener('load', () => {
+                if (this.popupElement) {
+                    this.popupElement.style.opacity = '1';
+                }
                 const renderTime = Date.now() - renderStartTime;
+                trackPopupImpression(true, renderTime);
                 if (this.sovads.getConfig().debug) {
                     console.log(`Popup ad image loaded in ${renderTime}ms`);
                 }
@@ -884,27 +1266,53 @@ export class Popup {
             img.addEventListener('error', handleMediaError);
             mediaElement = img;
         }
-        mediaElement.style.cursor = 'pointer';
-        mediaElement.addEventListener('click', () => {
+        const handleClickThrough = () => {
             this.sovads._trackEvent('CLICK', this.currentAd.id, this.currentAd.campaignId, {
                 rendered: true,
                 viewportVisible: true,
                 renderTime: Date.now() - renderStartTime
             });
-            // Log interaction
             this.sovads.logInteraction('CLICK', {
                 adId: this.currentAd.id,
                 campaignId: this.currentAd.campaignId,
                 elementType: 'POPUP',
                 metadata: { renderTime: Date.now() - renderStartTime },
             });
-            window.open(this.currentAd.targetUrl, '_blank', 'noopener,noreferrer');
+            window.open(this.sovads.normalizeUrl(this.currentAd.targetUrl), '_blank', 'noopener,noreferrer');
             this.hide();
-        });
+        };
+        if (mediaType === 'video') {
+            mediaElement.style.cursor = 'default';
+        }
+        else {
+            mediaElement.style.cursor = 'pointer';
+            mediaElement.addEventListener('click', handleClickThrough);
+        }
+        this.popupElement.appendChild(logoBadge);
+        this.popupElement.appendChild(adLabel);
         this.popupElement.appendChild(closeBtn);
         this.popupElement.appendChild(mediaElement);
-        overlay.appendChild(this.popupElement);
-        document.body.appendChild(overlay);
+        if (mediaType === 'video') {
+            const ctaButton = document.createElement('button');
+            ctaButton.type = 'button';
+            ctaButton.textContent = 'Learn more';
+            ctaButton.style.cssText = `
+        width: 100%;
+        margin-top: 10px;
+        border: none;
+        border-radius: 6px;
+        background: #111;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 600;
+        padding: 10px 12px;
+        cursor: pointer;
+      `;
+            ctaButton.addEventListener('click', handleClickThrough);
+            this.popupElement.appendChild(ctaButton);
+        }
+        wrapper.appendChild(this.popupElement);
+        document.body.appendChild(wrapper);
         // Auto close after 10 seconds
         setTimeout(() => {
             this.hide();
@@ -913,23 +1321,43 @@ export class Popup {
     hide() {
         const overlay = document.querySelector('.sovads-popup-overlay');
         if (overlay) {
-            overlay.remove();
+            try {
+                // Check if element is still connected to DOM before removing
+                if (overlay.isConnected) {
+                    // Use remove() method which is safer and doesn't require parentNode
+                    overlay.remove();
+                }
+            }
+            catch (error) {
+                // Element may have already been removed by React or another process
+                // Silently fail - this is expected in some cases
+                if (this.sovads.getConfig().debug) {
+                    console.warn('Could not remove popup overlay:', error);
+                }
+            }
         }
+        this.popupElement = null;
+        this.currentAd = null;
     }
 }
 // Sidebar Component
 export class Sidebar {
-    constructor(sovads, containerId) {
+    constructor(sovads, containerId, slotConfig = {}) {
         this.currentAd = null;
         this.renderStartTime = 0;
         this.hasTrackedImpression = false;
         this.isRendering = false;
+        this.refreshTimer = null;
+        this.lastAdId = null;
+        this.retryCount = 0;
+        this.maxRetries = 3;
         this.sovads = sovads;
         this.containerId = containerId;
+        this.slotConfig = slotConfig;
     }
-    async render(consumerId) {
+    async render(consumerId, forceRefresh = false) {
         // Prevent concurrent renders
-        if (this.isRendering) {
+        if (this.isRendering && !forceRefresh) {
             if (this.sovads.getConfig().debug) {
                 console.warn(`Sidebar render already in progress for ${this.containerId}`);
             }
@@ -943,8 +1371,32 @@ export class Sidebar {
                 this.isRendering = false;
                 return;
             }
+            // Lazy loading: wait for container to be in viewport
+            if (this.sovads.getConfig().lazyLoad && !forceRefresh) {
+                const isInViewport = await this.checkViewport(container);
+                if (!isInViewport) {
+                    this.setupLazyLoadObserver(container, consumerId);
+                    this.isRendering = false;
+                    return;
+                }
+            }
             this.renderStartTime = Date.now();
-            this.currentAd = await this.sovads.loadAd(consumerId);
+            this.currentAd = await this.sovads.loadAd({
+                consumerId,
+                placement: this.slotConfig.placementId || 'sidebar',
+                size: this.slotConfig.size,
+            });
+            this.hasTrackedImpression = false;
+            // Skip if same ad (rotation disabled or same ad returned)
+            if (!forceRefresh && this.lastAdId === this.currentAd?.id && this.sovads.getConfig().rotationEnabled) {
+                if (this.sovads.getConfig().debug) {
+                    console.log('Same ad returned, skipping render');
+                }
+                this.isRendering = false;
+                return;
+            }
+            this.lastAdId = this.currentAd?.id || null;
+            this.retryCount = 0;
             if (!this.currentAd) {
                 container.innerHTML = '<div class="sovads-no-ad">No ads available</div>';
                 this.isRendering = false;
@@ -952,6 +1404,7 @@ export class Sidebar {
             }
             // Handle dummy ads for unregistered sites
             if (this.currentAd.isDummy) {
+                container.innerHTML = '';
                 const dummyElement = document.createElement('div');
                 dummyElement.className = 'sovads-sidebar-dummy';
                 dummyElement.setAttribute('data-ad-id', this.currentAd.id);
@@ -983,7 +1436,7 @@ export class Sidebar {
                 dummyElement.appendChild(img);
                 dummyElement.appendChild(message);
                 dummyElement.addEventListener('click', () => {
-                    window.open(this.currentAd.targetUrl, '_blank', 'noopener,noreferrer');
+                    window.open(this.sovads.normalizeUrl(this.currentAd.targetUrl), '_blank', 'noopener,noreferrer');
                 });
                 dummyElement.addEventListener('mouseenter', () => {
                     dummyElement.style.background = '#f0f0f0';
@@ -998,18 +1451,20 @@ export class Sidebar {
                 return;
             }
             const adElement = document.createElement('div');
+            container.innerHTML = '';
             adElement.className = 'sovads-sidebar';
             adElement.setAttribute('data-ad-id', this.currentAd.id);
+            const mediaType = this.currentAd.mediaType === 'video' ? 'video' : 'image';
             adElement.style.cssText = `
       background: #f8f9fa;
       border: 1px solid #e9ecef;
       border-radius: 8px;
       padding: 15px;
       margin-bottom: 15px;
-      cursor: pointer;
+      cursor: ${mediaType === 'video' ? 'default' : 'pointer'};
       transition: all 0.2s ease;
+      opacity: 0;
     `;
-            const mediaType = this.currentAd.mediaType === 'video' ? 'video' : 'image';
             const handleVisibilityTracking = (renderInfo) => {
                 this.sovads.setupRenderObserver(adElement, this.currentAd.id, (isVisible) => {
                     renderInfo.viewportVisible = isVisible;
@@ -1020,6 +1475,7 @@ export class Sidebar {
                 });
             };
             const handleRenderSuccess = () => {
+                adElement.style.opacity = '1';
                 const renderTime = Date.now() - this.renderStartTime;
                 handleVisibilityTracking({
                     rendered: true,
@@ -1028,6 +1484,7 @@ export class Sidebar {
                 });
             };
             const handleRenderError = () => {
+                adElement.style.opacity = '1';
                 if (this.sovads.getConfig().debug) {
                     console.warn(`Failed to load sidebar ad media: ${this.currentAd.bannerUrl}`);
                 }
@@ -1060,22 +1517,20 @@ export class Sidebar {
                 img.addEventListener('error', handleRenderError, { once: true });
                 mediaElement = img;
             }
-            // Add click handler
-            adElement.addEventListener('click', () => {
+            const handleClickThrough = () => {
                 this.sovads._trackEvent('CLICK', this.currentAd.id, this.currentAd.campaignId, {
                     rendered: true,
                     viewportVisible: true,
                     renderTime: Date.now() - this.renderStartTime
                 });
-                // Log interaction
                 this.sovads.logInteraction('CLICK', {
                     adId: this.currentAd.id,
                     campaignId: this.currentAd.campaignId,
                     elementType: 'SIDEBAR',
                     metadata: { renderTime: Date.now() - this.renderStartTime },
                 });
-                window.open(this.currentAd.targetUrl, '_blank', 'noopener,noreferrer');
-            });
+                window.open(this.sovads.normalizeUrl(this.currentAd.targetUrl), '_blank', 'noopener,noreferrer');
+            };
             // Add hover effect
             adElement.addEventListener('mouseenter', () => {
                 adElement.style.background = '#e9ecef';
@@ -1085,14 +1540,115 @@ export class Sidebar {
                 adElement.style.background = '#f8f9fa';
                 adElement.style.transform = 'translateY(0)';
             });
-            mediaElement.style.cursor = 'pointer';
-            adElement.appendChild(mediaElement);
+            mediaElement.style.cursor = mediaType === 'video' ? 'default' : 'pointer';
+            if (mediaType === 'video') {
+                const ctaButton = document.createElement('button');
+                ctaButton.type = 'button';
+                ctaButton.textContent = 'Learn more';
+                ctaButton.style.cssText = `
+          width: 100%;
+          border: none;
+          margin-top: 8px;
+          background: #111;
+          color: #fff;
+          font-size: 12px;
+          font-weight: 600;
+          padding: 8px 12px;
+          border-radius: 6px;
+          cursor: pointer;
+        `;
+                ctaButton.addEventListener('click', handleClickThrough);
+                adElement.appendChild(mediaElement);
+                adElement.appendChild(ctaButton);
+            }
+            else {
+                adElement.addEventListener('click', handleClickThrough);
+                adElement.appendChild(mediaElement);
+            }
             container.appendChild(adElement);
+            // Set up auto-refresh if enabled
+            this.setupAutoRefresh(consumerId);
+        }
+        catch (error) {
+            // Retry logic on error
+            if (this.retryCount < this.maxRetries) {
+                this.retryCount++;
+                if (this.sovads.getConfig().debug) {
+                    console.warn(`Sidebar render failed, retrying (${this.retryCount}/${this.maxRetries})...`);
+                }
+                await new Promise(resolve => setTimeout(resolve, 1000 * this.retryCount));
+                this.isRendering = false;
+                return this.render(consumerId, true);
+            }
+            else {
+                const container = document.getElementById(this.containerId);
+                if (container) {
+                    container.innerHTML = '<div class="sovads-error" style="padding: 10px; text-align: center; color: #666; font-size: 12px;">Ad temporarily unavailable</div>';
+                }
+                if (this.sovads.getConfig().debug) {
+                    console.error('Sidebar render failed after retries:', error);
+                }
+            }
         }
         finally {
             this.isRendering = false;
         }
     }
+    async checkViewport(element) {
+        return new Promise((resolve) => {
+            if (typeof IntersectionObserver === 'undefined') {
+                resolve(true);
+                return;
+            }
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        observer.disconnect();
+                        resolve(true);
+                    }
+                });
+            }, { rootMargin: '50px' });
+            observer.observe(element);
+            setTimeout(() => {
+                observer.disconnect();
+                resolve(true);
+            }, 5000);
+        });
+    }
+    setupLazyLoadObserver(container, consumerId) {
+        if (typeof IntersectionObserver === 'undefined') {
+            this.render(consumerId);
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && !this.isRendering) {
+                    observer.disconnect();
+                    this.render(consumerId);
+                }
+            });
+        }, { rootMargin: '50px' });
+        observer.observe(container);
+    }
+    setupAutoRefresh(consumerId) {
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer);
+        }
+        const refreshInterval = this.sovads.getConfig().refreshInterval || 0;
+        if (refreshInterval > 0) {
+            this.refreshTimer = window.setInterval(() => {
+                if (!this.isRendering) {
+                    this.render(consumerId, true);
+                }
+            }, refreshInterval * 1000);
+        }
+    }
+    destroy() {
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer);
+            this.refreshTimer = null;
+        }
+    }
 }
 // Export main SovAds class
 export { SovAds };