# Event Stream Quickstart
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:
1. **Install a RudderStack SDK** in your website or app.
2. **Instrument API calls** to identify users and capture user actions (like page views and button clicks).
3. **Connect destination integrations** to stream events to business tools and your warehouse automatically.
{{< image src="images/get-started/event-stream-quick-start-3-steps.png" alt="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](#how-data-engineers-can-get-the-javascript-sdk-code) and [Step 2](#step-3-instrument-api-calls) of this guide include helpful information for data engineers and software engineers who are collaborating on initial installation and instrumentation.
{{< success >}}
You can use the [Event Playground app](#step-2-verify-data-flow) if you want to test events flowing through RudderStack **without** any instrumentation.
{{< /success >}}
## 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 the following reasons:
- 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]({{< ref "data-pipelines/event-stream/quickstart/mobile-quickstart.md" >}}) and [server-side]({{< ref "data-pipelines/event-stream/quickstart/server-side-quickstart.md" >}}) SDKs.
### How data engineers can get the JavaScript SDK code
1. Sign in to your RudderStack account and click **+ Add source** in the default **Connections** view.
{{< image src="images/get-started/quickstart/add-source.webp" alt="Add source" >}}
2. Select **JavaScript**.
{{< image src="images/get-started/quickstart/js-sdk.webp" alt="JavaScript source" >}}
3. Copy the installation snippet under the **Setup** tab (this snippet contains the {{< glossary_tooltip "write-key" >}} and {{< glossary_tooltip "data-plane-url" >}}, which ensure events are sent to the correct source).
{{< image src="images/get-started/quickstart/js-sdk-snippet.webp" alt="JavaScript SDK snippet" >}}
4. 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 `` section.
The snippet you received already contains the {{< glossary_tooltip "write-key" >}} and {{< glossary_tooltip "data-plane-url" >}} needed to route the event to the correct RudderStack source.
{{< info >}}
The implicit `page` call at the end of the snippet (in case of the previous JavaScript SDK versions) is removed in [JavaScript SDK v3]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/_index.md" >}}). You will have to [instrument it separately](#instrumenting-page-calls).
{{< /info >}}
## Step 2: Verify data flow
Once you have installed the JavaScript SDK, you can use RudderStack's **Event Playground app** (embedded in step 3 below) to send test events to your account and verify the data flow **without** any instrumentation.
{{< customreadfile "/includes/send-test-events.md" >}}
See [Step 4: Check live events](#step-4-check-live-events) for more information on the **Live Events** feature.
## Step 3: Instrument API calls
The RudderStack JavaScript SDK follows a [standard event spec]({{< ref "event-spec/standard-events/" >}}). 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`]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/supported-api.md#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.
A sample `page` call is shown below:
```javascript
rudderanalytics.page();
```
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:
```javascript
'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 the [Jamstack setup guides]({{< ref "user-guides/how-to-guides/rudderstack-jamstack-integration/_index.md" >}}) for framework-specific instructions.
### Instrumenting additional API calls
Apart from `page` calls, [`track`](#track-events) and [`identify`](#identify-events) 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.
{{< info >}}
To see an example of instrumentation in the context of a full HTML page, see the [full HTML page example](#full-html-page-example) where the SDK is installed and `track` and `identify` calls are instrumented.
{{< /info >}}
#### **Track events**
To implement [`track`]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/supported-api.md#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 {{< glossary_tooltip "properties" >}} 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`.
```html
Bar
```
#### **Identify events**
[`identify`]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/supported-api.md#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 {{< glossary_tooltip "traits" >}} 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`.
```html
```
## Step 4: Check live events
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.
To see the live events, go to your JavaScript source from the **Connections** view and click the **Live Events** button in the top right of your screen.
{{< info >}}
There will be a delay before you see events in the **Live Events** view. RudderStack does not 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 Free](https://rudderstack.com/pricing/) plan, they can last up to one minute.
{{< /info >}}
{{< image src="images/rs-cloud/source-live-events.webp" alt="Live Events" >}}
After a few seconds, you will see events populating the feed.
{{< warning >}}
If you do not see events in the **Live Events** view, then there is likely a problem with your instrumentation.
{{< /warning >}}
## Step 5: Connect destination integrations
{{< success >}}
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]({{< ref "destinations/overview.md" >}}).
{{< /success >}}
To add a destination in RudderStack:
1. Click **+ Add destination** in the default **Connections** view.
{{< image src="images/get-started/quickstart/add-destination.webp" alt="Add destination" >}}
2. 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]({{< ref "destinations/streaming-destinations/amplitude/" >}}), [Mixpanel]({{< ref "destinations/streaming-destinations/mixpanel/" >}}), [GA4]({{< ref "destinations/streaming-destinations/google-analytics-4/_index.md" >}}) |
| CRM | [HubSpot]({{< ref "destinations/streaming-destinations/hubspot/_index.md" >}}), [Salesforce]({{< ref "destinations/streaming-destinations/salesforce/" >}}) |
| Marketing | [Braze]({{< ref "destinations/streaming-destinations/braze/_index.md" >}}), [Mailchimp]({{< ref "destinations/streaming-destinations/mailchimp.md" >}}) |
| Object storage | [Amazon S3]({{< ref "destinations/streaming-destinations/amazon-s3.md" >}}), [Redis]({{< ref "destinations/streaming-destinations/redis.md" >}}) |
| Streaming platforms | [Apache Kafka]({{< ref "destinations/streaming-destinations/kafka.md" >}}), [Amazon Kinesis]({{< ref "destinations/streaming-destinations/amazon-kinesis.md" >}}) |
| Warehouses | [Snowflake]({{< ref "destinations/warehouse-destinations/snowflake.md" >}}), [BigQuery]({{< ref "destinations/warehouse-destinations/bigquery.md" >}}), [Redshift]({{< ref "destinations/warehouse-destinations/redshift.md" >}}) |
| Data lakes & lakehouses | [Databricks]({{< ref "destinations/warehouse-destinations/delta-lake/_index.md" >}}), [Google Cloud Storage]({{< ref "destinations/warehouse-destinations/gcs-datalake.md" >}}) |
3. Set up the destination by configuring the connection settings. For details, see the [destination-specific documentation]({{< ref "destinations/overview.md" >}}).
## 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-used features is [Event Transformations]({{< ref "transformations/overview.md" >}}), 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:
1. In the left sidebar, go to **Collect** > **Transformations**. Then, click **Create Transformation**.
{{< image src="images/get-started/quickstart/create-transformation.webp" alt="Create transformation" >}}
2. Select a [transformation template]({{< ref "transformations/templates.md" >}}) from the list depending on your use case. To create a transformation from scratch, click **Custom transformation**.
{{< success >}}
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.
{{< /success >}}
{{< image src="images/features/transformation-templates-2.webp" alt="Choose a template" >}}
3. Verify if your transformation works as expected by clicking the **Run Test** button.
{{< image src="images/features/run-test-transformations.webp" alt="Testing a transformation" >}}
4. Click **Save** to save your transformation.
5. Go to the **Connections** tab of your transformation and connect it to the destination you set up above. See [Connect transformation to destination]({{< ref "transformations/manage.md#connect-transformation-to-destination" >}}) for more information.
{{< info >}}
When you add a transformation and connect it to a destination, RudderStack does the following:
1. Tracks events at the source.
2. Applies the transformation logic to your events.
3. Converts the events in a format the destination expects - RudderStack does this internally and requires no user intervention.
4. Sends the transformed events to your destination.
{{< /info >}}
### 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]({{< ref "monitor/live-events.md" >}}) 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.
{{< image src="images/rs-cloud/source-live-events.webp" alt="Live Events" >}}
{{< image src="images/rs-cloud/source-live-events-details.webp" alt="Source live events details" >}}
#### **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.
{{< image src="images/rs-cloud/transformation-live-events.webp" alt="Transformation live events" >}}
{{< image src="images/rs-cloud/transformation-live-events-errors.webp" alt="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.
{{< image src="images/rs-cloud/destination-live-events-details.webp" alt="Payload to the destination" >}}
See the [Live Events]({{< ref "monitor/live-events.md" >}}) 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.
{{< info >}}
See [these instructions]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/installation.md#using-cdn" >}}) to get the JavaScript SDK installation snippet.
{{< /info >}}
```html
RudderStack Example
Bar
```