5️⃣NFT View (Optional)

Walkthrough for tracking NFT views

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:

// 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:

// w3aSDK.nftView working example
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
}

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