> ## Documentation Index > Fetch the complete documentation index at: https://outlit-codex-platform-actions-create-update-cli.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Script Tag Integration > The fastest way to add tracking to any website ## Overview The script tag integration is the simplest way to add Outlit tracking to your website. It works on any site—static HTML, WordPress, Webflow, or any other platform. ## Installation Add this snippet before the closing `` tag. This creates a lightweight stub that queues calls until the full SDK loads, ensuring zero impact on page load speed: ```html theme={null} ``` This snippet is safe to place anywhere on the page, including in the ``. Calls to `outlit.track()` or `outlit.user.identify()` will be queued and processed once the SDK loads. ### Simple Version If you prefer a cleaner script tag and don't need to call tracking methods before the SDK loads: ```html theme={null} ``` Your organization's public key. Find it in [Settings → Website Tracking](https://app.outlit.ai/settings/workspace/tracking). Custom API host. Defaults to `https://app.outlit.ai`. Set to `"false"` to disable automatic pageview tracking. Set to `"false"` to disable automatic form capture. Set to `"false"` to disable automatic tracking on load. Use this when you need to wait for user consent before tracking. Call `window.outlit.enableTracking()` after consent is obtained. Set to `"false"` to disable automatic user identification from form submissions. When enabled (default), submitting a form with an email field automatically calls `identify()` with the extracted email and name. See [Auto-Identify](/concepts/identity-resolution#auto-identify) for details. Set to `"false"` to disable automatic tracking of calendar bookings from Cal.com and Calendly embeds. See [Calendar Embed Tracking](/tracking/browser/calendar-embeds) for details. Set to `"false"` to disable engagement tracking (active time on page). When enabled (default), emits engagement events on page exit and navigation capturing how long users actively engaged with each page. Idle timeout in milliseconds for engagement tracking. After this period of no user interaction, the user is considered idle and active time stops accumulating. Default is `"30000"` (30 seconds). ## Consent Management If you're using a consent management platform (CMP) or need to wait for user consent before tracking, pass `false` as the last parameter to disable auto-tracking: ```html theme={null} ``` Or with the simple script tag: ```html theme={null} ``` ### With Popular CMPs ```javascript theme={null} window.addEventListener('CookiebotOnAccept', function() { // Check for marketing or analytics consent if (Cookiebot.consent.marketing || Cookiebot.consent.analytics) { window.outlit.enableTracking() } }) ``` ```javascript theme={null} // OneTrust calls this when consent changes function OptanonWrapper() { // C0002 = Analytics, C0004 = Targeting/Marketing if (OnetrustActiveGroups.includes('C0004') || OnetrustActiveGroups.includes('C0002')) { window.outlit.enableTracking() } } ``` ```javascript theme={null} document.getElementById('accept-cookies').addEventListener('click', function() { window.outlit.enableTracking() }) document.getElementById('decline-cookies').addEventListener('click', function() { window.outlit.disableTracking() }) // Check on page load — consent state is persisted automatically by the SDK if (window.outlit.isTrackingEnabled()) { console.log('Tracking is active') } ``` ### Check Tracking Status ```javascript theme={null} // Check if tracking is currently enabled if (window.outlit.isTrackingEnabled()) { console.log('Tracking is active') } ``` ## Automatic Tracking Once installed, the tracker automatically captures: ### Pageviews Every page navigation is tracked, including: * Full URL and path * Page title * Referrer * UTM parameters (`utm_source`, `utm_medium`, `utm_campaign`, `utm_term`, `utm_content`) For single-page applications, the tracker automatically detects navigation via `pushState`, `replaceState`, and `popstate` events. ### Form Submissions When a form is submitted, the tracker captures: * Form ID or name * All field values (except sensitive fields) **Automatically Removed Fields:** * Passwords (`password`, `passwd`, `pwd`) * Credit card numbers (`credit_card`, `cc_number`, `cvv`) * Social Security numbers (`ssn`, `social_security`) * API keys and tokens (`api_key`, `token`, `secret`) ## Manual Tracking Use the global `window.outlit` object to track custom events: ### Track Custom Events ```javascript theme={null} window.outlit.track('button_clicked', { buttonId: 'cta-hero', page: '/pricing' }) window.outlit.track('video_played', { videoId: 'demo-video', duration: 120 }) ``` The name of the event. Use snake\_case for consistency. Optional properties to attach to the event. ### Identify Visitors When a visitor provides their email (signup, login, contact form), identify them: ```javascript theme={null} window.outlit.identify({ email: 'jane@example.com', userId: 'usr_12345', // optional traits: { name: 'Jane Doe', company: 'Acme Inc', plan: 'enterprise' } }) ``` The visitor's email address. Your internal user ID (from Supabase, Auth0, Firebase, etc.). Additional properties about the user. At least one of `email` or `userId` should be provided. Without identity information, the call has no effect. ### Set User Identity For SPA applications where you know the user's identity after authentication: ```javascript theme={null} // After user logs in window.outlit.setUser({ email: 'jane@example.com', userId: 'usr_12345', traits: { name: 'Jane Doe', plan: 'pro' } }) ``` `setUser()` can be called before tracking is enabled (with `data-auto-track="false"`). The identity is queued and applied when `enableTracking()` is called. ### Clear User Identity Call when the user logs out: ```javascript theme={null} window.outlit.clearUser() ``` ### Activation Mark the current user as activated after they complete your product's activation milestone. The user must be identified first via `setUser()` or `identify()`. ```javascript theme={null} // After user completes onboarding window.outlit.user.activate({ flow: 'onboarding' }) ``` Use `track()` for product activity. Outlit handles engagement and inactivity automatically; see [Customer Journey](/concepts/customer-journey#automatic-engagement-and-inactivity). Account billing status (`paid`, `churned`, `trialing`) is tracked separately at the account level. If you've connected Stripe, this is handled automatically. For manual billing tracking, see [Stages & Billing](/concepts/customer-journey). ### Get Visitor ID Access the current visitor's ID (useful for server-side correlation): ```javascript theme={null} const visitorId = window.outlit.getVisitorId() // Returns: "a1b2c3d4-e5f6-7890-abcd-ef1234567890" ``` ## Queued Commands The IIFE snippet creates stub methods that queue all tracking calls until the SDK fully loads. This means you can call `outlit.track()`, `outlit.identify()`, or any other method immediately—even in inline scripts before the SDK has finished loading: ```html theme={null} ``` ## Event Batching For performance, events are batched and sent: * Every 5 seconds (if there are pending events) * When the queue reaches 10 events * When the page is about to unload (using `sendBeacon`) ## Example: Full Integration ```html theme={null} My Website

Welcome

``` ## Troubleshooting 1. Check your public key is correct 2. Verify the domain is in your allowlist ([Settings → Website Tracking](https://app.outlit.ai/settings/workspace/tracking)) 3. Open DevTools → Network and check for errors in `/api/i/v1/` requests 4. Ensure the script loads without errors (check Console) 1. Form must have a submit event (not prevented with `e.preventDefault()` before capture) 2. Check if field names match the denylist (they may be filtered for security) 3. Ensure `data-track-forms` is not set to `"false"` The tracker automatically listens for `pushState`/`replaceState`. If using a custom router that doesn't use these, manually track: ```javascript theme={null} router.on('routeChange', (url) => { window.outlit.track('pageview', { url }); }); ``` ## Next Steps Use the npm package for more control First-class React support with hooks Track Cal.com and Calendly bookings