Quickstart

Get event data flowing from your website or app in less than 15 minutes.

10 minute read

RudderStack’s Event Stream pipelines help you collect behavioral events and automatically send them to other tools in your stack.

For simple use cases, you can get data flowing in less than 15 minutes by following these three steps:

Install a RudderStack SDK in your website or app.
Instrument API calls to identify users and capture user actions (like page views and button clicks).
Connect destination integrations to stream events to business tools and your warehouse automatically.

RudderStack Event Stream Quickstart - 3 steps to collecting and integrating events

Data teams often need to collaborate with front-end and back-end engineers to get RudderStack SDKs installed and event API calls instrumented.

Step 1 and Step 2 of this guide include helpful information for data engineers and software engineers who are collaborating on initial installation and instrumentation.

If you are a data engineer and simply want to test event flow through the platform, you can:
Set up a JavaScript source in RudderStack and copy the write keyThe write key (or source write key) is a unique identifier for your source. RudderStack uses this key to send events from a source to the specified destination. . Also, copy your data plane URLThe data plane URL is the location where events are routed and sent to the RudderStack backend for processing. You can find this URL in the home page of your RudderStack dashboard. .
Connect this source to a webhook destination using a site like webhook.site for listening to your events.
Import the RudderStack API collection in Postman or any tool of your choice.
Using the HTTP API, you can send events to your RudderStack source, and then RudderStack will deliver them to the webhook destination.
See your events populate on webhook.site.

Step 1: Install the JavaScript SDK

In most cases, installing one of RudderStack’s SDKs in a dev environment takes a front-end or back-end developer less than 10 minutes.

Starting with the JavaScript SDK is recommended for several reasons:

In many cases, the JavaScript SDK sends page API calls automatically, meaning data will begin flowing as soon as the SDK is installed.
The JavaScript SDK captures rich, client-side context in the payloads that help data engineers understand the full event schema.
Front-end updates are often faster to implement and deploy than back-end updates.

You can also see our Quickstart guides for mobile and server-side SDKs.

How data engineers can get the JavaScript SDK code

Select JavaScript.

Copy the installation snippet under the Setup tab (this snippet contains the write keyThe write key (or source write key) is a unique identifier for your source. RudderStack uses this key to send events from a source to the specified destination. and data plane URLThe data plane URL is the location where events are routed and sent to the RudderStack backend for processing. You can find this URL in the home page of your RudderStack dashboard. , which ensure events are sent to the correct source).

Send the snippet to your front-end development team.

How front-end engineers can install the JavaScript SDK

Your data engineer should have provided you a code snippet per the above steps. To install, paste the code into your website’s <head> section.

The snippet you received already contains the write keyThe write key (or source write key) is a unique identifier for your source. RudderStack uses this key to send events from a source to the specified destination. and data plane URLThe data plane URL is the location where events are routed and sent to the RudderStack backend for processing. You can find this URL in the home page of your RudderStack dashboard. needed to route the event to the correct RudderStack source.

For reference, here’s what the JavaScript SDK snippet looks like:

<script type="text/javascript">
!function(){var e=window.rudderanalytics=window.rudderanalytics||[];e.methods=["load","page","track","identify","alias","group","ready","reset","getAnonymousId","setAnonymousId","getUserId","getUserTraits","getGroupId","getGroupTraits","startSession","endSession","getSessionId"],e.factory=function(t){return function(){e.push([t].concat(Array.prototype.slice.call(arguments)))}};for(var t=0;t<e.methods.length;t++){var r=e.methods[t];e[r]=e.factory(r)}e.loadJS=function(e,t){var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a)},e.loadJS(),
e.load(WRITE_KEY,DATA_PLANE_URL),
e.page()}();
</script>

For more information, see the full JavaScript SDK documentation.

Step 2: Instrument API calls

The RudderStack JavaScript SDK follows a standard event spec. It helps you plan your event data and supports various API calls for tracking your website events - these include identify, track, screen, group, alias, and reset calls.

The best place to start instrumentation is with page calls, which help you track pages your unique users visit.

