@adtogether/web-sdk 0.1.13 → 0.1.20

package/dist/react/index.js

@@ -43,6 +43,11 @@ var AdTogether = class _AdTogether {
   static initialize(options) {
     const sdk = _AdTogether.shared;
     sdk.appId = options.apiKey || options.appId;
+    if (options.bundleId) {
+      sdk.bundleId = options.bundleId;
+    } else if (typeof window !== "undefined") {
+      sdk.bundleId = window.location.hostname;
+    }
     if (options.allowSelfAds !== void 0) {
       sdk.allowSelfAds = options.allowSelfAds;
     }
@@ -73,6 +78,9 @@ var AdTogether = class _AdTogether {
       if (sdk.lastAdId) {
         url += `&exclude=${sdk.lastAdId}`;
       }
+      if (sdk.bundleId) {
+        url += `&bundleId=${sdk.bundleId}`;
+      }
       url += `&allowSelfAds=${sdk.allowSelfAds}`;
       if (typeof window !== "undefined") {
         url += `&sourceUrl=${encodeURIComponent(window.location.href)}`;
@@ -104,7 +112,11 @@ var AdTogether = class _AdTogether {
       body: JSON.stringify({
         adId,
         token,
-        apiKey: _AdTogether.shared.appId
+        apiKey: _AdTogether.shared.appId,
+        ..._AdTogether.shared.bundleId ? { bundleId: _AdTogether.shared.bundleId } : {},
+        // Send platform and environment to match Flutter SDK
+        platform: "web",
+        environment: typeof process !== "undefined" && process.env?.NODE_ENV === "development" ? "development" : "production"
       })
     }).catch(console.error);
   }
@@ -118,6 +130,8 @@ var AdTogetherBanner = ({
   style = {},
   onAdLoaded,
   onAdFailedToLoad,
+  showCloseButton = false,
+  onAdClosed,
   width = "100%",
   height = "auto",
   theme = "auto"
@@ -125,6 +139,7 @@ var AdTogetherBanner = ({
   const [adData, setAdData] = (0, import_react.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const [hasError, setHasError] = (0, import_react.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react.useState)(true);
   const [isDarkMode, setIsDarkMode] = (0, import_react.useState)(theme === "dark");
   const containerRef = (0, import_react.useRef)(null);
   const impressionTrackedRef = (0, import_react.useRef)(false);
@@ -141,7 +156,7 @@ var AdTogetherBanner = ({
   }, [theme]);
   (0, import_react.useEffect)(() => {
     let isMounted = true;
-    AdTogether.fetchAd(adUnitId).then((ad) => {
+    AdTogether.fetchAd(adUnitId, "banner").then((ad) => {
       if (isMounted) {
         setAdData(ad);
         setIsLoading(false);
@@ -183,6 +198,14 @@ var AdTogetherBanner = ({
       window.open(adData.clickUrl, "_blank", "noopener,noreferrer");
     }
   };
+  const handleClose = (e) => {
+    e.stopPropagation();
+    setIsVisible(false);
+    onAdClosed?.();
+  };
+  if (!isVisible) {
+    return null;
+  }
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
@@ -217,6 +240,7 @@ var AdTogetherBanner = ({
         overflow: "hidden",
         cursor: "pointer",
         boxSizing: "border-box",
+        position: "relative",
         ...style
       },
       onMouseOver: (e) => {
@@ -249,7 +273,35 @@ var AdTogetherBanner = ({
             }, children: "AD" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", color: descColor, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }, children: adData.description })
-        ] })
+        ] }),
+        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            onClick: handleClose,
+            "aria-label": "Close ad",
+            style: {
+              position: "absolute",
+              top: "8px",
+              right: "8px",
+              width: "24px",
+              height: "24px",
+              borderRadius: "50%",
+              backgroundColor: "rgba(0, 0, 0, 0.4)",
+              border: "none",
+              color: "#fff",
+              fontSize: "14px",
+              fontWeight: "bold",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 0,
+              lineHeight: 1,
+              zIndex: 1
+            },
+            children: "\xD7"
+          }
+        )
       ]
     }
   );
@@ -490,7 +542,7 @@ var AdTogetherInterstitial = ({
                 "div",
                 {
                   className: "adtogether-interstitial-img-wrapper",
-                  style: { cursor: "pointer", position: "relative" },
+                  style: { cursor: "pointer", position: "relative", backgroundColor: isDarkMode ? "#111827" : "#F3F4F6" },
                   onClick: handleAdClick,
                   children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "img",
@@ -499,8 +551,8 @@ var AdTogetherInterstitial = ({
                       alt: adData.title,
                       style: {
                         width: "100%",
-                        aspectRatio: "16/9",
-                        objectFit: "cover",
+                        maxHeight: "350px",
+                        objectFit: "contain",
                         display: "block"
                       }
                     }
@@ -555,6 +607,20 @@ var AdTogetherInterstitial = ({
                         },
                         children: "Learn More \u2192"
                       }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "p",
+                      {
+                        style: {
+                          marginTop: "12px",
+                          marginBottom: 0,
+                          fontSize: "10px",
+                          color: isDarkMode ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.3)",
+                          textAlign: "center",
+                          letterSpacing: "0.3px"
+                        },
+                        children: "Powered by AdTogether"
+                      }
                     )
                   ]
                 }

package/dist/react/index.mjs

@@ -1,6 +1,6 @@
 import {
   AdTogether
-} from "../chunk-7IJIBJD4.mjs";
+} from "../chunk-RW43ES42.mjs";
 
 // src/react/AdTogetherBanner.tsx
 import { useEffect, useRef, useState } from "react";
@@ -11,6 +11,8 @@ var AdTogetherBanner = ({
   style = {},
   onAdLoaded,
   onAdFailedToLoad,
+  showCloseButton = false,
+  onAdClosed,
   width = "100%",
   height = "auto",
   theme = "auto"
@@ -18,6 +20,7 @@ var AdTogetherBanner = ({
   const [adData, setAdData] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
   const [isDarkMode, setIsDarkMode] = useState(theme === "dark");
   const containerRef = useRef(null);
   const impressionTrackedRef = useRef(false);
@@ -34,7 +37,7 @@ var AdTogetherBanner = ({
   }, [theme]);
   useEffect(() => {
     let isMounted = true;
-    AdTogether.fetchAd(adUnitId).then((ad) => {
+    AdTogether.fetchAd(adUnitId, "banner").then((ad) => {
       if (isMounted) {
         setAdData(ad);
         setIsLoading(false);
@@ -76,6 +79,14 @@ var AdTogetherBanner = ({
       window.open(adData.clickUrl, "_blank", "noopener,noreferrer");
     }
   };
+  const handleClose = (e) => {
+    e.stopPropagation();
+    setIsVisible(false);
+    onAdClosed?.();
+  };
+  if (!isVisible) {
+    return null;
+  }
   if (isLoading) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -110,6 +121,7 @@ var AdTogetherBanner = ({
         overflow: "hidden",
         cursor: "pointer",
         boxSizing: "border-box",
+        position: "relative",
         ...style
       },
       onMouseOver: (e) => {
@@ -142,7 +154,35 @@ var AdTogetherBanner = ({
             }, children: "AD" })
           ] }),
           /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: descColor, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }, children: adData.description })
-        ] })
+        ] }),
+        showCloseButton && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleClose,
+            "aria-label": "Close ad",
+            style: {
+              position: "absolute",
+              top: "8px",
+              right: "8px",
+              width: "24px",
+              height: "24px",
+              borderRadius: "50%",
+              backgroundColor: "rgba(0, 0, 0, 0.4)",
+              border: "none",
+              color: "#fff",
+              fontSize: "14px",
+              fontWeight: "bold",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 0,
+              lineHeight: 1,
+              zIndex: 1
+            },
+            children: "\xD7"
+          }
+        )
       ]
     }
   );
