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
- Log in to your Ucoder Insight Dashboard .
- Click on
Create Projectand fill in the required details (project name, website URL, etc.). - Once your project is created, you’ll be taken to the project overview page where you can find your API key and other integration details.
Get Your API Key
- Log in to your Ucoder Insight Dashboard .
- Navigate to your project settings.
Dashboard>Select Project>Integrations>API Key>Credentials>Public Tracking Id - Copy your public Tracking ID; you’ll need it during installation.
- 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 serect does not show publiclly. Read more about our security model here . read more about our all key and secret in our documentation.
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. Follow the istructions in the Ownership Verification Guide link. see Ownership Verification Guide for detailed instructions.
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.
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:
- Install the Ucoder Insight SDK:
npm install ucoder-insight- Add the following code to your
_app.jsor_app.tsxfile to initialize the SDK:
// lib/ucoder-insight.js/ts
import { initUcoderInsight }
from "ucoder-insight";
initUcoderInsight("YOUR_PUBLIC_TRACKING_ID",{
// Optional configuration options
});
return (
// your remain app code
);