Script Tag Integration

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 </body> tag. This creates a lightweight stub that queues calls until the full SDK loads, ensuring zero impact on page load speed:

<script>
  !function(w,d,src,key,auto){
    if(w.outlit&&w.outlit._loaded)return;
    w.outlit=w.outlit||{_q:[]};
    ["init","track","identify","enableTracking","isTrackingEnabled","getVisitorId","setUser","clearUser","activate","engaged","paid","churned"].forEach(function(m){
      w.outlit[m]=w.outlit[m]||function(){w.outlit._q.push([m,[].slice.call(arguments)])};
    });
    var s=d.createElement("script");s.async=1;s.src=src;
    s.dataset.publicKey=key;if(auto!==undefined)s.dataset.autoTrack=auto;
    (d.body||d.head).appendChild(s);
  }(window,document,"https://cdn.outlit.ai/stable/outlit.js","pk_your_public_key");
</script>

This snippet is safe to place anywhere on the page, including in the <head>. Calls to outlit.track() or outlit.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:

<script
  src="https://cdn.outlit.ai/stable/outlit.js"
  data-public-key="pk_your_public_key"
  async
></script>

data-public-key

string

required

Your organization’s public key. Find it in Settings → Website Tracking.

data-api-host

string

Custom API host. Defaults to https://app.outlit.ai.

data-track-pageviews

string

Set to "false" to disable automatic pageview tracking.

data-track-forms

string

Set to "false" to disable automatic form capture.

data-auto-track

string

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.

data-auto-identify

string

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 for details.

data-track-calendar-embeds

string

Set to "false" to disable automatic tracking of calendar bookings from Cal.com and Calendly embeds. See Calendar Embed Tracking for details.

data-track-engagement

string

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.

data-idle-timeout

string

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).

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:

<script>
  !function(w,d,src,key,auto){
    if(w.outlit&&w.outlit._loaded)return;
    w.outlit=w.outlit||{_q:[]};
    ["init","track","identify","enableTracking","isTrackingEnabled","getVisitorId"].forEach(function(m){
      w.outlit[m]=w.outlit[m]||function(){w.outlit._q.push([m,[].slice.call(arguments)])};
    });
    var s=d.createElement("script");s.async=1;s.src=src;
    s.dataset.publicKey=key;if(auto!==undefined)s.dataset.autoTrack=auto;
    (d.body||d.head).appendChild(s);
  }(window,document,"https://cdn.outlit.ai/stable/outlit.js","pk_your_public_key",false);
</script>

<script>
  // Called by your consent management tool when user accepts
  function onConsentAccepted() {
    window.outlit.enableTracking()
  }
</script>

Or with the simple script tag:

<script
  src="https://cdn.outlit.ai/stable/outlit.js"
  data-public-key="pk_your_public_key"
  data-auto-track="false"
  async
></script>

With Popular CMPs

Cookiebot
OneTrust
Custom Banner

window.addEventListener('CookiebotOnAccept', function() {
  // Check for marketing or analytics consent
  if (Cookiebot.consent.marketing || Cookiebot.consent.analytics) {
    window.outlit.enableTracking()
  }
})

// OneTrust calls this when consent changes
function OptanonWrapper() {
  // C0002 = Analytics, C0004 = Targeting/Marketing
  if (OnetrustActiveGroups.includes('C0004') || OnetrustActiveGroups.includes('C0002')) {
    window.outlit.enableTracking()
  }
}

document.getElementById('accept-cookies').addEventListener('click', function() {
  localStorage.setItem('cookie_consent', 'accepted')
  window.outlit.enableTracking()
})

// Check on page load
if (localStorage.getItem('cookie_consent') === 'accepted') {
  window.outlit.enableTracking()
}

Check Tracking Status

// 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

window.outlit.track('button_clicked', {
  buttonId: 'cta-hero',
  page: '/pricing'
})

window.outlit.track('video_played', {
  videoId: 'demo-video',
  duration: 120
})

eventName

string

required

The name of the event. Use snake_case for consistency.

properties

object

Optional properties to attach to the event.

Identify Visitors

When a visitor provides their email (signup, login, contact form), identify them:

window.outlit.identify({
  email: 'jane@example.com',
  userId: 'usr_12345', // optional
  traits: {
    name: 'Jane Doe',
    company: 'Acme Inc',
    plan: 'enterprise'
  }
})

string

The visitor’s email address.

userId