@@ -383,7 +423,7 @@ var AdTogetherInterstitial = ({
                 "div",
                 {
                   className: "adtogether-interstitial-img-wrapper",
-                  style: { cursor: "pointer", position: "relative" },
+                  style: { cursor: "pointer", position: "relative", backgroundColor: isDarkMode ? "#111827" : "#F3F4F6" },
                   onClick: handleAdClick,
                   children: /* @__PURE__ */ jsx2(
                     "img",
@@ -392,8 +432,8 @@ var AdTogetherInterstitial = ({
                       alt: adData.title,
                       style: {
                         width: "100%",
-                        aspectRatio: "16/9",
-                        objectFit: "cover",
+                        maxHeight: "350px",
+                        objectFit: "contain",
                         display: "block"
                       }
                     }
@@ -448,6 +488,20 @@ var AdTogetherInterstitial = ({
                         },
                         children: "Learn More \u2192"
                       }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "p",
+                      {
+                        style: {
+                          marginTop: "12px",
+                          marginBottom: 0,
+                          fontSize: "10px",
+                          color: isDarkMode ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.3)",
+                          textAlign: "center",
+                          letterSpacing: "0.3px"
+                        },
+                        children: "Powered by AdTogether"
+                      }
                     )
                   ]
                 }

package/errors.txt

@@ -1,2 +1,2 @@
-tsconfig.json(15,25): error TS5107: Option 'moduleResolution=node10' is deprecated and will stop functioning in TypeScript 7.0. Specify compilerOption '"ignoreDeprecations": "6.0"' to silence this error.
-  Visit https://aka.ms/ts6 for migration information.
+tsconfig.json(15,25): error TS5107: Option 'moduleResolution=node10' is deprecated and will stop functioning in TypeScript 7.0. Specify compilerOption '"ignoreDeprecations": "6.0"' to silence this error.
+  Visit https://aka.ms/ts6 for migration information.

package/package.json

@@ -1,58 +1,59 @@
-{
-  "name": "@adtogether/web-sdk",
-  "version": "0.1.13",
-  "description": "The official AdTogether Web SDK — reciprocal ad exchange to increase conversions and grow your audience.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/undecided2003/AdTogether.git",
-    "directory": "sdk/web-sdk"
-  },
-  "homepage": "https://adtogether.relaxsoftwareapps.com",
-  "bugs": {
-    "url": "https://github.com/undecided2003/AdTogether/issues"
-  },
-  "keywords": [
-    "ads",
-    "ad-exchange",
-    "monetization",
-    "advertising",
-    "react",
-    "reciprocal",
-    "conversions"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
-    },
-    "./react": {
-      "types": "./dist/react/index.d.ts",
-      "require": "./dist/react/index.js",
-      "import": "./dist/react/index.mjs"
-    }
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
-  },
-  "author": "AdTogether Team",
-  "license": "MIT",
-  "type": "commonjs",
-  "peerDependencies": {
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "tsup": "^8.5.1",
-    "typescript": "^5.3.3"
-  }
-}
+{
+  "name": "@adtogether/web-sdk",
+  "version": "0.1.20",
+  "description": "The official AdTogether Web SDK — reciprocal ad exchange to increase conversions and grow your audience.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/undecided2003/AdTogether.git",
+    "directory": "sdk/web-sdk"
+  },
+  "homepage": "https://adtogether.relaxsoftwareapps.com",
+  "bugs": {
+    "url": "https://github.com/undecided2003/AdTogether/issues"
+  },
+  "keywords": [
+    "ads",
+    "ad-exchange",
+    "monetization",
+    "advertising",
+    "react",
+    "reciprocal",
+    "conversions"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "require": "./dist/react/index.js",
+      "import": "./dist/react/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "author": "AdTogether Team",
+  "license": "MIT",
+  "type": "commonjs",
+  "peerDependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.3.3"
+  }
+}

