# Configuration (/docs/getting-started/configuration)





# Configuration [#configuration]

In this section, we will explore the various configuration options available in Ucoder Insight. Proper configuration is essential to ensure that you get the most out of the tool and that it fits seamlessly into your development workflow.

## General Settings [#general-settings]

The general settings allow you to customize the overall behavior of Ucoder Insight. This includes options for data collection, performance optimization, and user interface preferences.

### API key [#api-key]

To use Ucoder Insight, you need to obtain an API key from the [Ucoder Dashboard](https://insights.ucoder.in). This key is required to authenticate your requests and access the features of Ucoder Insight. Here 3 types of API keys are available:

* **Public Key:** This key is used for client-side applications and has limited permissions. It is safe to expose this key in your frontend code.
* **Secret Key:** This key is used for server-side applications and has full permissions. It should be kept secure and never exposed in client-side code. It is needed for features that require access to sensitive data or actions, such as managing projects or accessing detailed analytics.
* **Ownership Key:** This key is used for identify the owner of the project. It is used for features that require ownership verification, such as transferring project ownership or accessing certain administrative features.

### Options Reference [#options-reference]

Here is a reference of the available configuration options in Ucoder Insight:

| Option Name        | Type                   | Default Value | Description                             |
| :----------------- | :--------------------- | :------------ | :-------------------------------------- |
| `notFoundPath`     | `string` \| `string[]` | `"/404"`      | This is not track your not found path   |
| `notTrackPath`     | `string` \| `string[]` | `[]`          | The paths to exclude from tracking.     |
| `debug`            | `boolean`              | `false`       | Enable debug mode for detailed logging. |
| `apiUrl`           | `string`               | `undefined`   | Your custom backend URL.                |
| `trackScroll`      | `false`                | `false`       | Disable scroll tracking.                |
| `trackPerformance` | `false`                | `false`       | Disable performance tracking.           |

### `notFoundPath` [#notfoundpath]

* This option allows you to specify a path or an array of paths that should be used for redirecting users when a page is not found. By default, it is set to `"/404"`, which means that users will be redirected to the `/404` page when they encounter a 404 error. You can customize this path to fit your application's structure and design.

### `notTrackPath` [#nottrackpath]

* This option allows you to specify a path or an array of paths that should be excluded from tracking. By default, it is set to `[]`, which means that all paths will be tracked. You can customize this path to fit your application's structure and design. For example, if you have certain pages that you do not want to track for analytics purposes, you can add those paths to the `notTrackPath` option.

### `debug` [#debug]

* This option enables debug mode, which provides detailed logging of Ucoder Insight's operations. By default, it is set to `false`, meaning that debug mode is disabled. When you set this option to `true`, you will receive more verbose logs in the console, which can be helpful for troubleshooting and understanding how Ucoder Insight is functioning within your application. But consider using this option only in the development environment, as it may expose sensitive information in the logs.
  <Callout type="warn" title="Note">
    Enable this mode no api call will be sent to our server, all data will be
    logged in the console. It is useful for development and debugging purposes,
    but it will not provide accurate data for analytics and insights.
  </Callout>

### `trackScroll` [#trackscroll]

* This option allows you to enable or disable scroll tracking. By default, it is set to `false`, meaning that scroll tracking is disabled. When it is set `false`, Ucoder Insight will not track user scroll events on your website. Only pro plan users can use this to locally opt OUT of a feature it doesn't need. The type is intentionally `false` (not `boolean`) — trying to pass `true` is a compile-time error, since "forcing on" is never a valid local override.

### `trackPerformance` [#trackperformance]

* This option allows you to enable or disable performance tracking. By default, it is set to `false`, meaning that performance tracking is disabled. When it is set `false`, Ucoder Insight will not track performance metrics such as page load times and resource usage. Only pro plan users can use this to locally opt OUT of a feature it doesn't need. The type is intentionally `false` (not `boolean`) — trying to pass `true` is a compile-time error, since "forcing on" is never a valid local override.

### `apiUrl` [#apiurl]

* Optional custom API URL for sending tracking data. If not provided, the default API endpoint will be used. This can be useful for testing or if you have a custom backend setup. But project verification and tracking configuration will be done from the default backend URL. This ensures that sensitive configuration data is not exposed to custom backend URLs, enhancing security and integrity of the tracking setup.

### Example Usage [#example-usage]

Here is an example of how to configure Ucoder Insight with the `notFoundPath` and `notTrackPath` options:

<Tabs items="['Next.js', 'React', 'Vanilla JS']">
  <Tab value="Next.js">
    <div className="flex items-center gap-2 mb-4 text-primary font-semibold">
      <Code2 className="h-5 w-5" />

      <span>
        Next.js Configuration
      </span>
    </div>

    <p className="text-sm text-muted-foreground mb-4">
      Pass options via the 

      `config`

       prop in 

      `initUcoderInsight`

      .
    </p>

    ```tsx title="app/analysis.tsx"
    "use client";
    import { useEffect } from "react";  
    import { initUcoderInsight } from 'ucoder-insight';

    export default function Analytics() {
      useEffect(() => {
        initUcoderInsight("YOUR_PUBLIC_API_KEY", {
          notFoundPath: '/404',
          notTrackPath: ['/privacy', '/terms','/admin/*'],
          debug: true, // Enable testing mode to log events in console instead of sending to API
          apiUrl: '[https://custom-api.yourdomain.com/track](https://custom-api.yourdomain.com/track)' 
          // Optional custom API endpoint for testing or custom backend
          trackPerformance: false, // PRO plan users can use this to locally opt OUT of a feature it doesn't need. The type is intentionally `false` (not `boolean`) — trying to pass `true` is a compile-time error, since "forcing on" is never a valid local override.
          trackScroll: false // PRO plan users can use this to locally opt OUT of a feature it doesn't need. The type is intentionally `false` (not `boolean`) — trying to pass `true` is a compile-time error, since "forcing on" is never a valid local override.
        });
      }, []);

      return null;
    }
    ```
  </Tab>

  <Tab value="React">
    <div className="flex items-center gap-2 mb-4 text-primary font-semibold">
      <Code2 className="h-5 w-5" />

      <span>
        React Configuration
      </span>
    </div>

    <p className="text-sm text-muted-foreground mb-4">
      Set up Ucoder in your React application.
    </p>

    ```tsx title="app/analysis.tsx"
    import { useEffect } from "react";
    import { initUcoderInsight } from 'ucoder-insight';

    export default function Analytics() {
      useEffect(() => {
        initUcoderInsight("YOUR_PUBLIC_API_KEY", {
          notFoundPath: '/404',
          notTrackPath: ['/privacy', '/terms','/admin/*'],
          debug: true, // Enable testing mode to log events in console instead of sending to API
          apiUrl: '[https://custom-api.yourdomain.com/track](https://custom-api.yourdomain.com/track)'
          // Optional custom API endpoint for testing or custom backend
          trackPerformance: false, // PRO plan users can use this to locally opt OUT of a feature it doesn't need. The type is intentionally `false` (not `boolean`) — trying to pass `true` is a compile-time error, since "forcing on" is never a valid local override.
          trackScroll: false // PRO plan users can use this to locally opt OUT of a feature it doesn't need. The type is intentionally `false` (not `boolean`) — trying to pass `true` is a compile-time error, since "forcing on" is never a valid local override.
        });
      }, []);

      return null;
    }
    ```
  </Tab>

  <Tab value="Vanilla JS">
    <div className="flex items-center gap-2 mb-4 text-primary font-semibold">
      <Code2 className="h-5 w-5" />

      <span>
        Vanilla JavaScript Configuration
      </span>
    </div>

    <p className="text-sm text-muted-foreground mb-4">
      Initialize Ucoder directly in your HTML.
    </p>

    ```javascript title="index.html"
    window.ucoderInsight.init("YOUR_API_KEY", {
      // Optional: Custom 404 path. Supports wildcards e.g. 'notfound/*'
      // Default is 'autodetect'
      notFoundPath: '/notFoundPage',

      // Optional: Paths to ignore.
      // '/admin/*' will ignore all pages starting with /admin
      notTrackPath: ['/privacy', '/terms', '/admin/*']
      trackPerformance: false, // PRO plan users can use this to locally opt OUT of a feature it doesn't need. The type is intentionally `false` (not `boolean`) — trying to pass `true` is a compile-time error, since "forcing on" is never a valid local override.
      trackScroll: false // PRO plan users can use this to locally opt OUT of a feature it doesn't need. The type is intentionally `false` (not `boolean`) — trying to pass `true` is a compile-time error, since "forcing on" is never a valid local override.
    });
    ```

    Be sure to include the initialization script after the Ucoder Insight script tag in your HTML file.
  </Tab>
</Tabs>

***

## Element-Level Tracking Control (Not Track Attribute) [#element-level-tracking-control-not-track-attribute]

To exclude specific elements from tracking, add the `data-uca-track="false"` attribute to any HTML element. This is useful for sensitive information or elements that do not require analytics.

```html
<button data-uca-track="false" class="px-4 py-2 bg-red-500 text-white rounded">
  This content will not be tracked by Ucoder Insight.
</button>
```

You can also use `data-uca-track="true"` to force tracking on specific elements even if they are within a not track path.

***

### Input Tracking Policy [#input-tracking-policy]

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6">
  <div className="border rounded-lg p-4 bg-red-50/50 border-red-200 dark:bg-red-950/10 dark:border-red-900/30">
    <div className="flex items-center gap-2 font-semibold text-red-600 dark:text-red-400 mb-3">
      <Lock className="w-4 h-4" />

      Automatically Blocked Inputs
    </div>

    <ul className="space-y-2 text-sm text-muted-foreground">
      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="password"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="email"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="tel"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="text"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="number"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="search"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="url"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="date"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="time"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="datetime-local"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="month"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="week"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="color"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="range"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="file"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />

        <code className="text-xs">
          type="hidden"
        </code>
      </li>
    </ul>
  </div>

  <div className="border rounded-lg p-4 bg-emerald-50/50 border-emerald-200 dark:bg-emerald-950/10 dark:border-emerald-900/30">
    <div className="flex items-center gap-2 font-semibold text-emerald-600 dark:text-emerald-400 mb-3">
      <CheckCircle2 className="w-4 h-4" />

      Tracked Input Types
    </div>

    <ul className="space-y-2 text-sm text-muted-foreground">
      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />

        <code className="text-xs">
          type="checkbox"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />

        <code className="text-xs">
          type="radio"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />

        <code className="text-xs">
          type="submit"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />

        <code className="text-xs">
          type="button"
        </code>
      </li>

      <li className="flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />

        <code className="text-xs">
          type="reset"
        </code>
      </li>
    </ul>

    <div className="mt-4 pt-4 border-t border-emerald-200 dark:border-emerald-900/30">
      <div className="text-xs text-muted-foreground">
        These input types are safe to track as they don't contain sensitive user data.
      </div>
    </div>
  </div>
</div>

<Callout type="info" title="Privacy Assurance" icon="<Shield className=&#x22;h-4 w-4&#x22; />">
  Our "Privacy by Default" engine ensures that sensitive user data remains on
  the client device and is never sent to our servers. You only need to use
  `data-uca-track="false"` for non-sensitive UI elements you wish to ignore.
</Callout>