Overview

The Checkpoint Marketing Pixel is a lightweight, no-code detection snippet that identifies AI agents and bots visiting your website. It loads asynchronously, has zero impact on page performance, and integrates with popular tag management systems.

The Pixel is ideal for:

Marketing teams who want bot traffic visibility without developer involvement
Analytics teams who need to separate real users from automated traffic
Content teams who want to monitor AI scraping activity

Installation

Step 1: Import the Template

Log into Google Tag Manager
Navigate to Templates → Tag Templates
Click Search Gallery
Search for "Checkpoint" (or "AgentShield")
Click Add to Workspace

Step 2: Create a Tag

Go to Tags → New
Click Tag Configuration → select the Checkpoint template
Enter your Project ID (found in the dashboard under Deployment)
Set the trigger to All Pages (or customize)
Click Save

Step 3: Publish

Click Submit in GTM
Add a version name and description
Click Publish

The Pixel is now live. Detections will appear in your Checkpoint dashboard within seconds.

Add the following script tag before the closing </body> tag:

<script>
  (function () {
    var s = document.createElement('script');
    s.src = 'https://kya.vouched.id/api/v1/pixel?projectId=YOUR_PROJECT_ID';
    s.async = true;
    document.body.appendChild(s);
  })();
</script>

Replace YOUR_PROJECT_ID with your project ID from the dashboard.

Add the pixel to your layout or page using the Script component:

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src={`https://kya.vouched.id/api/v1/pixel?projectId=${process.env.NEXT_PUBLIC_CHECKPOINT_PROJECT_ID}`}
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

For server-side detection in Next.js, consider using the Middleware instead. The Pixel is client-side only.

How It Works

The Pixel script loads asynchronously after your page renders
It collects detection signals (user agent, headers, behavior)
Signals are sent to the Checkpoint detection API
The result (classification + confidence) is logged to your project
View results in the dashboard

The Pixel never blocks page rendering and adds no perceptible latency to the user experience.

Configuration

Project ID

Every Pixel installation requires a Project ID. Find yours in the Checkpoint dashboard:

Navigate to your project
Click the Deployment tab
Copy the Project ID

Custom Events

Send custom events alongside detection data for richer analytics:

<script>
  window.checkpointPixel = window.checkpointPixel || [];
  window.checkpointPixel.push({
    event: 'form_submit',
    metadata: {
      form_id: 'contact',
      page: '/contact',
    },
  });
</script>

Analytics Integration

Google Analytics 4

When installed via GTM, the Pixel can push detection data to GA4 as custom events:

checkpoint_detection — Fired on every detection
Custom dimensions: detection_class, confidence, agent_name

This enables building GA4 audiences that exclude bot traffic and measuring true conversion rates.

Pixel vs Beacon

Feature	Pixel	Beacon
Installation	Script tag / GTM	npm package
Code required	None	Yes
Detection depth	Basic	Advanced
Event tracking	Limited	Full
WebWorker support	No	Yes
Bundle size	~2KB	~41KB gzipped
Best for	Marketing, analytics	Application integration

For more advanced client-side detection with full event tracking, see the JavaScript Beacon.

Troubleshooting

Pixel Not Loading

Check that the Project ID is correct
Verify no ad blockers or content security policies are blocking the script
Check the browser console for errors

No Detections in Dashboard

Confirm the Pixel is loading (check Network tab in browser devtools)
Verify the Project ID matches your dashboard project
Check that GTM is published (if using GTM)

Content Security Policy

If your site uses CSP headers, add the Pixel domain to your script-src directive:

Content-Security-Policy: script-src 'self' https://kya.vouched.id;

Next Steps

JavaScript Beacon — Advanced client-side detection
Dashboard Analytics — View your detection data
Enforce — Add enforcement to your detection

Marketing Pixel

On this page