# useTracking

The `useTracking` hooks monitor visibility and screen coverage of served Ads, ensuring accurate impression counting based on ReneVerse viewability standards.

***

### :telescope: checkAdFullVisibility()

**Description:**\
Determines whether a specific ad is **fully visible** in the current scene and whether it’s being blocked by any other objects.

**Params** 

* `adSprite : Phaser Sprite Object`
* `scene: Phaser Scene Object`

```typescript
import { PhaserHooks } from "@reneverse/rene-sdk-phaser";
import { IRefPhaserGame, PhaserGame } from "./game/PhaserGame";
import { useRef } from "react";

function App() {
  
  //  References to the PhaserGame component (game and scene are exposed)
  const phaserRef = useRef<IRefPhaserGame | null>(null);
  
  // Initialize PhaserHooks with API Key and Private Key for ReneVerse
  const phaserHooks = new PhaserHooks({
    apiKey: '<YOUR API KEY>',
    privateKey: '<YOUR PRIVATE KEY>',
  });
  
  const checkVisibility = async () => {
    if (phaserRef.current) {
      const scene = phaserRef.current.scene;

      if (scene) {
  
        // Fetch Ad surfaces configured in 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);
      
        // Load Ad image
        if (ad.adId) {
          scene.load.image("dynamicAd", ad.url as string);
          
          scene.load.once("complete", () => {
          
            // Get Random Position
            const x = Phaser.Math.Between(100, 900);
            const y = Phaser.Math.Between(100, 600);
          
            //  `add.sprite` is a Phaser GameObjectFactory method and it returns a Sprite Game Object instance
            const adSurface = scene.add.sprite(x, y, "dynamicAd");

            // Set display size
            adSurface.setDisplaySize(300, 200);
            
            // Check if the Ad is visible or not
            const visibilityCheck = phaserHooks
                .useTracking()
                .checkAdFullVisibility(adSurface, scene);
                
            if (visibilityCheck.isFullyVisible) {
              console.log("Ad is Fully Visible");
            } else {
              console.log("Ad is blocked");
            }
            
          };
          
          scene.load.start();
        }
      }
    }
  }
  
  // Creating a button to call the serveAd function
  return (
      <div>
        <PhaserGame ref={phaserRef} />
        <button onClick={checkVisibility}>
          Check Visibility
        </button>
      </div>
  );
}

export default App;
```

#### Returns

```
interface CheckAdFullVisibility {
 isFullyVisible : Boolean
 blockingSprites : [Phaser Sprite Object]
}
```

***

### :triangular\_ruler: calculateAdCoverage()

**Description:**\
Calculates how much of the ad is visible to the player based on the current camera view. Useful for impression tracking and engagement analysis.

**Params**&#x20;

* `adSprite : Phaser Sprite Object`
* `camera : Phaser Camera Object`

```typescript
import { IRefPhaserGame, PhaserGame } from "./game/PhaserGame";
import { useRef } from "react";

function App() {
  
  //  References to the PhaserGame component (game and scene are exposed)
  const phaserRef = useRef<IRefPhaserGame | null>(null);
  
  // Initialize PhaserHooks with API Key and Private Key for ReneVerse
  const phaserHooks = new PhaserHooks({
    apiKey: '<YOUR API KEY>',
    privateKey: '<YOUR PRIVATE KEY>',
  });
  
  const checkVisibility = async () => {
    if (phaserRef.current) {
      const scene = phaserRef.current.scene;

      if (scene) {
  
        // Fetch Ad surfaces configured in 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);
      
        // Load Ad image
        if (ad.adId) {
          scene.load.image("dynamicAd", ad.url as string);
          
          scene.load.once("complete", () => {
          
            // Get Random Position
            const x = Phaser.Math.Between(100, 900);
            const y = Phaser.Math.Between(100, 600);
          
            //  `add.sprite` is a Phaser GameObjectFactory method and it returns a Sprite Game Object instance
            const adSurface = scene.add.sprite(x, y, "dynamicAd");

            // Set display size
            adSurface.setDisplaySize(300, 200);
            
            // Check if the Ad is visible or not
            const visibilityCheck = phaserHooks
                .useTracking()
                .checkAdFullVisibility(adSurface, scene);
                
            if (visibilityCheck.isFullyVisible) {
              // if Fully visible, calculate ad coverage
              const adCoverage = phaserHooks
                .useTracking()
                .calculateAdCoverage(adSurface, scene.cameras.main);
              
              console.log(adCoverage);
            } else {
              console.log("Ad is blocked");
            }
            
          };
          
          scene.load.start();
        }
      }
    }
  }
  
  // Creating a button to call the serveAd function
  return (
      <div>
        <PhaserGame ref={phaserRef} />
        <button onClick={checkVisibility}>
          Check Visibility
        </button>
      </div>
  );
}

export default App;
```

#### Returns

```
interface CalculateAdCoverage {
  isVisible: Boolean
  screenCoveragePercentage: Number
  visibleArea: Number
  totalArea: Number
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reneverse.io/publisher-flow/sdk-integration/phaser-3/api-reference/usetracking.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.