🪝useReneVerse
The useReneVerse hook is your go-to for handling Smart Ad logic in Phaser 3.
These hooks enable ad serving, retrieval of ad surfaces, and ad tracking, simplifying the integration of advertising features into your projects.
📥 getAdSurfaces()
Description: Fetches all ad surfaces configured for your game in the ReneVerse Portal.
import { PhaserHooks } from "@reneverse/rene-sdk-phaser";
function App() {
// Initialize PhaserHooks with API Key and Private Key for ReneVerse
const phaserHooks = new PhaserHooks({
apiKey: '<YOUR API KEY>',
privateKey: '<YOUR PRIVATE KEY>',
});
const getAdSurfaces = async () => {
// Fetch all Ad surfaces configured in your game on the ReneVerse portal
const adSurfaces = await phaserHooks.useReneVerse().getAdSurfaces();
console.log(adSurfaces);
}
// Creating a button to call the getAdSurfaces function
return (
<div>
<button onClick={getAdSurfaces}>
Get Ad Surfaces
</button>
</div>
);
}
export default App;Returns
returns type AdSurfaceList {
items: [AdSurface]
limit: Int
nextToken: String
}
type AdSurface {
adSurfaceId: String
adType: "BANNER" | "VIDEO"
floorPrice: Float
gameId: String
interactivity: "INTERACTIVE" | "STATIC"
maxHeight: String
maxWidth: String
resolutionIab: String
targetingTags: [String]
updatedAt: String
}🎯 getAd()
Description: Fetches a Smart Ad for the given ad surface.
Params
adSurfaceId : string
import { PhaserHooks } from "@reneverse/rene-sdk-phaser";
function App() {
// Initialize PhaserHooks with API Key and Private Key for ReneVerse
const phaserHooks = new PhaserHooks({
apiKey: '<YOUR API KEY>',
privateKey: '<YOUR PRIVATE KEY>',
});
const serveAd = async () => {
// Fetch all Ad surfaces configured in your game on the ReneVerse portal
const adSurfaces = await phaserHooks.useReneVerse().getAdSurfaces();
// Check if there are any ad surfaces configured in the ReneVerse portal
if (!adSurfaces.items.length) {
console.log("No ad surfaces found");
return;
}
// Fetch Ad from ReneVerse
const ad = await phaserHooks
.useReneVerse()
.getAd(adSurfaces.items[0].adSurfaceId);
console.log(ad);
}
// Creating a button to call the serveAd function
return (
<div>
<button onClick={serveAd}>
Serve Ad
</button>
</div>
);
}
export default App;Returns
returns type ServeAd {
adId: String
adSurfaceId: String
adType: "BANNER" | "VIDEO"
hasOffer: Boolean
placeholderUrl: String
url: String
viewId: String
}👁️ trackAdSingle()
Description: Tracks a single ad’s visibility and view time. Records impressions for served Ads.
Params
ad : type ServeAd— The served ad objectscreenCoveragePercentage: number— Percentage visibletimeInMilliseconds: number— Time in ms the ad was visibleangleView?: number— Viewing angle
import { PhaserHooks } from "@reneverse/rene-sdk-phaser";
function App() {
// Initialize PhaserHooks with API Key and Private Key for ReneVerse
const phaserHooks = new PhaserHooks({
apiKey: '<YOUR API KEY>',
privateKey: '<YOUR PRIVATE KEY>',
});
const trackAd = async () => {
// Fetch all Ad surfaces configured in your game on the ReneVerse portal
const adSurfaces = await phaserHooks.useReneVerse().getAdSurfaces();
// Check if there are any ad surfaces configured in the ReneVerse portal
if (!adSurfaces.items.length) {
console.log("No ad surfaces found");
return;
}
// Fetch Ad from ReneVerse
const ad = await phaserHooks
.useReneVerse()
.getAd(adSurfaces.items[0].adSurfaceId);
// Let's say the ad is covering 20% of the screen.
const screenCoveragePercentage = 20;
// Setting a 1 second delay before tracking Ads
setTimeout(() => {
const trackAds = await phaserHooks
.useReneVerse()
.trackAdSingle(
ad,
screenCoveragePercentage,
1000, // 1 seconds = 1000 milliseconds
0 // For 2d, The angle is always 0
);
console.log(trackAds);
}, 1000);
}
// Creating a button to call the trackAd function
return (
<div>
<button onClick={trackAd}>
Track Ad
</button>
</div>
);
}
export default App;Returns
returns boolean👀 trackAdMultiple()
Description: Aggregate and record impressions for several served ads concurrently, reducing individual tracking overhead and streamlining analytics collection.
Params
adDataList : [{ ad : type ServeAd screenCoveragePercentage: number timeInMilliseconds: number angleView?: number }]
import { PhaserHooks } from "@reneverse/rene-sdk-phaser";
function App() {
// Initialize PhaserHooks with API Key and Private Key for ReneVerse
const phaserHooks = new PhaserHooks({
apiKey: '<YOUR API KEY>',
privateKey: '<YOUR PRIVATE KEY>',
});
const trackAds = async () => {
// Fetch all Ad surfaces configured in your game on the ReneVerse portal
const adSurfaces = await phaserHooks.useReneVerse().getAdSurfaces();
// Check if there are more than 1 ad surfaces
if (adSurfaces.items.length < 2) {
console.log("Create more ad Surfaces");
return;
}
// Fetch Ad from ReneVerse
const ad = await phaserHooks
.useReneVerse()
.getAd(adSurfaces.items[0].adSurfaceId);
// Fetch Second Ad from ReneVerse
const ad2 = await phaserHooks
.useReneVerse()
.getAd(adSurfaces.items[1].adSurfaceId);
// Let's say the first ad is covering 20% of the screen.
const firstScreenCoveragePercentage = 20;
// Let's say the second ad is covering 40% of the screen.
const secondScreenCoveragePercentage = 40;
// Setting a 1 second delay before tracking Ads
setTimeout(() => {
const trackAds = await phaserHooks
.useReneVerse()
.trackAdMultiple(
[{
ad: ad,
screenCoveragePercentage: firstScreenCoveragePercentage,
timeInMilliseconds: 1000, // 1 seconds = 1000 milliseconds
angleView: 0 // For 2d, The angle is always 0
},
{
ad: ad2,
screenCoveragePercentage: secondScreenCoveragePercentage,
timeInMilliseconds: 1000, // 1 seconds = 1000 milliseconds
angleView: 0 // For 2d, The angle is always 0
}]
);
console.log(trackAds);
}, 1000);
}
// Creating a button to call the trackAds function
return (
<div>
<button onClick={trackAds}>
Track Ads
</button>
</div>
);
}
export default App;Returns
returns booleanLast updated