---
description: Walkthrough for tracking NFT views
---

# NFT View (Optional)

**NFT View Tracking with w3aSDK**

We're excited to introduce the ability to track NFT views. This feature provides valuable insights, enabling you to:

* Gain a deeper understanding of your audience's preferences.
* Offer transparency to platform creators by showing them their view counts.
* Tailor the experience based on the wallet address.

For those interested in advanced metrics, such as game item performance or usage patterns, reach out to the team!

#### **Setting Up NFT View Tracking**

To start tracking NFT views, use the `w3aSDK.nftView` API:

```javascript
// Example of w3aSDK.nftView
w3aSDK.nftView({
  label: "Crypto Kitties", // Optional: label for the NFT
  chainId: "0x1", // Chain ID of the NFT
  contractAddress: "0x06012c8cf97bead5deae237070f9587f8e7a266d", // Contract address of the NFT
  tokenId: "1561299" // Token ID of the NFT
});
```

#### **Practical Implementation**

Imagine you're OpenSea, and you have a dynamic route like this: `https://opensea.io/assets/ethereum/0x06012c8cf97bead5deae237070f9587f8e7a266d/1561299`

The route structure is: `https://opensea.io/assets/:chain/:contractAddress/:tokenId`

Here's how you can integrate `w3aSDK.nftView`:

<pre class="language-javascript"><code class="lang-javascript"><strong>// w3aSDK.nftView working example
</strong>import { useParams } from 'react-router-dom';
import { w3aSDK } from '@web3acquire/w3a';

const MAINNET_CHAIN_ID = "0x1"; // Ethereum chainId
const CHAIN_TO_CHAIN_ID = {
  "ethereum": MAINNET_CHAIN_ID 
}

export const NFTPage = () => {
  const { chain, contractAddress, tokenId } = useParams();

  React.useEffect(() => {
    w3aSDK.nftView({
      chainId: CHAIN_TO_CHAIN_ID[chain],
      contractAddress: contractAddress,
      tokenId: tokenId
    })
  }, [chain, contractAddress, tokenId]);
  
  // ... rest of the component
}
</code></pre>

With this setup, you're ready to capture custom analytics and KPIs related to NFT views. Happy tracking!
