Open the AgentShield template in the GTM gallery (publisher: Know-That-Ai)
- Or in GTM: Templates → Tag Templates → Search Gallery, search AgentShield
Click Add to Workspace and accept the permissions prompt

Create the tag

Go to Tags → New → Tag Configuration → Custom → AgentShield Pixel
Enter your Project ID
Set Triggering to All Pages
Click Save, then Submit → Publish

Adding user identification (matching your internal user IDs in the dashboard)? See the full GTM + Next.js integration guide — it covers dataLayer variables and the user identification tag.

If your org disables Community Templates (fallback)

Use a Custom HTML tag instead:

Tags → New → Custom HTML, paste:

<script>
  (function () {
    var as = document.createElement('script');
    as.type = 'text/javascript';
    as.async = true;
    as.src = 'https://kya.vouched.id/pixel.js';
    as.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(as, s);
  })();
</script>

Replace YOUR_PROJECT_ID, set Triggering to All Pages, Save, Submit → Publish

The Custom HTML approach exposes only data-project-id and data-debug. The template gives you finer-grained controls (session timeout, batch size, fingerprinting toggle, DNT honoring) as configurable fields.

For developers adding the pixel directly to HTML.

Add this script in your HTML <head> section:

<!-- Detect Pixel -->
<script>
  (function () {
    var as = document.createElement('script');
    as.type = 'text/javascript';
    as.async = true;
    as.src = 'https://kya.vouched.id/pixel.js';
    as.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(as, s);
  })();
</script>
<!-- End Detect Pixel -->

Replace YOUR_PROJECT_ID with your actual Project ID.

For frameworks:

// Next.js (app/layout.tsx)
import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://kya.vouched.id/pixel.js"
          data-project-id={process.env.NEXT_PUBLIC_CHECKPOINT_PROJECT_ID}
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Using a plugin (no code needed):

Install the "Insert Headers and Footers" plugin (or similar)
Go to Settings → Insert Headers and Footers
In the Footer section, paste:

<!-- Detect Pixel -->
<script>
  (function () {
    var as = document.createElement('script');
    as.type = 'text/javascript';
    as.async = true;
    as.src = 'https://kya.vouched.id/pixel.js';
    as.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(as, s);
  })();
</script>
<!-- End Detect Pixel -->

Replace YOUR_PROJECT_ID with your actual Project ID
Click Save

Using theme editor:

Go to Appearance → Theme File Editor
Select header.php (or add to <head> section)
Add the script in the <head> section
Click Update File

Go to Online Store → Themes
Click Actions → Edit code
Open theme.liquid
Find the closing </body> tag
Add the following just before it:

<!-- Detect Pixel -->
<script>
  (function () {
    var as = document.createElement('script');
    as.type = 'text/javascript';
    as.async = true;
    as.src = 'https://kya.vouched.id/pixel.js';
    as.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(as, s);
  })();
</script>
<!-- End Detect Pixel -->

Replace YOUR_PROJECT_ID with your actual Project ID
Click Save

Verify Installation

Visit your website in a new browser tab
Open browser DevTools (F12 or Cmd+Shift+I)
Go to the Network tab
Filter by "kya" or "pixel"
Refresh the page
You should see a request to kya.vouched.id/pixel.js

If you see a 200 OK response, the Pixel is working.

View Your First Detections

Return to your Checkpoint dashboard
Select your project
Go to Analytics
Wait up to 60 seconds for data to appear

You'll see:

Detection breakdown by class (human, ai_agent, bot)
Traffic timeline with detection events
Top agents identified on your site

Verify It's Working

Quick Check

Open your browser console and run:

// Check if the pixel loaded
document.querySelector('script[src*="kya.vouched.id"]') ? 'Pixel loaded!' : 'Pixel not found';

Test with a Bot User-Agent

Use curl to simulate a bot request:

curl -A "Mozilla/5.0 (compatible; GPTBot/1.0; +https://openai.com/gptbot)" \
  "https://yoursite.com"

Then check your dashboard — you should see an ai_agent detection within seconds.

Troubleshooting

Pixel Not Loading

Symptom	Cause	Fix
No network request	Script not added	Re-check installation steps
404 error	Wrong Project ID	Copy ID from dashboard again
Blocked request	Ad blocker	Disable ad blocker or use server-side
CSP error	Content Security Policy	Add `kya.vouched.id` to `script-src`

No Detections in Dashboard

Wait 60 seconds — Data takes a moment to appear
Check Project ID — Must match exactly
Verify GTM published — Unpublished changes won't work
Check for caching — Clear CDN cache if applicable

Content Security Policy (CSP)

If your site uses CSP, add this to your script-src directive:

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

What You Learned

How to create a Checkpoint project
How to install the Marketing Pixel via GTM, direct install, WordPress, or Shopify
How to verify the Pixel is working
How to view detection data in the dashboard

Next Steps

Now that you have detection running, consider:

Goal	Next Cookbook
Need more detection signals	Beacon Integration
Want to block detected agents	Gateway Setup
Need server-side detection	Middleware Detection
Integrate with Google Analytics	GA4 Integration

Detect: Pixel Quick Start

Goal

Prerequisites

Time Estimate

Steps

Create a Checkpoint Project

Get Your Project ID

Install the Pixel

Install the AgentShield template (one-time per container)