@adtogether/web-sdk 0.1.0 → 0.1.4

package/dist/react/index.mjs

@@ -1,6 +1,6 @@
 import {
   AdTogether
-} from "../chunk-IDJUJZAL.mjs";
+} from "../chunk-7IJIBJD4.mjs";
 
 // src/react/AdTogetherBanner.tsx
 import { useEffect, useRef, useState } from "react";
@@ -58,7 +58,7 @@ var AdTogetherBanner = ({
       (entries) => {
         if (entries[0].isIntersecting && entries[0].intersectionRatio >= 0.5 && !impressionTrackedRef.current) {
           impressionTrackedRef.current = true;
-          AdTogether.trackImpression(adData.id);
+          AdTogether.trackImpression(adData.id, adData.token);
           observer.disconnect();
         }
       },
@@ -71,7 +71,7 @@ var AdTogetherBanner = ({
   }, [adData, isLoading, hasError]);
   const handleContainerClick = () => {
     if (!adData) return;
-    AdTogether.trackClick(adData.id);
+    AdTogether.trackClick(adData.id, adData.token);
     if (adData.clickUrl) {
       window.open(adData.clickUrl, "_blank", "noopener,noreferrer");
     }
@@ -147,6 +147,290 @@ var AdTogetherBanner = ({
     }
   );
 };
+
+// src/react/AdTogetherInterstitial.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var AdTogetherInterstitial = ({
+  adUnitId,
+  isOpen,
+  onClose,
+  onAdLoaded,
+  onAdFailedToLoad,
+  theme = "auto",
+  closeDelay = 3
+}) => {
+  const [adData, setAdData] = useState2(null);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [hasError, setHasError] = useState2(false);
+  const [isDarkMode, setIsDarkMode] = useState2(theme === "dark");
+  const [canClose, setCanClose] = useState2(false);
+  const [countdown, setCountdown] = useState2(closeDelay);
+  const impressionTrackedRef = useRef2(false);
+  const closeTimerRef = useRef2(null);
+  const countdownRef = useRef2(null);
+  useEffect2(() => {
+    if (theme === "auto") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      setIsDarkMode(mediaQuery.matches);
+      const handler = (e) => setIsDarkMode(e.matches);
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    } else {
+      setIsDarkMode(theme === "dark");
+    }
+  }, [theme]);
+  useEffect2(() => {
+    if (!isOpen) {
+      setAdData(null);
+      setIsLoading(false);
+      setHasError(false);
+      setCanClose(false);
+      setCountdown(closeDelay);
+      impressionTrackedRef.current = false;
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+      if (countdownRef.current) clearInterval(countdownRef.current);
+      return;
+    }
+    let isMounted = true;
+    setIsLoading(true);
+    AdTogether.fetchAd(adUnitId, "interstitial").then((ad) => {
+      if (isMounted) {
+        setAdData(ad);
+        setIsLoading(false);
+        onAdLoaded?.();
+      }
+    }).catch((err) => {
+      if (isMounted) {
+        console.error("AdTogether Failed to load interstitial:", err);
+        setHasError(true);
+        setIsLoading(false);
+        onAdFailedToLoad?.(err);
+        onClose();
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [isOpen, adUnitId]);
+  useEffect2(() => {
+    if (!isOpen || !adData) return;
+    setCountdown(closeDelay);
+    countdownRef.current = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          if (countdownRef.current) clearInterval(countdownRef.current);
+          setCanClose(true);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => {
+      if (countdownRef.current) clearInterval(countdownRef.current);
+    };
+  }, [isOpen, adData, closeDelay]);
+  useEffect2(() => {
+    if (!adData || !isOpen || impressionTrackedRef.current) return;
+    impressionTrackedRef.current = true;
+    AdTogether.trackImpression(adData.id, adData.token);
+  }, [adData, isOpen]);
+  const handleAdClick = useCallback(() => {
+    if (!adData) return;
+    AdTogether.trackClick(adData.id, adData.token);
+    if (adData.clickUrl) {
+      window.open(adData.clickUrl, "_blank", "noopener,noreferrer");
+    }
+  }, [adData]);
+  const handleClose = useCallback(() => {
+    if (canClose) {
+      onClose();
+    }
+  }, [canClose, onClose]);
+  useEffect2(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const bgOverlay = "rgba(0, 0, 0, 0.7)";
+  const cardBg = isDarkMode ? "#1F2937" : "#ffffff";
+  const borderColor = isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+  const textColor = isDarkMode ? "#F9FAFB" : "#111827";
+  const descColor = isDarkMode ? "#9CA3AF" : "#6B7280";
+  const content = /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "adtogether-interstitial-overlay",
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        backgroundColor: bgOverlay,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e5,
+        backdropFilter: "blur(8px)",
+        animation: "adtogether-fade-in 0.3s ease-out"
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget && canClose) handleClose();
+      },
+      children: [
+        /* @__PURE__ */ jsx2("style", { children: `
+        @keyframes adtogether-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes adtogether-scale-in {
+          from { opacity: 0; transform: scale(0.9); }
+          to { opacity: 1; transform: scale(1); }
+        }
+      ` }),
+        isLoading ? /* @__PURE__ */ jsx2("div", { style: { color: "#fff", fontSize: "18px" }, children: "Loading Ad..." }) : adData ? /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              position: "relative",
+              maxWidth: "800px",
+              width: "95%",
+              backgroundColor: cardBg,
+              borderRadius: "24px",
+              border: `1px solid ${borderColor}`,
+              overflow: "hidden",
+              boxShadow: "0 25px 50px rgba(0, 0, 0, 0.5)",
+              animation: "adtogether-scale-in 0.3s ease-out"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("div", { style: { position: "absolute", top: "12px", right: "12px", zIndex: 10 }, children: canClose ? /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  onClick: handleClose,
+                  style: {
+                    width: "36px",
+                    height: "36px",
+                    borderRadius: "50%",
+                    backgroundColor: "rgba(0,0,0,0.6)",
+                    border: "none",
+                    color: "#fff",
+                    fontSize: "18px",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backdropFilter: "blur(4px)"
+                  },
+                  "aria-label": "Close ad",
+                  children: "\u2715"
+                }
+              ) : /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    width: "36px",
+                    height: "36px",
+                    borderRadius: "50%",
+                    backgroundColor: "rgba(0,0,0,0.6)",
+                    color: "#fff",
+                    fontSize: "14px",
+                    fontWeight: "bold",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backdropFilter: "blur(4px)"
+                  },
+                  children: countdown
+                }
+              ) }),
+              adData.imageUrl && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: { cursor: "pointer", position: "relative" },
+                  onClick: handleAdClick,
+                  children: /* @__PURE__ */ jsx2(
+                    "img",
+                    {
+                      src: adData.imageUrl,
+                      alt: adData.title,
+                      style: {
+                        width: "100%",
+                        aspectRatio: "16/9",
+                        objectFit: "cover",
+                        display: "block"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: { padding: "20px", cursor: "pointer" },
+                  onClick: handleAdClick,
+                  children: [
+                    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "8px" }, children: [
+                      /* @__PURE__ */ jsx2("span", { style: { fontWeight: "bold", fontSize: "18px", color: textColor }, children: adData.title }),
+                      /* @__PURE__ */ jsx2(
+                        "span",
+                        {
+                          style: {
+                            backgroundColor: "#FBBF24",
+                            color: "#000",
+                            fontSize: "10px",
+                            fontWeight: "bold",
+                            padding: "3px 6px",
+                            borderRadius: "4px",
+                            marginLeft: "8px",
+                            flexShrink: 0
+                          },
+                          children: "AD"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx2("p", { style: { fontSize: "14px", color: descColor, margin: 0, lineHeight: 1.5 }, children: adData.description }),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        style: {
+                          marginTop: "16px",
+                          width: "100%",
+                          padding: "12px",
+                          backgroundColor: "#F59E0B",
+                          color: "#000",
+                          fontWeight: "bold",
+                          fontSize: "14px",
+                          border: "none",
+                          borderRadius: "12px",
+                          cursor: "pointer"
+                        },
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleAdClick();
+                        },
+                        children: "Learn More \u2192"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+  return createPortal(content, document.body);
+};
 export {
-  AdTogetherBanner
+  AdTogetherBanner,
+  AdTogetherInterstitial
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@adtogether/web-sdk",
-  "version": "0.1.0",
-  "description": "The official AdTogether Web SDK for monetizing applications.",
+  "version": "0.1.4",
+  "description": "The official AdTogether Web SDK — reciprocal ad exchange to increase conversions and grow your audience.",
   "repository": {
     "type": "git",
-    "url": "https://github.com/AdTogether/AdTogether.git",
+    "url": "git+https://github.com/undecided2003/AdTogether.git",
     "directory": "sdk/web-sdk"
   },
   "publishConfig": {

package/src/core/AdTogether.ts

@@ -1,9 +1,10 @@
-import { AdModel, AdTogetherOptions } from './types';
+import { AdModel, AdType, AdTogetherOptions } from './types';
 
 export class AdTogether {
   private static instance: AdTogether;
   private appId?: string;
-  public baseUrl: string = 'https://adtogether.com';
+  private allowSelfAds: boolean = true;
+  public baseUrl: string = 'https://adtogether.relaxsoftwareapps.com';
 
   private constructor() {}
 
@@ -16,11 +17,20 @@ export class AdTogether {
 
   static initialize(options: AdTogetherOptions) {
     const sdk = AdTogether.shared;
-    sdk.appId = options.appId;
+    sdk.appId = options.apiKey || options.appId;
+    
+    if (options.allowSelfAds !== undefined) {
+      sdk.allowSelfAds = options.allowSelfAds;
+    }
+    
     if (options.baseUrl) {
       sdk.baseUrl = options.baseUrl;
+    } else if (typeof window !== 'undefined') {
+      // In browser, default to relative paths if no base URL provided
+      sdk.baseUrl = '';
     }
-    console.log(`AdTogether SDK Initialized with App ID: ${options.appId}`);
+    
+    console.log(`AdTogether SDK Initialized with App ID: ${sdk.appId}`);
   }
 
   assertInitialized() {
@@ -31,27 +41,51 @@ export class AdTogether {
     return true;
   }
 
-  static async fetchAd(adUnitId: string): Promise<AdModel> {
+  private lastAdId?: string;
+
+  static async fetchAd(adUnitId: string, adType?: AdType): Promise<AdModel> {
     if (!AdTogether.shared.assertInitialized()) {
       throw new Error('AdTogether not initialized');
     }
 
-    const response = await fetch(`${AdTogether.shared.baseUrl}/api/ads/serve?country=global&adUnitId=${adUnitId}`);
-    if (!response.ok) {
+    try {
+      const sdk = AdTogether.shared;
+      let url = `${sdk.baseUrl}/api/ads/serve?country=global&adUnitId=${adUnitId}&apiKey=${sdk.appId}`;
+      if (adType) {
+        url += `&adType=${adType}`;
+      }
+      if (sdk.lastAdId) {
+        url += `&exclude=${sdk.lastAdId}`;
+      }
+      
+      // Pass allowSelfAds and source URL for smart serving
+      url += `&allowSelfAds=${sdk.allowSelfAds}`;
+      if (typeof window !== 'undefined') {
+        url += `&sourceUrl=${encodeURIComponent(window.location.href)}`;
+      }
+
+      const response = await fetch(url);
+      if (response.ok) {
+        const ad = await response.json();
+        sdk.lastAdId = ad.id;
+        return ad;
+      }
+
       throw new Error(`Failed to fetch ad. Status: ${response.status}`);
+    } catch (err) {
+      throw err;
     }
-    return response.json();
   }
 
-  static trackImpression(adId: string) {
-    this.trackEvent('/api/ads/impression', adId);
+  static trackImpression(adId: string, token?: string) {
+    this.trackEvent('/api/ads/impression', adId, token);
   }
 
-  static trackClick(adId: string) {
-    this.trackEvent('/api/ads/click', adId);
+  static trackClick(adId: string, token?: string) {
+    this.trackEvent('/api/ads/click', adId, token);
   }
 
-  private static trackEvent(endpoint: string, adId: string) {
+  private static trackEvent(endpoint: string, adId: string, token?: string) {
     if (!AdTogether.shared.assertInitialized()) return;
     
     fetch(`${AdTogether.shared.baseUrl}${endpoint}`, {
@@ -59,7 +93,11 @@ export class AdTogether {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ adId }),
+      body: JSON.stringify({ 
+        adId, 
+        token, 
+        apiKey: AdTogether.shared.appId 
+      }),
     }).catch(console.error);
   }
 }

package/src/core/types.ts

@@ -1,12 +1,19 @@
+export type AdType = 'banner' | 'interstitial';
+
 export interface AdModel {
   id: string;
   title: string;
   description: string;
   clickUrl?: string;
   imageUrl?: string;
+  token?: string;
+  adType?: AdType;
 }
 
 export interface AdTogetherOptions {
-  appId: string;
+  appId?: string;
+  apiKey?: string;
   baseUrl?: string;
+  /** Whether to show your own ads as fallback if no external ads are available. Defaults to true. */
+  allowSelfAds?: boolean;
 }

package/src/react/AdTogetherBanner.tsx

@@ -82,7 +82,7 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
       (entries) => {
         if (entries[0].isIntersecting && entries[0].intersectionRatio >= 0.5 && !impressionTrackedRef.current) {
           impressionTrackedRef.current = true;
-          AdTogether.trackImpression(adData.id);
+          AdTogether.trackImpression(adData.id, adData.token);
           observer.disconnect();
         }
       },
@@ -98,7 +98,7 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
 
   const handleContainerClick = () => {
     if (!adData) return;
-    AdTogether.trackClick(adData.id);
+    AdTogether.trackClick(adData.id, adData.token);
     if (adData.clickUrl) {
       window.open(adData.clickUrl, '_blank', 'noopener,noreferrer');
     }