> For the complete documentation index, see [llms.txt](https://web3-acquire.gitbook.io/product-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web3-acquire.gitbook.io/product-docs/technical-guides/react-spa/quick-start.md).

# Quick Start

Get started with the SDK from code snippets; Less than 5 minutes

**Event Tracking with w3aSDK**

This guide will help you swiftly set up event tracking with w3aSDK. For a comprehensive understanding, we recommend exploring the complete documentation.

#### **Installation**

Install the w3aSDK package via NPM:

```sh
npm i @web3acquire/w3a
```

#### **Initialization**

Initialize the SDK in your main application file (e.g., `index.js`):

```javascript
// File: index.js
import { w3aSDK } from "@web3acquire/w3a";

w3aSDK.configure(
    "<API_KEY>", // Replace with your API Key
    { /* Optional configuration options can be added here */ }
);
```

For now, you can leave the configuration options empty. [Read more about configuration options](/product-docs/technical-guides/react-spa/configuration.md).

#### **Tracking Page Views**

You have the flexibility to choose between automated and manual page view tracking. Both methods are compatible with `react-router-dom`.

**Automated Tracking**

Enable automated page view tracking with `enableAutoPageView()`:

```javascript
// App.js / index.js
w3aSDK.enableAutoPageView();
```

**Manual Tracking**

To manually track page views, use the `pageView()` API:

```javascript
// File: App.js / index.js
import React from "react";
import { useLocation } from "react-router-dom";
import { w3aSDK } from "@web3acquire/w3a";

export const page = () => {

  let location = useLocation();
  
  React.useEffect(() => {
    w3aSDK.pageView();
  }, [location]);
  
  // ... rest of the component
}
```

#### **Tracking Wallet Connections**

Monitor wallet connections to your website using the `w3aSDK.walletConnect` API:

```javascript
import { w3aSDK } from "@web3acquire/w3a";

w3aSDK.walletConnect({
    walletAddress: "0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe",
    chainId: "0x1", // Optional: chainId of the connected wallet
    walletProvider: "MetaMask" // Optional: wallet provider of the connected wallet
});
```

Here's an integration example with WalletConnect:

```javascript
// Code snippet integrating with Wallet Connect
import { useAccount, useNetwork } from "wagmi";
import { w3aSDK } from "@web3acquire/w3a";

// -- snip --

export const WalletLogin = () => {
 const { address, connector } = useAccount();
 const { chain } = useNetwork();
 
 React.useEffect(() => {
    w3aSDK.walletConnect({
      walletAddress: address,
      chainId: chain?.id,
      walletProvider: connector?.name,
    });
 }, [address, chain]);
 
 // ... rest of the component
}
```

#### **Final Steps**

You're now set up and ready to track! If you wish to monitor other events, check out the further documentation. To ensure everything functions correctly before moving to production, [verify here](/product-docs/technical-guides/react-spa/verify.md).&#x20;