# useReneVerse

These hooks enable ad serving, retrieval of ad surfaces, and ad tracking, simplifying the integration of advertising features into your projects.

***

### :inbox\_tray: getAdSurfaces()

**Description:**\
Fetches all ad surfaces configured for your game in the ReneVerse Portal.

```typescript
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**

<pre><code>returns type AdSurfaceList {
    items: [AdSurface]
    limit: Int
    nextToken: String
}

type AdSurface {
    adSurfaceId: String
<strong>    adType: "BANNER" | "VIDEO"
</strong>    floorPrice: Float
    gameId: String
    interactivity: "INTERACTIVE" | "STATIC"
    maxHeight: String
<strong>    maxWidth: String
</strong>    resolutionIab: String
    targetingTags: [String]
    updatedAt: String
}
</code></pre>

***

### :dart: getAd()

**Description:**\
Fetches a Smart Ad for the given ad surface.

**Params**&#x20;

* `adSurfaceId : string`

```javascript
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
}
```

***

### :eye: trackAdSingle()

**Description:**\
Tracks a single ad’s visibility and view time. Records impressions for served Ads.

**Params**&#x20;

* `ad : type ServeAd` — The served ad object
* `screenCoveragePercentage: number` — Percentage visible
* `timeInMilliseconds: number` — Time in ms the ad was visible
* `angleView?: number` — Viewing angle

```typescript
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
```

***

### :eyes: trackAdMultiple()

**Description:**\
Aggregate and record impressions for several served ads concurrently, reducing individual tracking overhead and streamlining analytics collection.

**Params**&#x20;

* `adDataList : [{`\
  &#x20; `ad : type ServeAd`\
  &#x20; `screenCoveragePercentage: number`\
  &#x20; `timeInMilliseconds: number`\
  &#x20; `angleView?: number`\
  `}]`

```typescript
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
```