Inline Ads

<!-- Bypass APPLICATION_ID check for WebView APIs for Ads -->
<meta-data
    android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
    android:value="webview" />

export default function SafeAreaAdLayout({ children }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>

      {/* Top safe area spacer — pushes everything below the status bar / notch */}
      <div style={{ height: "var(--safe-area-top)", flexShrink: 0 }} />

      {/* Navigation bar */}
      <nav style={{
        height: 56,
        background: "#1a1a2e",
        color: "#fff",
        display: "flex",
        alignItems: "center",
        padding: "0 16px",
        flexShrink: 0,
      }}>
        My App
      </nav>

      {/* Top banner — sits below nav, inside the safe area */}
      <div style={{ width: "100%", flexShrink: 0 }}>
        <ins
          className="adsbygoogle"
          style={{ display: "block" }}
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="YYYYYYYYYY"
          data-ad-format="auto"
          data-full-width-responsive="true"
        />
        <script>{`(adsbygoogle = window.adsbygoogle || []).push({});`}</script>
      </div>

      {/* Scrollable content */}
      <main style={{ flex: 1, overflowY: "auto", padding: 16 }}>
        {children}
      </main>

      {/* Bottom banner — sits above the home indicator */}
      <div style={{
        width: "100%",
        background: "#fff",
        borderTop: "1px solid #e0e0e0",
        flexShrink: 0,
        paddingBottom: "var(--safe-area-bottom)",
      }}>
        <ins
          className="adsbygoogle"
          style={{ display: "block" }}
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="ZZZZZZZZZZ"
          data-ad-format="auto"
          data-full-width-responsive="true"
        />
        <script>{`(adsbygoogle = window.adsbygoogle || []).push({});`}</script>
      </div>

    </div>
  );
}

export default function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>

      {/* Your web navigation bar */}
      <nav style={{
        height: 56,
        background: "#1a1a2e",
        color: "#fff",
        display: "flex",
        alignItems: "center",
        padding: "0 16px",
        flexShrink: 0,
      }}>
        <span>My App</span>
      </nav>

      {/* AdSense banner - sits directly under the nav, inside the WebView */}
      <div style={{ width: "100%", overflow: "hidden", flexShrink: 0 }}>
        <ins
          className="adsbygoogle"
          style={{ display: "block" }}
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="YYYYYYYYYY"
          data-ad-format="auto"
          data-full-width-responsive="true"
        />
        <script>
          {`(adsbygoogle = window.adsbygoogle || []).push({});`}
        </script>
      </div>

      {/* Scrollable page content below the ad */}
      <main style={{ flex: 1, overflowY: "auto", padding: 16 }}>
        <h1>Welcome</h1>
        <p>Your page content here...</p>
      </main>

    </div>
  );
}

export default function BottomBannerLayout({ children }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>

      {/* Scrollable content takes all available space */}
      <main style={{ flex: 1, overflowY: "auto", padding: 16 }}>
        {children}
      </main>

      {/* Sticky bottom banner - part of the web layout, not a native overlay */}
      <div style={{
        position: "sticky",
        bottom: 0,
        width: "100%",
        background: "#fff",
        borderTop: "1px solid #e0e0e0",
        flexShrink: 0,
      }}>
        <ins
          className="adsbygoogle"
          style={{ display: "block" }}
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="YYYYYYYYYY"
          data-ad-format="auto"
          data-full-width-responsive="true"
        />
        <script>
          {`(adsbygoogle = window.adsbygoogle || []).push({});`}
        </script>
      </div>

    </div>
  );
}

const posts = [
  { id: 1, title: "Post one" },
  { id: 2, title: "Post two" },
  { id: 3, title: "Post three" },
  { id: 4, title: "Post four" },
  { id: 5, title: "Post five" },
  { id: 6, title: "Post six" },
];