Instrumenting `page` calls

page events help you in analyzing customer journeys in your warehouse or data lake. You can also forward them directly to downstream tools like Google Analytics or Amplitude for real-time marketing and product analytics.

Note the e.page() function at the end of the JavaScript snippet. For many website platforms and sites that generate static pages, this function automatically sends a page call to RudderStack’s API.
That means your data team will see data flowing into RudderStack as soon as you deploy the site and users visit the pages.

For other frameworks and single page apps, run the page call whenever the URL changes. Here’s an example of how to do this in Next.js:

'use client'

import { useEffect } from 'react'
import { usePathname } from 'next/navigation'

export const RudderAnalytics = () => {
  const pathname = usePathname()

  useEffect(() => {
     window.rudderanalytics.page()
  }, [pathname])

}

If you’re running a Jamstack setup, see our Jamstack setup guides for framework-specific instructions.

Instrumenting additional API calls

Apart from page calls, track and identify are the most commonly used API calls. track events represent user actions like button clicks. identify calls let you identify users, assign them traits (like name and email), and associate the user to their actions.

To implement track calls, you need to listen for the desired user action, then fire a track call when it happens. You can describe these events by adding propertiesProperties are additional contextual information you can add to a track call to further describe the action a user takes. to the payload.

Here is an example of basic, inline front-end code that fires a track call named click when a user clicks on an element. The properties are target_url and link_text.

<a
  href="/foo"
  onclick="window.rudderanalytics.track('click', {
  target_url: '/foo',
  link_text: 'Bar'
  })
  ">
Bar
</a>

See the JavaScript SDK’s track API spec to learn more about track calls.

identify calls are typically fired when a user performs an identifying action like making a purchase or submitting a form. identify calls also associate a known user with their actions (even if previously anonymous). You can describe users with attributes by adding traitsTraits are attributes that describe a user. They can be added to an identify call in the traits object. Some examples of traits include age, gender, or some specific details - for example, a user’s product plan (free, basic, premium). to the payload.

Here is an example of basic, inline front-end code that fires an identify call on form submit. The traits are company, name, and email.

<form>
  <input type="text" name="name" id="name" placeholder="name" />
  <input type="text" name="company" id="company" placeholder="company" />
  <input type="text" name="email" id="email" placeholder="email" />
  <input
    type="submit"
    onclick="
    window.rudderanalytics.identify(
    document.getElementById('email').value, 
    { company: document.getElementById('company').value, 
    name: document.getElementById('name').value,
    email: document.getElementById('email').value 
    }); return false;" />
</form>

See the JavaScript SDK’s identify API spec to learn more about identify calls.

To see an example of instrumentation in the context of a full HTML page, see the full HTML page example where the SDK is installed and track and identify calls are instrumented.

Step 3: Verify data flow and connect destination integrations

Once software engineers have installed the SDK and instrumented events, the data team can verify the event flow into RudderStack. Then, they can connect destination integrations to forward events to the tools in their stack automatically.

1. Verify data flow for your JavaScript source

Before connecting destinations, verify that events are flowing into RudderStack by checking the Live Events viewer in your JavaScript source.

To see live events, go to your JavaScript source from the Connections view and click the Live Events button in the top right of your screen.

There will be a delay before you see events in the Live Events view. RudderStack doesn’t store any data; it temporarily opens a gateway between the control plane and data plane to show you the live events. The delays usually last only a few seconds but on the RudderStack Cloud Free plan, they can last up to one minute.

After a few seconds, you will see events populating the feed.

If you do not see events in the Live Events view, then there is likely a problem with your instrumentation.

2. Connect destination integrations

RudderStack supports 200+ integrations including data warehouses and data lakes, marketing platforms, CRMs, analytics tools, streaming platforms, and more. You can see the full list of supported destination integrations here.

To add a destination in RudderStack:

Click + Add destination in the default Connections view.

From the list, select a destination where you want to route your event data. Here are some popular destinations to help you get started:

