Ingest users from websites

Learn how to ingest users from your websites and web apps.

View as Markdown

Collecting data directly from your websites and web apps lets you build accurate, real-time customer profiles from every user interaction. Use the Krenalis JavaScript SDK to automatically capture, map, and unify this data across all your systems.

Prerequisites

Before getting started, make sure you have everything you need:

  • Access to the website pages you want to connect with Krenalis.
  • The ability to edit those pages or web application so you can integrate the Krenalis JavaScript SDK.

Steps

1. Connect a website

Create a source connection to start tracking user data from your site. This connection links your web pages to Krenalis.

  1. Go to the Sources page of your Krenalis workspace.
  2. Click on Add a new source ⊕ and click on the JavaScript card.
  3. Click on Add source....
  4. Optionally rename the connection.
  5. Click Add to confirm.

The connection you just created is a source connection. You can access it later by clicking Sources section in the sidebar. If you manage multiple websites that share the same user base (for example, through a unified login), it's preferable to create a single source connection for all of them.

2. Set up your website

Choose one of the following alternative methods to integrate the SDK, depending on your project setup

Snippet

💡 Use this method if your website doesn't use a build system and you can directly edit the HTML source.

  1. In the new created JavaScript connection, copy the JavaScript snippet:
JavaScript snippet

  1. Paste it into all pages of your website between <head> and </head>.

  2. As a test, add the following code to one of your pages to collect user data and send it to Krenalis:

    <script>
krenalis.identify("703991475", {
    email: "emily.johnson@example.com",
    plan: "Enterprise",
    company: "Acme Corp",
    jobTitle: "Product Manager",
    country: "United States"
});
</script>

    💡 For detailed SDK methods and configuration options, see the JavaScript SDK.

Import

💡 Use this method if your project uses ES6 modules or TypeScript and is bundled for the browser.

The JavaScript SDK can be imported with import into TypeScript and JavaScript projects, using ES6 modules, that will be bundled to run in the browser.

  1. In the new created JavaScript connection, navigate to Settings.

  2. Click on Event write keys.

  3. Copy the event write key and the endpoint.

  4. In your project, install the krenalis-javascript-sdk npm package:

    npm install krenalis-javascript-sdk --save

  5. Import and use the SDK, replacing <event event write key> and <endpoint> respectively with the previously copied event write key and endpoint:

    import Krenalis from 'krenalis-javascript-sdk';

const krenalis = new Krenalis('<event write key>', '<endpoint>');

// As a test, collect user data and send it to Krenalis:
krenalis.identify("703991475", {
    email: "emily.johnson@example.com",
    plan: "Enterprise",
    company: "Acme Corp",
    jobTitle: "Product Manager",
    country: "United States"
});

    💡 For detailed SDK methods and configuration options, see the JavaScript SDK.

Require

💡 Use this method if your project uses CommonJS modules and is bundled for the browser.

The JavaScript SDK can be imported with require into JavaScript projects, using CommonJS modules, that will be bundled to run in the browser.

  1. In the new created JavaScript connection, navigate to Settings.

  2. Click on Event write keys.

  3. Copy the event write key and the endpoint.

  4. In your project, install the krenalis-javascript-sdk npm package:

    npm install krenalis-javascript-sdk --save

  5. Import and use the SDK, replacing <event write key> and <endpoint> respectively with the previously copied event write key and Endpoint:

    const { Krenalis } = require('krenalis-javascript-sdk');

const krenalis = new Krenalis('<event write key>', '<endpoint>');

// As a test, collect user data and send it to Krenalis:
krenalis.identify("703991475", {
    email: "emily.johnson@example.com",
    plan: "Enterprise",
    company: "Acme Corp",
    jobTitle: "Product Manager",
    country: "United States"
});

    💡 For detailed SDK methods and configuration options, see the JavaScript SDK.

3. Debug the events

  1. In the source JavaScript connection, click on the Event debugger tab:

    Event debugger

    The Event debugger shows a sample of events currently received for the current connection. Use it whenever you need to quickly confirm that events are arriving as expected and to inspect their contents in real time.

  2. Open your website page where you added the identify call, the event should appear almost immediately:

    Event debugger

    If the event does not appear after a few seconds, open your browser's console, reload the page, and check that no errors occurred and that the event was successfully sent.

  3. Click the collected event in the Event debugger list to view its JSON payload, which contains the data sent by the browser.

    The following example shows what a typical event payload looks like:

    {
    "anonymousId": "b27c5d9f-92a7-4d30-b21a-4df21a6872c2",
    "context": {
        "browser": {
            "name": "Safari",
            "version": "17.2.1"
        },
        "ip": "172.91.24.57",
        "library": {
            "name": "krenalis.js",
            "version": "1.0.0"
        },
        "locale": "en-US",
        "os": {
            "name": "macOS",
            "version": "14.5"
        },
        "page": {
            "path": "/dashboard",
            "title": "User Dashboard",
            "url": "https://app.example.com/dashboard"
        },
        "screen": {
            "width": 3024,
            "height": 1964,
            "density": 2
        },
        "session": {
            "id": "1766272512048"
        },
        "timezone": "America/Los_Angeles",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15"
    },
    "messageId": "f9189a52-b37b-4d7d-9f2d-08b91d85fa9c",
    "receivedAt": "2025-10-20T16:15:24.340Z",
    "sentAt": "2025-10-20T16:15:24.327Z",
    "originalTimestamp": "2025-10-20T16:15:23.992Z",
    "timestamp": "2025-10-20T16:15:24.010Z",
    "traits": {
        "email": "emily.johnson@example.com",
        "plan": "Enterprise",
        "company": "Acme Corp",
        "jobTitle": "Product Manager",
        "country": "United States"
    },
    "type": "identify",
    "userId": "703991475"
}

    💡 You can read the Event spec for full details on the schema of an event after it has been received by Krenalis.

4. Add a pipeline to import user data

  1. Click on the Pipelines tab of the connection for JavaScript.

  2. Next to the Import users into warehouse pipeline, click Add pipeline....

    Import users into warehouse

5. Filter events

The filter selects which users to import based on the collected events:

Filter events

It is preset to import user data only if the event is of type identify—with or without traits—or if it is not an identify event but includes traits. For now, you can leave it as configured. It's recommended to adjust this filter only after you've gained experience with event handling.

6. Transformation

The Transformation section lets you populate your Customer Model properties using user traits from collected events. You can choose between a Visual Mapping interface or advanced transformations written in JavaScript or Python.

You have full control over which properties to map—assign only those relevant to your business context and leave others unassigned when no matching values are available.

Visual Mapping

For complete details on how transformations work for harmonization, see how to harmonize data.

7. Save your changes

When you're done, click Add (or Save if you're editing an existing pipeline).

Pipelines

Once saved, the new pipeline appears in the pipelines list for JavaScript. From here, you can monitor imports, adjust filters, and manage transformations. Each pipeline defines how and when users flow websites into your warehouse.

Pipeline to import user data
Column Description
Pipeline Name and description of the pipeline.
Filters Conditions that determines which events are processed. If not set, all events are included.
Enable Switch to activate or deactivate the pipeline. When disabled, no events are processed.
Manage Edit settings such as filter and transformation.
⋮ (More) Additional options, such as deleting the pipeline.

Continue reading

Process ingested users