function AdCard() {
  return (
    <div style={{ margin: "12px 0", background: "#f9f9f9", borderRadius: 8 }}>
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
        data-ad-slot="YYYYYYYYYY"
        data-ad-format="fluid"
        data-ad-layout="in-article"
      />
      <script>
        {`(adsbygoogle = window.adsbygoogle || []).push({});`}
      </script>
    </div>
  );
}

export default function Feed() {
  return (
    <div style={{ padding: 16 }}>
      {posts.map((post, index) => (
        <>
          {/* Insert an ad after every 3rd card */}
          {index > 0 && index % 3 === 0 && <AdCard key={`ad-${index}`} />}

          <div key={post.id} style={{
            padding: 16, marginBottom: 12,
            border: "1px solid #e0e0e0", borderRadius: 8,
          }}>
            <h3>{post.title}</h3>
          </div>
        </>
      ))}
    </div>
  );
}

import { useState, useEffect } from "react";

function InterstitialAd({ onClose }) {
  const [countdown, setCountdown] = useState(5);

  useEffect(() => {
    // Push the ad unit once the overlay mounts
    (window.adsbygoogle = window.adsbygoogle || []).push({});

    const timer = setInterval(() => {
      setCountdown((c) => {
        if (c <= 1) { clearInterval(timer); return 0; }
        return c - 1;
      });
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 9999,
      background: "rgba(0,0,0,0.92)",
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
    }}>
      <div style={{ position: "absolute", top: 16, right: 16 }}>
        {countdown === 0 ? (
          <button onClick={onClose} style={{
            background: "#fff", border: "none", borderRadius: 4,
            padding: "6px 14px", cursor: "pointer", fontWeight: 600,
          }}>
            Close
          </button>
        ) : (
          <span style={{ color: "#aaa", fontSize: 14 }}>
            Close in {countdown}s
          </span>
        )}
      </div>

      {/* Full-screen ad unit inside the overlay */}
      <ins
        className="adsbygoogle"
        style={{ display: "block", width: 320, height: 480 }}
        data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
        data-ad-slot="YYYYYYYYYY"
      />
    </div>
  );
}

export default function App() {
  const [showAd, setShowAd] = useState(false);

  return (
    <div style={{ padding: 16 }}>
      {showAd && <InterstitialAd onClose={() => setShowAd(false)} />}
      <h1>Article complete!</h1>
      <button onClick={() => setShowAd(true)}>
        Next article →
      </button>
    </div>
  );
}

function InArticleAd() {
  return (
    <div style={{ margin: "24px 0", textAlign: "center" }}>
      <p style={{ fontSize: 10, color: "#999", marginBottom: 4 }}>Advertisement</p>
      <ins
        className="adsbygoogle"
        style={{ display: "block", textAlign: "center" }}
        data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
        data-ad-slot="YYYYYYYYYY"
        data-ad-format="fluid"
        data-ad-layout="in-article"
      />
      <script>
        {`(adsbygoogle = window.adsbygoogle || []).push({});`}
      </script>
    </div>
  );
}

export default function Article() {
  return (
    <article style={{ maxWidth: 680, margin: "0 auto", padding: 16 }}>
      <h1>The Future of Mobile Apps</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat.</p>

      {/* Ad sits naturally between paragraphs, scrolls with content */}
      <InArticleAd />

      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur.</p>

      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa
      qui officia deserunt mollit anim id est laborum.</p>
    </article>
  );
}

import { useEffect, useRef } from "react";

export default function VideoWithPreroll() {
  const videoRef = useRef(null);

  useEffect(() => {
    if (!videoRef.current) return;

    // videojs and videojs-ima are loaded via <script> tags in your HTML <head>
    const player = window.videojs(videoRef.current, {
      controls: true,
      autoplay: true,
      muted: true,         // Required for autoplay on most browsers
      playsinline: true,   // Required for inline playback in iOS WebView
    });

    // Attach the IMA plugin - pre-roll ad plays before content
    player.ima({
      adTagUrl:
        "https://pubads.g.doubleclick.net/gampad/ads?YOUR_AD_TAG_PARAMS",
    });

    return () => player.dispose();
  }, []);

  return (
    <div style={{ padding: 16 }}>
      <h2>Watch: Product Overview</h2>

      {/* Video.js + IMA handles the pre-roll ad automatically */}
      <div data-vjs-player>
        <video
          ref={videoRef}
          className="video-js vjs-default-skin vjs-big-play-centered"
          style={{ width: "100%", borderRadius: 8 }}
          playsinline
        >
          <source src="https://example.com/your-content-video.mp4" type="video/mp4" />
        </video>
      </div>
    </div>
  );
}

import { useState } from "react";

function AdGate({ onUnlock }) {
  const [watching, setWatching] = useState(false);
  const [countdown, setCountdown] = useState(null);

  function startAd() {
    setWatching(true);
    // Push the ad unit
    (window.adsbygoogle = window.adsbygoogle || []).push({});

    // Simulate a 10s ad view then unlock
    let n = 10;
    setCountdown(n);
    const timer = setInterval(() => {
      n--;
      setCountdown(n);
      if (n <= 0) { clearInterval(timer); onUnlock(); }
    }, 1000);
  }

  return (
    <div style={{
      border: "2px dashed #ccc", borderRadius: 12,
      padding: 24, textAlign: "center",
    }}>
      <p style={{ fontSize: 18, fontWeight: 600 }}>Premium content (locked)</p>
      <p style={{ color: "#666" }}>Watch a short ad to read this article for free.</p>

      {!watching ? (
        <button onClick={startAd} style={{
          background: "#4CAF50", color: "#fff",
          border: "none", borderRadius: 6,
          padding: "10px 24px", fontSize: 16, cursor: "pointer",
        }}>
          Watch ad to unlock
        </button>
      ) : (
        <div>
          <ins
            className="adsbygoogle"
            style={{ display: "block", width: 320, height: 250, margin: "16px auto" }}
            data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
            data-ad-slot="YYYYYYYYYY"
          />
          <p style={{ color: "#666" }}>
            {countdown > 0 ? `Unlocking in ${countdown}s` : "Unlocked"}
          </p>
        </div>
      )}
    </div>
  );
}

export default function PremiumArticle() {
  const [unlocked, setUnlocked] = useState(false);

  return (
    <article style={{ maxWidth: 680, margin: "0 auto", padding: 16 }}>
      <h1>The Secret to 10x Growth</h1>
      <p>Here's the introduction everyone can read...</p>

      {/* The rest of the article is gated behind the ad */}
      {unlocked ? (
        <p>Here is all the premium content, now fully visible after watching the ad.</p>
      ) : (
        <AdGate onUnlock={() => setUnlocked(true)} />
      )}
    </article>
  );
}

function SidebarAd() {
  return (
    <aside style={{
      width: 160,
      flexShrink: 0,
      marginLeft: 16,
      position: "sticky",
      top: 16,
      alignSelf: "flex-start",
    }}>
      <p style={{ fontSize: 10, color: "#999", marginBottom: 4 }}>Ad</p>
      <ins
        className="adsbygoogle"
        style={{ display: "block", width: 160, height: 600 }}
        data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
        data-ad-slot="YYYYYYYYYY"
      />
      <script>
        {`(adsbygoogle = window.adsbygoogle || []).push({});`}
      </script>
    </aside>
  );
}

export default function TabletLayout({ children }) {
  return (
    <div style={{ display: "flex", padding: 16, maxWidth: 960, margin: "0 auto" }}>

      {/* Main content */}
      <main style={{ flex: 1, minWidth: 0 }}>
        {children}
      </main>

      {/* Sticky sidebar ad - only show on wider screens */}
      <SidebarAd />

    </div>
  );
}

// Add to your profile page or settings screen during development
// Remove or hide behind an admin flag before releasing to production
export default function DebugAdLink() {
  return (
    <a
      href="https://google.github.io/webview-ads/test/#api-for-ads-tests"
      style={{ fontSize: 11, color: "#999" }}
    >
      Ad SDK debug
    </a>
  );
}