Tag Your Website with an AI Coding Agent
Give an AI coding agent such as Claude Code, Cursor or Codex a prompt that installs Vendo Web Tracking and tags the events of your tracking plan.
Last reviewed September 23, 2026
An AI coding agent can add Vendo Web Tracking to your website code. It can also add the events of your tracking plan. This page gives you a prompt for the agent. The prompt contains all the instructions that the agent needs.
The agent must have access to the code of your website. Examples of agents are Claude Code, Cursor, Codex and GitHub Copilot.
Before You Start
- Create a tracking source. See the Quickstart.
- Copy the snippet of the tracking source.
- Write your tracking plan: the events to track, when each event happens, and its properties.
Start with a short tracking plan. Include the events that answer your business questions, for example signups, purchases and key feature use.
For tests, use a tracking source with the Staging or Development environment. If the tracking source has Allowed Domains, add the domain where the agent tests the site, for example localhost.
Use the Prompt
- Copy the prompt below.
- Replace
{{VENDO_SNIPPET}}with your snippet. - Replace
{{TRACKING_PLAN}}with your tracking plan. - Paste the prompt into your coding agent.
You can also give the agent the markdown address of this page: https://docs.vendodata.com/sources/tracking-sdk/ai-agent-setup.md. Give the agent your snippet and your tracking plan too.
The Prompt
You are adding Vendo Web Tracking to this website. Do every step below.
Reference docs: https://docs.vendodata.com/sources/tracking-sdk/javascript-sdk.md
INPUTS
- Vendo snippet:
{{VENDO_SNIPPET}}
- Tracking plan (event name, when it happens, properties):
{{TRACKING_PLAN}}
STEP 1. FIND THE FRAMEWORK
Read package.json and the project structure. Decide which one applies:
A. Next.js App Router (app/layout.tsx or app/layout.js)
B. Next.js Pages Router (pages/_app.tsx or pages/_app.js)
C. React single-page app with React Router
D. Vue with Vue Router (not Nuxt)
E. Nuxt
F. Server-rendered or static site, one page load per URL (plain HTML,
WordPress theme, Shopify theme, Django, Rails, Laravel, and similar)
If the site already has a Vendo snippet (search for "cdn.vendodata.com"),
replace it. Never leave 2 copies.
STEP 2. INSTALL THE SNIPPET
Keep the snippet exactly as given. Do not change the write key, the host or
the SDK URL. Do not install any npm package for Vendo.
In a TypeScript project, first create src/vendo.d.ts with exactly:
export {};
declare global { interface Window { vendo: (...args: unknown[]) => void } }
(Without the "export {};" line TypeScript ignores the declaration.) Then call
window.vendo(...) in TypeScript files.
A. Next.js App Router: in app/layout.tsx, inside <head>, add
import Script from 'next/script';
<Script id="vendo-tracking" strategy="afterInteractive">{`...snippet JavaScript...`}</Script>
Put only the JavaScript between <script> and </script> into the template
string. REMOVE the line vendo('page'); from it (step 3 sends page views).
B. Next.js Pages Router: same as A, in pages/_app.tsx, also without
vendo('page');
C. React Router: paste the snippet into <head> of index.html. Then delete
the one line vendo('page'); from it.
D. Vue Router: paste the snippet into <head> of index.html. Then delete the
one line vendo('page'); from it.
E. Nuxt: add the snippet JavaScript with app.head.script (innerHTML) in
nuxt.config and REMOVE the line vendo('page'); from it.
F. Other sites: paste the full snippet into the shared <head> template, so it
runs on every page. KEEP vendo('page');. Skip step 3.
STEP 3. PAGE VIEWS ON ROUTE CHANGES (A to E only)
Send exactly 1 page view per route, including the first one.
A. Create a client component and render it in app/layout.tsx inside
<Suspense fallback={null}>:
'use client';
import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';
export function VendoPageViews() {
const pathname = usePathname();
const search = useSearchParams().toString();
useEffect(() => {
const w = window as any;
w.vendo = w.vendo || function () {
(w.vendo.q = w.vendo.q || []).push(Array.prototype.slice.call(arguments));
};
w.vendo('page');
}, [pathname, search]);
return null;
}
B. In pages/_app.tsx: call window.vendo('page') in a useEffect on mount, and
in router.events.on('routeChangeComplete', ...). Remove the listener on
unmount.
C. In a component rendered INSIDE the router (for example App, when
main.tsx wraps it in <BrowserRouter>; useLocation() throws outside the
router): const location = useLocation(); and
useEffect(() => { window.vendo('page'); }, [location.pathname, location.search]);
D. router.afterEach(() => { window.vendo('page'); }); This also covers the
first route.
E. Create plugins/vendo.client.ts:
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('page:finish', () => { (window as any).vendo('page'); });
});
STEP 4. EVENTS FROM THE TRACKING PLAN
For each event in the tracking plan:
- Find the code that runs when the action SUCCEEDS (after the API call
returns OK, or on the confirmation page), not the button click.
- Add: vendo('track', 'Event Name', { property: value });
- Use the event and property names exactly as written in the plan.
- If a property value is not available in the code, use a constant only
when the value can have one value only (list it in the summary).
Otherwise list the property as not placed. Never invent values.
- Use the call form vendo('track', ...) everywhere. The method form
vendo.track(...) fails if it runs before the SDK loads.
If you cannot find where an event happens, do not guess. List it in your
summary.
STEP 5. IDENTIFY USERS
- Put identify and reset in the auth layer (the login, signup and logout
functions), not in buttons.
- After a successful signup or login, call
vendo('identify', userId, { traits }) with the stable user ID from the
database. Never use the email address as the user ID.
- For the same action, call identify BEFORE the track call, so the event
carries the user ID.
- Add only traits that the privacy policy allows, for example plan and
created_at.
- After logout, call vendo('reset').
STEP 6. CONSENT
Search the site for a consent tool (OneTrust, Usercentrics, CookiePro,
CookieFirst, Cookiebot, Osano, or a custom cookie banner).
- If there is one: add consent: { waitForConsent: true } to the options of
vendo('init', ...). The SDK reads OneTrust, Usercentrics, CookiePro and
CookieFirst by itself. For any other tool, call
vendo('setConsent', { analytics: true }) when the visitor accepts analytics,
and vendo('setConsent', { analytics: false }) when the visitor rejects.
- If there is none: change nothing and say so in your summary.
STEP 7. VERIFY
Run the site locally and load 2 different pages.
- In the browser network log, find POST requests to the host value in
vendo('init', ...) followed by /collect.
- Status 202: success.
- Status 401 with "invalid_write_key": the snippet was changed. Restore the
exact snippet from the inputs.
- Status 403 with "origin_not_allowed": the test domain is not in the
Allowed Domains of the tracking source. Do not change code. Tell me.
- No request: check that the snippet runs one time and that
cdn.vendodata.com/sdk/v1/vendo.js loads.
- Check that each page load or route change sends exactly 1 page event.
In development, React StrictMode runs effects 2 times, so the first page
view can show 2 times. This is expected. Do not add a guard. Count page
events in a production build (for example vite build && vite preview, or
next build && next start).
If you cannot run a browser: run the typecheck and the production build,
and confirm that the built HTML contains the snippet exactly 1 time. Say
which browser checks you could not do.
STEP 8. SUMMARY
Reply with:
1. The framework you found (A to F).
2. The files you changed.
3. Each tracking-plan event, with the file and function where you added it.
4. Events you could not place.
5. What you did for consent.
6. The verification results.
Do not log personal data to the console. Do not change any other analytics
tool on the site.Check the Result
- Review the changes that the agent made.
- Deploy the change to a test environment.
- Open the tracking source in Vendo.
- Click the Live Events tab.
- Do each action from your tracking plan on your website.
- Check that each event shows in Live Events with the correct properties.
When the test is correct, install the snippet of your Production tracking source before you publish the site.
Give the Agent Access to Your Vendo Data
The Vendo MCP server lets an agent read your Vendo data. The agent can then check the events that your website sends, and compare them with your tracking plan. See MCP Server.
Related
Last updated on