# Installation (/docs/getting-started/installation)
# Installation [#installation]
To start using Ucoder Insight, you need to install the SDK in your project. We provide dedicated support for modern frameworks and a global CDN for vanilla JavaScript.
## Step 1: Create Your First Project [#step-1-create-your-first-project]
1. Log in to your [Ucoder Insight Dashboard](/login).
2. Click `Create Project` and fill in the required details (project name, website URL, etc).
3. You'll be taken to `Settings` > `General` > `API Key`, where you'll find your tracking ID.
## Step 2: Get Your API Key [#step-2-get-your-api-key]
1. Go to `Dashboard` > `Select Project` > `Settings` > `General` > `Public Tracking Id`.
2. Copy your Public Tracking ID — you'll need it during installation.
The API key is designed to be public and is safe to expose in client-side
code. You do not need to hide it behind a server. Your API secret does not
show publicly. Read more about [keys and secrets in
Configuration](/docs/getting-started/configuration#general-settings).
***
## Step 3: Verify Domain Ownership [#step-3-verify-domain-ownership]
Before integrating Ucoder Insight, ensure you verify your domain ownership in the dashboard. This step is crucial for accurate data tracking and security. You can verify your domain by adding a DNS record or a script tag. See the [Domain Verification Guide](/docs/getting-started/ownership-verification) for detailed instructions.
***
## Step 4: Choose Your Integration Framework [#step-4-choose-your-integration-framework]
We officially support **Next.js, React, Vite, and Vanilla JS**. Support for other frameworks is on our roadmap.
```bash
npm install ucoder-insight
```
```bash
pnpm add ucoder-insight
```
Works with both **App Router** (Next.js 13+) and **Pages Router**.
**App Router — `app/analytics.tsx`:**
```javascript
"use client"; // Required for Next.js App Router
import { useEffect } from "react";
import { initUcoderInsight } from "ucoder-insight";
export default function Analytics() {
useEffect(() => {
initUcoderInsight("YOUR_PUBLIC_TRACKING_ID", {
// apiUrl: "Your_Custom_Backend_URL", // for custom backend
// debug: true, // logs all events to console, no backend call
});
}, []);
return null;
}
```
Then import it into your root `app/layout.tsx`:
```javascript
import Analytics from "./analytics";
export default function RootLayout({ children }) {
return (
{children}
);
}
```
**Pages Router — `pages/_app.tsx`:**
```javascript
import { useEffect } from "react";
import { initUcoderInsight } from "ucoder-insight";
export default function App({ Component, pageProps }) {
useEffect(() => {
initUcoderInsight("YOUR_PUBLIC_TRACKING_ID");
}, []);
return ;
}
```
Add this to your root component, so it initializes once when your app loads.
```javascript title="App.jsx"
import { useEffect } from "react";
import { initUcoderInsight } from "ucoder-insight";
function App() {
useEffect(() => {
initUcoderInsight("YOUR_PUBLIC_TRACKING_ID", {
// apiUrl: "Your_Custom_Backend_URL",
// debug: true,
});
}, []);
return ;
}
export default App;
```
Add this to your entry file, before rendering your app.
```javascript title="main.jsx"
import { initUcoderInsight } from "ucoder-insight";
initUcoderInsight("YOUR_PUBLIC_TRACKING_ID", {
// apiUrl: "Your_Custom_Backend_URL",
// debug: true,
});
// ...rest of your app render code
```
Use our global CDN — no build step required.
```html title="index.html"
```
Now that you have installed and initialized Ucoder Insight, The SDK will [automatically track](docs/analytics/overview#auto-tracking) page views, performance metrics, and errors . You can also send custom events to capture specific user interactions. See [Custom Events](/docs/analytics/custom-events) for more details.