Category	Destination
Analytics	Amplitude, Mixpanel, GA4
CRM	HubSpot, Salesforce
Marketing	Braze, Mailchimp
Object storage	Amazon S3, Redis
Streaming platforms	Apache Kafka, Amazon Kinesis
Warehouses	Snowflake, BigQuery, Redshift
Data lakes & lakehouses	Databricks, Google Cloud Storage

Set up the destination by configuring the connection settings. For details, see the destination-specific documentation.

Next steps

This section contains some optional, but helpful steps that leverage RudderStack’s most popular features for transforming events and debugging problems.

Add event transformations

One of RudderStack’s most-loved features is Event Transformations, which you can use to operate on the payloads flowing through RudderStack. You can use it for:

Sampling or filtering events.
Removing sensitive user PII from your events.
Enriching events using static logic, an external API, and more.

To use a transformation:

In the left sidebar, go to Collect > Transformations. Then, click Create Transformation.

Select a transformation template from the list depending on your use case. To create a transformation from scratch, click Custom transformation.

Transformation templates contain prepopulated, ready-to-use transformation logic, which you can apply to your events before sending them to the destination. You can also modify the code as per your needs.

Verify if your transformation works as expected by clicking the Run Test button.

Click Save to save your transformation.
Go to the Connections tab of your transformation and connect it to the destination you set up above. See Connect transformation to destination for more information.

When you add a transformation and connect it to a destination, RudderStack does the following:
Tracks events at the source.
Applies the transformation logic to your events.
Converts the events in a format the destination expects - RudderStack does this internally and requires no user intervention.
Sends the transformed events to your destination.

Debugging

RudderStack gives you complete observability into your events and the ability to debug errors that might occur in case of event failures. It provides the Live Events feature, where you can:

Verify your instrumentation.
Get a real-time view of the events flowing from your sources to the connected destinations.
Identify and debug any errors at the source, destination, or transformation level and narrow down the root cause of the issue.

Source Live Events viewer

This is helpful to verify if RudderStack is receiving the source events at all. The payload you see in this viewer is the raw event payload collected from your website.

Transformation Live Events viewer

This viewer will give you a before and after snapshot of the event going into your user transformation and what it looks like afterward. It also notifies you about any dropped events or errors during the transformation, along with the details.

Transformation live events error message

Destination Live Events viewer

This viewer shows you what the payload looks like when RudderStack sends it to the destination. You can also see the detailed error message if the destination returns an error.

See the Live Events documentation for more details.

Full HTML page example

Here’s an example of the RudderStack JavaScript SDK installed on an HTML page with track and identify calls instrumented inline.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript">
    !function(){var e=window.rudderanalytics=window.rudderanalytics||[];e.methods=["load","page","track","identify","alias","group","ready","reset","getAnonymousId","setAnonymousId","getUserId","getUserTraits","getGroupId","getGroupTraits","startSession","endSession"],e.factory=function(t){return function(){e.push([t].concat(Array.prototype.slice.call(arguments)))}};for(var t=0;t<e.methods.length;t++){var r=e.methods[t];e[r]=e.factory(r)}e.loadJS=function(e,t){var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a)},e.loadJS(),
    e.load(WRITE_KEY,DATA_PLANE_URL),
    e.page()}();
    </script>

  <title>RudderStack Example</title>
</head>

<body>
    <form>
        <input type="text" name="name" id="name" placeholder="name" />
        <input type="text" name="company" id="company" placeholder="company" />
        <input type="text" name="email" id="email" placeholder="email" />
        <input
          type="submit"
          onclick="
          window.rudderanalytics.identify(
          document.getElementById('email').value, 
          { 
            company: document.getElementById('company').value, 
            name: document.getElementById('name').value,
            email: document.getElementById('email').value 
          }); return false;" />
    </form>
    <a
        href="/foo"
        onclick="window.rudderanalytics.track('click', {
        target_url: '/foo',
        link_text: 'Bar'
        })
        ">
        Bar
    </a>
</body>

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.

Questions? Contact us by email or on Slack