# Auto Tracking (/docs/events/auto_track)





# Auto Tracking Concepts [#auto-tracking-concepts]

Ucoder Insight's **Auto-Tracking Engine** is designed to capture the most important user interactions without you needing to write extra code.

Here is a detailed breakdown of what each tracking module actually does and why it matters.

***

## 1. Page View Tracking [#1-page-view-tracking]

**Config:** `trackPageViews`

<div className="flex items-start gap-4 mb-4">
  <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
    <Eye className="h-6 w-6 text-blue-600 dark:text-blue-400" />
  </div>

  <div>
    <h3 className="text-lg font-semibold mt-0">
      What is a Page View?
    </h3>

    <div className="text-muted-foreground mt-2">
      A "Page View" is counted whenever a user visits a specific URL on your website. It is the most fundamental metric to understand your traffic volume.
    </div>
  </div>
</div>

**How we handle SPAs (Single Page Apps):**
In modern frameworks like **Next.js** or **React**, the page doesn't actually reload when you switch routes. Standard analytics tools often miss this.

Ucoder Insight automatically listens to your browser's History API (`pushState`) to detect these "virtual" navigations, ensuring your view counts are accurate even in complex apps.

***

## 2. Click Tracking [#2-click-tracking]

**Config:** `trackClicks`

<div className="flex items-start gap-4 mb-4">
  <div className="p-2 bg-purple-100 dark:bg-purple-900 rounded-lg">
    <MousePointerClick className="h-6 w-6 text-purple-600 dark:text-purple-400" />
  </div>

  <div>
    <h3 className="text-lg font-semibold mt-0">
      What is Click Tracking?
    </h3>

    <div className="text-muted-foreground mt-2">
      Click tracking helps you measure user **intent**. It tells you which buttons, links, or features users are actually interacting with.
    </div>
  </div>
</div>

**Smart Filtering:**
We don't track random clicks on blank spaces. Our engine specifically looks for interactive elements:

* `<button>` tags (e.g., "Sign Up", "Buy Now")
* `<a>` links (Navigation)
* Elements with `role="button"`

***

## 3. Scroll Depth Tracking [#3-scroll-depth-tracking]

**Config:** `trackScroll`

<div className="flex items-start gap-4 mb-4">
  <div className="p-2 bg-orange-100 dark:bg-orange-900 rounded-lg">
    <ScrollText className="h-6 w-6 text-orange-600 dark:text-orange-400" />
  </div>

  <div>
    <h3 className="text-lg font-semibold mt-0">
      What is Scroll Depth?
    </h3>

    <div className="text-muted-foreground mt-2">
      Page views tell you *who* visited, but Scroll Depth tells you *if they actually read*. This metric tracks how far down a page a user has scrolled.
    </div>
  </div>
</div>

**Use Cases:**

* **Blogs:** Did users read the full article or drop off after the intro?
* **Landing Pages:** Are users seeing your pricing section at the bottom?

We capture events at &#x2A;*25%, 50%, 75%, and 90%** of the page height.

***

## 4. Error Tracking [#4-error-tracking]

**Config:** `trackErrors`

<div className="flex items-start gap-4 mb-4">
  <div className="p-2 bg-red-100 dark:bg-red-900 rounded-lg">
    <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
  </div>

  <div>
    <h3 className="text-lg font-semibold mt-0">
      Why track Errors?
    </h3>

    <div className="text-muted-foreground mt-2">
      JavaScript errors can break your site silently. Error tracking acts as a "Black Box" recorder, capturing crashes that happen on your user's device so you can fix them.
    </div>
  </div>
</div>

**What we capture:**

* Broken features (e.g., "Add to Cart" button not working).
* Failed API calls (Network errors).
* Missing images or assets.

***

## 5. Performance (Web Vitals) [#5-performance-web-vitals]

**Config:** `trackPerformance`

<div className="flex items-start gap-4 mb-4">
  <div className="p-2 bg-yellow-100 dark:bg-yellow-900 rounded-lg">
    <Zap className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
  </div>

  <div>
    <h3 className="text-lg font-semibold mt-0">
      What are Core Web Vitals?
    </h3>

    <div className="text-muted-foreground mt-2">
      These are speed metrics defined by Google that directly impact your SEO ranking and User Experience.
    </div>
  </div>
</div>

**Key Metrics:**

1. **LCP (Largest Contentful Paint):** How long it takes for the main content to load.
2. **FID (First Input Delay):** How responsive the site is when clicked.
3. **CLS (Cumulative Layout Shift):** Does the layout jump around unexpectedly?

<Callout type="info">
  Enabling Performance tracking helps you identify if your site is slow for specific users (e.g., mobile users on 3G networks).
</Callout>