Event Stream Quickstart

4. Click Save.
5. Select the required API Method from the dropdown. You can also edit the relevant fields or traits/properties.
6. Click Send to my account to send the event.
7. Go to the Live Events viewer of your source (set up in Step 2) to verify that the event is successfully received.

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

A sample page call is shown below:

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:

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

Track events

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>

Identify events

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>

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.

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

Step 5: 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:

1. Click + Add destination in the default Connections view.

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:

3. 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-used 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:

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

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

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

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 for more information.

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.

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.

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.

See these instructions to get the JavaScript SDK installation snippet.

<!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">
  // Replace the <script> tag with your JavaScript SDK snippet.
  </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>

Questions? Contact us by email or on Slack