🪝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 object

• screenCoveragePercentage: number — Percentage visible

• timeInMilliseconds: number — Time in ms the ad was visible

• angleView?: 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 boolean