@adtogether/web-sdk 0.1.12 → 0.1.14

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 0.1.14
+
+* **Feature**: Added `onAdClosed` callback support to banner components.
+* **Feature**: Improved automatic `bundleId` detection across all platforms.
+* **Security**: Hardened ad-serving logic to prevent payout fraud.
+* **Sync**: Version parity across all AdTogether SDKs.
+
+## 0.1.12
+
+* **Feature**: Added `showCloseButton` to React components.
+* **Standardization**: Support for `onAdLoaded` and `onAdFailedToLoad` across all platforms.
+* **Layout**: Enhanced responsiveness and safety checks for ad rendering.
+
 ## 0.1.9
 
 * **Feature**: Added `onAdLoaded` and `onAdFailedToLoad` callback support to React components.

package/README.md

@@ -45,7 +45,10 @@ Call `AdTogether.initialize()` before rendering any ad components. You can obtai
 ```typescript
 import { AdTogether } from '@adtogether/web-sdk';
 
-AdTogether.initialize({ appId: 'YOUR_APP_ID' });
+AdTogether.initialize({ 
+  appId: 'YOUR_APP_ID',
+  // bundleId: 'com.example.app' // optional: automatically detected from window.location.hostname
+});
 ```
 
 ## Usage
@@ -64,8 +67,10 @@ function MyApp() {
 
       <AdTogetherBanner
         adUnitId="home_bottom_banner"
+        showCloseButton={true}
         onAdLoaded={() => console.log('Banner loaded!')}
         onAdFailedToLoad={(error) => console.error('Banner error:', error)}
+        onAdClosed={() => console.log('Banner closed!')}
       />
     </div>
   );
@@ -77,6 +82,8 @@ function MyApp() {
 | Prop               | Type                    | Default   | Description |
 |--------------------|-------------------------|-----------|-------------|
 | `adUnitId`         | `string`                | **required** | Unique identifier for this ad placement. |
+| `showCloseButton`  | `boolean`               | `false`   | Show a dismissable close button overlay. |
+| `onAdClosed`       | `() => void`            | —         | Called when the user closes the ad. |
 | `width`            | `number \| string`      | `'100%'`  | Width of the ad element. |
 | `height`           | `number \| string`      | `'auto'`  | Height of the ad element. |
 | `theme`            | `'dark' \| 'light' \| 'auto'` | `'auto'` | Color scheme. `'auto'` follows system preference. |

package/dist/{chunk-7IJIBJD4.mjs → chunk-RW43ES42.mjs}

@@ -13,6 +13,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;
     }
@@ -43,6 +48,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)}`;
@@ -74,7 +82,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);
   }

package/dist/index.d.mts

@@ -12,6 +12,7 @@ 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;
 }
@@ -19,6 +20,7 @@ interface AdTogetherOptions {
 declare class AdTogether {
     private static instance;
     private appId?;
+    private bundleId?;
     private allowSelfAds;
     baseUrl: string;
     private constructor();

package/dist/index.d.ts

@@ -12,6 +12,7 @@ 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;
 }
@@ -19,6 +20,7 @@ interface AdTogetherOptions {
 declare class AdTogether {
     private static instance;
     private appId?;
+    private bundleId?;
     private allowSelfAds;
     baseUrl: string;
     private constructor();

package/dist/index.js

@@ -39,6 +39,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;
     }
@@ -69,6 +74,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)}`;
@@ -100,7 +108,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);
   }

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   AdTogether
-} from "./chunk-7IJIBJD4.mjs";
+} from "./chunk-RW43ES42.mjs";
 export {
   AdTogether
 };

package/dist/react/index.d.mts

@@ -6,6 +6,10 @@ 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' */

package/dist/react/index.d.ts

@@ -6,6 +6,10 @@ 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' */

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"
+          }
+        )
       ]
     }
   );

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"
+          }
+        )
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adtogether/web-sdk",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "The official AdTogether Web SDK — reciprocal ad exchange to increase conversions and grow your audience.",
   "repository": {
     "type": "git",
@@ -50,6 +50,7 @@
     "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",

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>
   );
 };