Skip to main content

For AI agents: a Markdown version of this page is at https://docs.snowplow.io/docs/get-started/tracking.md. The index of all documentation pages is at https://docs.snowplow.io/llms.txt, and the index for this section is at https://docs.snowplow.io/docs/cdi/llms.txt.

Track your first events

Once your pipeline is set up, add a tracker to your application to send events to it. This page sets up the web tracker on a website and tracks page views.

Choose your platform:

Add the tracker with your AI assistant

If you use Snowplow CDI, you can ask your coding agent to add the tracker instead of copying the snippet by hand. Connected to the Snowplow MCP server, it reads your pipeline details, adds the tracker to your application, and checks that the events arrive. For example: "Add the Snowplow JavaScript tracker to this app, track page views, and confirm the events reach my pipeline."

Install the Snowplow MCP server and skills in your coding agent, such as Claude Code, Cursor, or Codex, with npx plugins add snowplow/skills. In Console, the Snowplow Assistant has the same tools.

Get your Collector URL​

The tracker sends events to your Collector URL.

You can find the Collector URL (Collector endpoint) in Console.

Install the tracker​

Install the tracker from npm if your site is built with a framework such as React, Angular, or Vue. Otherwise, add the JavaScript tag to your pages.

Install the @snowplow/browser-tracker package with your package manager:

bash
npm install @snowplow/browser-tracker

Then import it, and create a tracker by calling newTracker with your Collector URL. This creates a module-level instance of the tracker, so you don't need to keep a reference to it.

javascript
import { newTracker, trackPageView } from '@snowplow/browser-tracker';

newTracker('sp1', '{{collector_url}}', {
  appId: 'my-app-id',
  plugins: [],
});
Strong user and session cookies and ad-blocker mitigation

To make sure that your tracking is well configured for strong first-party cookies and resilient against the impact of ad-blockers, see cookies and ad-blockers.

Track page views​

Creating the tracker doesn't send any events. Call trackPageView to track a page view:

javascript
trackPageView();

In a single-page application, call trackPageView again each time the route changes. See page views for the options.

Check your events​

Install Snowplow Inspector in your browser, open your site, and check that a page view event is sent to your Collector.

Latency

It might take a few minutes for events to reach your destination, such as a data warehouse. This depends on which destination and loader you have configured.

For other platforms, see the mobile native trackers or the full list of trackers. To send test events from the command line in the tracker protocol format, use Snowplow CLI.

Send a quick test from this page

To test your pipeline before you add a tracker, use the box below to send some data, including failed events, to your Collector.

To use this tool, you need a Collector URL that starts with https://, not http://, because web browsers block traffic from HTTPS sites, such as this one, to non-HTTPS resources.

This tool uses the following tracking code:

javascript
window.snowplow('trackSelfDescribingEvent',
  {
    event: {
      schema: 'iglu:com.snowplowanalytics.snowplow/add_to_cart/jsonschema/1-0-0',
      data: { sku: 'ASO01043', unitPrice: 49.95, quantity: 1000 }
    }
  }
)
window.snowplow('trackSelfDescribingEvent',
  {
    event: {
      schema: 'iglu:com.snowplowanalytics.snowplow/link_click/jsonschema/1-0-1',
      data: {
        targetUrl: 'https://snowplow.io'
      }
    }
  }
)
window.snowplow('trackSelfDescribingEvent',
  {
    event: {
      schema: 'iglu:com.snowplowanalytics.mobile/deep_link/jsonschema/1-0-0',
      data: {
        url: 'https://snowplowanalytics.com'
      }
    }
  }
)
window.snowplow('trackSelfDescribingEvent',
  {
    event: {
      schema: 'iglu:com.snowplowanalytics.snowplow/link_click/jsonschema/1-0-1',
      data: {
        targetUrl: 'https://snowplow.io'
      }
    },
    context: [
      {
        schema: 'iglu:com.snowplowanalytics.snowplow/web_page/jsonschema/1-0-0',
        data: {
          id: '6a2a8c7c-8e7a-4e9f-9b4c-0f4f9a3f35a9'
        }
      }
    ]
  }
)
window.snowplow('trackPageView', undefined)
window.snowplow('trackPageView', { title: 'My custom page title' })

// Bad Events
window.snowplow('trackSelfDescribingEvent',
  {
    event: {
      schema: 'iglu:com.fake_event/event/jsonschema/1-0-0',
      data: { foo: 'bar' }
    }
  }
)
window.snowplow('trackSelfDescribingEvent',
  {
    event: {
      schema: '',
      data: {}
    }
  }
)
window.snowplow('trackSelfDescribingEvent',
  {
    event: {
      schema: 'iglu:com.snowplowanalytics.snowplow/link_click/jsonschema/1-0-1',
      data: {
        invalidProperty: "This schema doesn't have this property"
      }
    }
  }
)

An application ID is sent with each event. Pick a value that makes it easy to filter out these test events from your data later, for example WHERE app_id != 'test'.

Was this page helpful?