​
Display Ads Integration

Integrating Boost display ads into your React applications is straightforward. We provide a ready-to-use AdContainer component that handles all the necessary configuration.

​
React Component Integration

To display ads on your website or application, simply import and use our AdContainer component:

import { useEffect, useRef } from "react";

const AdContainer = ({ className = "" }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    // Make sure the container has the required class
    if (containerRef.current) {
      containerRef.current.classList.add("boost-ad-container");
      containerRef.current.style.background = "transparent";

      // Make sure the container is clickable
      containerRef.current.style.cursor = "pointer";
      containerRef.current.style.pointerEvents = "auto";
    }
  }, []);

  return (
    <div
      ref={containerRef}
      className={`boost-ad-container ${className}`}
      style={{
        width: "300px",
        height: "80px",
        display: "block",
        overflow: "hidden",
        position: "relative",
        background: "transparent",
      }}
    />
  );
};

export default AdContainer;

​
Using the AdContainer

Once you’ve implemented the component, you can include it anywhere in your application:

import AdContainer from "./path/to/AdContainer";

function YourPage() {
  return (
    <div className="your-page">
      <h1>Your Content</h1>
      <p>Your regular content goes here...</p>

      {/* Insert the ad container where you want ads to appear */}
      <AdContainer className="custom-ad-styling" />

      <p>More of your content...</p>
    </div>
  );
}

​
Customization Options

The AdContainer component accepts the following props:

className: Additional CSS classes to customize the appearance Custom styling can be applied to the container, but ensure you maintain the required .boost-ad-container class

​
Ad Placement Best Practices

For optimal performance and user experience:

Place ads in visible areas without disrupting the user experience Avoid placing multiple ads too close together Consider strategic placements like sidebar, between content sections, or header/footer areas Test different placements to find the optimal balance between visibility and user engagement

​
Troubleshooting

If ads are not displaying properly:

  1. Verify your website/app is properly registered in the Boost Publishers Platform
  2. Check that the .boost-ad-container class is properly applied
  3. Ensure your ad container has appropriate dimensions
  4. Confirm your integration is using the latest version of our component
  5. Verify ad requests in your browser’s network tab:
    • Open browser developer tools (F12 or right-click → Inspect)
    • Navigate to the Network tab
    • Filter for “ad_request”
    • Check that requests are being sent and receiving successful responses
    • Examine response data to ensure ads are being properly returned