Show ads - Gravity

React

import { GravityAd } from '@gravity-ai/react';

{ads[0] && <GravityAd ad={ads[0]} />}

GravityAd handles the placement design, impression and click tracking, disclosure, feedback controls, and fallback automatically. Pass the API key used for the ad request to enable feedback submissions:

<GravityAd
  ad={ads[0]}
  sessionId={sessionId}
  apiKey={gravityApiKey}
/>

apiKey is visible in the browser and used for feedback submissions. Pass it down from your server with the ad response rather than referencing a server-only environment variable in client code.

Multiple placements

The response order matches the placement order in your request. Render each slot only when it fills:

{ads[0] && <GravityAd ad={ads[0]} />}
{ads[1] && <GravityAd ad={ads[1]} />}

Custom rendering

Use the official component unless you need a fully custom renderer. Custom renderers must:

Open ad.clickUrl, not the raw landing-page URL.
Request ad.impUrl exactly once when the ad becomes visible.
Show a clear ad disclosure.

See the JavaScript and React SDK guide for request setup.