A typescript library for displaying ads in React applications based on config provided by Publir.
Usage
Install package
npm install @publir/publir-react-plugin --save
yarn add @publir/publir-react-plugin
Note: Your React version should be at least version 17.0.2. Older versions of React are not supported.
Include external library
You need to include Prebid.js
library
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script
type="text/javascript"
src="http://cdn.jsdelivr.net/npm/prebid.js@7.13/dist/not-for-prod/prebid.js"
></script>
</head>
<body>
<!-- App code -->
</body>
</html>
Important: In the example above, a non-production version of the Prebid.js library was used. It's not recommended to use it in production environment. We recommend to replace source to Prebid.js library by delivered by Publir platform which should contain only necessary bidder adapters.
Use PublirAdsProvider
The PublirAdsProvider
does take a publisherId
via prop and based on provided value make a request for Prebid configuration to Publir platform. Config will be passed to AdSlot
component via context API.
import { PublirAdsProvider } from '@publir/publir-react-plugin';
import App from './App';
const Page = () => {
return (
<PublirAdsProvider publisherId="1">
<App />
</PublirAdsProvider>
)
}
@publir/publir-react-plugin
is written in TypeScript with complete definitions.
Use AdSlot
The AdSlot component does take an id
via prop, it corresponds to the IDs in your configuration.
Component will render an ad based on Prebid response. To make your Prebid config accessible in AdSlot
component, you need to wrap page content with PublirAdsProvider
.
import { PublirAdsProvider, AdSlot } from '@publir/publir-react-plugin';
const Page = () => {
return (
<PublirAdsProvider publisherId="1">
<AdSlot id="1" />
</PublirAdsProvider>
)
}