package/src/core/AdTogether.ts

@@ -3,6 +3,7 @@ import { AdModel, AdType, AdTogetherOptions } from './types';
 export class AdTogether {
   private static instance: AdTogether;
   private appId?: string;
+  private bundleId?: string;
   private allowSelfAds: boolean = true;
   public baseUrl: string = 'https://adtogether.relaxsoftwareapps.com';
 
@@ -19,6 +20,12 @@ export class AdTogether {
     const sdk = AdTogether.shared;
     sdk.appId = options.apiKey || options.appId;
     
+    if (options.bundleId) {
+      sdk.bundleId = options.bundleId;
+    } else if (typeof window !== 'undefined') {
+      sdk.bundleId = window.location.hostname;
+    }
+
     if (options.allowSelfAds !== undefined) {
       sdk.allowSelfAds = options.allowSelfAds;
     }
@@ -57,6 +64,9 @@ export class AdTogether {
       if (sdk.lastAdId) {
         url += `&exclude=${sdk.lastAdId}`;
       }
+      if (sdk.bundleId) {
+        url += `&bundleId=${sdk.bundleId}`;
+      }
       
       // Pass allowSelfAds and source URL for smart serving
       url += `&allowSelfAds=${sdk.allowSelfAds}`;
@@ -96,7 +106,11 @@ export class AdTogether {
       body: JSON.stringify({ 
         adId, 
         token, 
-        apiKey: AdTogether.shared.appId 
+        apiKey: AdTogether.shared.appId,
+        ...(AdTogether.shared.bundleId ? { bundleId: AdTogether.shared.bundleId } : {}),
+        // Send platform and environment to match Flutter SDK
+        platform: 'web',
+        environment: typeof process !== 'undefined' && process.env?.NODE_ENV === 'development' ? 'development' : 'production',
       }),
     }).catch(console.error);
   }

package/src/core/types.ts

@@ -14,6 +14,7 @@ export interface AdTogetherOptions {
   appId?: string;
   apiKey?: string;
   baseUrl?: string;
+  bundleId?: 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

@@ -8,6 +8,10 @@ export interface AdTogetherBannerProps {
   style?: React.CSSProperties;
   onAdLoaded?: () => void;
   onAdFailedToLoad?: (error: Error) => void;
+  /** Whether to show a close button on the banner */
+  showCloseButton?: boolean;
+  /** Callback when the user closes the ad */
+  onAdClosed?: () => void;
   /** Width of the ad element. Defaults to '100%' */
   width?: number | string;
   /** Height of the ad element. Defaults to 'auto' */
@@ -22,6 +26,8 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
   style = {},
   onAdLoaded,
   onAdFailedToLoad,
+  showCloseButton = false,
+  onAdClosed,
   width = '100%',
   height = 'auto',
   theme = 'auto',
@@ -29,6 +35,7 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
   const [adData, setAdData] = useState<AdModel | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
   const [isDarkMode, setIsDarkMode] = useState(theme === 'dark');
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -52,7 +59,7 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
   useEffect(() => {
     let isMounted = true;
 
-    AdTogether.fetchAd(adUnitId)
+    AdTogether.fetchAd(adUnitId, 'banner')
       .then((ad) => {
         if (isMounted) {
           setAdData(ad);
@@ -104,6 +111,16 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
     }
   };
 
+  const handleClose = (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent triggering the ad click
+    setIsVisible(false);
+    onAdClosed?.();
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
   if (isLoading) {
     return (
       <div 
@@ -139,6 +156,7 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
         overflow: 'hidden',
         cursor: 'pointer',
         boxSizing: 'border-box',
+        position: 'relative',
         ...style,
       }}
       onMouseOver={(e) => {
@@ -179,6 +197,34 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
           {adData.description}
         </span>
       </div>
+      {showCloseButton && (
+        <button
+          onClick={handleClose}
+          aria-label="Close ad"
+          style={{
+            position: 'absolute',
+            top: '8px',
+            right: '8px',
+            width: '24px',
+            height: '24px',
+            borderRadius: '50%',
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            border: 'none',
+            color: '#fff',
+            fontSize: '14px',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 0,
+            lineHeight: 1,
+            zIndex: 1,
+          }}
+        >
+          ×
+        </button>
+      )}
     </div>
   );
 };