string

Your internal user ID (from Supabase, Auth0, Firebase, etc.).

traits

object

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:

// 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:

window.outlit.clearUser()

Journey Stage Methods

Track user progression through your product lifecycle. These require the user to be identified first (via setUser() or identify()).

// After user completes onboarding
window.outlit.activate({ flow: 'onboarding' })

// When user reaches an engagement milestone
window.outlit.engaged({ milestone: 'first_project' })

// After successful payment
window.outlit.paid({ plan: 'pro', amount: 99 })

// When subscription is cancelled
window.outlit.churned({ reason: 'too_expensive' })

Get Visitor ID

Access the current visitor’s ID (useful for server-side correlation):

const visitorId = window.outlit.getVisitorId()
// Returns: "a1b2c3d4-e5f6-7890-abcd-ef1234567890"

Queued Commands

The tracker supports commands even before it fully loads. Commands are queued and executed once ready:

<script>
  // This works even before the script loads
  window.outlit = window.outlit || { _queue: [] };
  window.outlit.track('early_event', { page: 'landing' });
</script>

<script
  src="https://cdn.outlit.ai/stable/outlit.js"
  data-public-key="pk_xxx"
  async
></script>

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

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome</h1>
  
  <form id="contact-form">
    <input name="email" type="email" placeholder="Email" />
    <input name="name" type="text" placeholder="Name" />
    <button type="submit">Contact Us</button>
  </form>

  <button id="cta" onclick="handleCTA()">Get Started</button>

  <script>
    function handleCTA() {
      window.outlit.track('cta_clicked', {
        location: 'hero',
        page: window.location.pathname
      });
    }

    // Identify after form submission
    document.getElementById('contact-form').addEventListener('submit', function(e) {
      const email = e.target.querySelector('[name="email"]').value;
      const name = e.target.querySelector('[name="name"]').value;
      
      window.outlit.identify({
        email: email,
        traits: { name: name }
      });
    });
  </script>

  <script
    src="https://cdn.outlit.ai/stable/outlit.js"
    data-public-key="pk_your_public_key"
    async
  ></script>
</body>
</html>

Troubleshooting

Events not appearing in dashboard

Check your public key is correct
Verify the domain is in your allowlist (Settings → Website Tracking)
Open DevTools → Network and check for errors in /api/i/v1/ requests
Ensure the script loads without errors (check Console)

Form data not captured

Form must have a submit event (not prevented with e.preventDefault() before capture)
Check if field names match the denylist (they may be filtered for security)
Ensure data-track-forms is not set to "false"

Pageviews not tracking on SPA

The tracker automatically listens for pushState/replaceState. If using a custom router that doesn’t use these, manually track:

router.on('routeChange', (url) => {
  window.outlit.track('pageview', { url });
});

Next Steps

NPM Package

Use the npm package for more control

React Integration

First-class React support with hooks

Calendar Embeds

Track Cal.com and Calendly bookings

Getting Started

Browser Tracking

Server-Side Tracking

Identity & Resolution

Script Tag Integration

Overview

Installation

Simple Version

With Popular CMPs

Check Tracking Status

Automatic Tracking

Pageviews

Form Submissions

Manual Tracking

Track Custom Events

Identify Visitors

Set User Identity

Clear User Identity

Journey Stage Methods

Get Visitor ID

Queued Commands

Event Batching

Example: Full Integration

Troubleshooting

Next Steps

NPM Package

React Integration

Calendar Embeds

Getting Started

Browser Tracking

Server-Side Tracking

Identity & Resolution

​Overview

​Installation

​Simple Version

​Consent Management

​With Popular CMPs

​Check Tracking Status

​Automatic Tracking

​Pageviews

​Form Submissions

​Manual Tracking

​Track Custom Events

​Identify Visitors

​Set User Identity

​Clear User Identity

​Journey Stage Methods

​Get Visitor ID

​Queued Commands

​Event Batching

​Example: Full Integration

​Troubleshooting

​Next Steps

NPM Package

React Integration

Calendar Embeds

Overview

Installation

Simple Version

Consent Management

With Popular CMPs

Check Tracking Status

Automatic Tracking

Pageviews

Form Submissions

Manual Tracking

Track Custom Events

Identify Visitors

Set User Identity

Clear User Identity

Journey Stage Methods

Get Visitor ID

Queued Commands

Event Batching

Example: Full Integration

Troubleshooting

Next Steps