# Installations (/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.

## Create your first project in Ucoder Insight Dashboard [#create-your-first-project-in-ucoder-insight-dashboard]

1. Log in to your [Ucoder Insight Dashboard](/login).
2. Click on `Create Project` and fill in the required details (`project name`, `website URL`, etc.).
3. Once your project is created, you'll be taken to the `Integration` > `API Key` page where you can find your API key and other integration details.

<Image src="https://res.cloudinary.com/dqh01bl7y/image/upload/f_auto/q_auto/v1773196146/createproject_hcmy2u.png" alt="Create Project" width="1200" height="675" className="w-full h-auto mt-6 mb-8 border rounded-lg object-cover" />

## Get Your API Key [#get-your-api-key]

1. Log in to your [Ucoder Insight Dashboard](/login).
2. Navigate to your project settings. `Dashboard` > `Select Project` > `Integrations` > `API Key` > `Credentials` > `Public Tracking Id`.
3. Copy your public Tracking ID; you'll need it during installation.

<Callout type="info" title="Note">
  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. But your api secret does not show publicly. Read more [about our all key and secret in our configuration](/docs/getting-started/configuration#general-settings) documentation.
</Callout>

<Image src="https://res.cloudinary.com/dqh01bl7y/image/upload/f_auto/q_auto/v1773194821/api-key_oqyv98.png" alt="Get API Key" width="1200" height="675" className="w-full h-auto mt-6 mb-8 border rounded-lg object-cover" />

***

## Verify Domain Ownership [#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 add a script tag. See [Ownership Verification Guide](/docs/getting-started/ownership-verification) for detailed instructions.

***

## Choose Your Integration Framework Method [#choose-your-integration-framework-method]

We support all modern frameworks, including React, Vue, Angular, Next.js, and more. You can also use our global CDN for vanilla JavaScript projects. Choose the method that best fits your project setup.

<Tabs items="['Next.js / React.js / Vue.js', 'Vanilla JS']">
  <Tab value="Next.js / React.js / Vue.js">
    **Next.js Installation App Router Support (Next.js 13+)**

    Next.js is a powerful React framework that enables server-side rendering and static site generation. To integrate Ucoder Insight with your Next.js application, follow these steps:

    **1. Install the Ucoder Insight SDK:**

    ```bash title="Terminal"
        npm install ucoder-insight
    ```

    **2. Add the following code to your `lib/ucoder-insight.js` or `lib/ucoder-insight.tsx` file to initialize the SDK:**

    ```javascript title="lib/ucoder-insight.js"
        // lib/ucoder-insight.js/ts
        "use client";  // Needed only for Next.js or SSR (Server Side Rendering)
        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, // log in your console all events, no backend call
            });
          }, []);

          return null;
        }
    ```
  </Tab>

  <Tab value="Vanilla JS">
    **Track performance and user engagement metrics.**

    To integrate Ucoder Insight with your vanilla JavaScript project, you can use our global CDN. Follow these steps:

    **1. Add the following script tag to your HTML file, replacing `YOUR_PUBLIC_TRACKING_ID` with your actual tracking ID:**

    ```html title="index.html"
        <script defer src="[https://cdn.jsdelivr.net/npm/ucoder-insight](https://cdn.jsdelivr.net/npm/ucoder-insight)"></script>
        <script>
          window.addEventListener('ucoderInsightReady', () => {
            // Ensure the SDK is fully loaded before initializing
            ucoderInsight.init("YOUR_PUBLIC_TRACKING_ID", { 
              // Optional configuration options
            });
          });
        </script>
    ```
  </Tab>
</Tabs>