# Collect events from websites ## Start collecting events from your websites and web apps. Ingesting events directly from your websites and web apps lets Krenalis capture user interactions in real time and store them as structured events. The JavaScript SDK automatically tracks, maps, and sends this data to your workspace, where it can be stored in the data warehouse, unified, analyzed, and used to trigger pipelines through activation. ## 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 the web application so you can integrate the Krenalis JavaScript SDK. ## Steps If you've already created a source connection for these websites, you can reuse it and start with the [Debug the events](#3-debug-the-events) step. ### 1. Connect a website Create a source connection to start tracking events 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 the **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 newly created JavaScript connection, copy the JavaScript snippet: [JavaScript snippet](https://www.krenalis.com/docs/collect-events/images/javascript-snippet.png)! 2. Paste it into all pages of your website between `` and ``. 3. As a test, add the following code to one of your pages to collect user data and send it to Krenalis: ```html ``` 💡 For detailed SDK methods and configuration options, see the [JavaScript SDK](https://www.krenalis.com/docs/integrations/javascript-sdk.md). #### 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 that use ES6 modules and will be bundled to run in the browser. 1. In the newly 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: ```sh npm install krenalis-javascript-sdk --save ``` 5. Import and use the SDK, replacing `` and `` respectively with the previously copied _event write key_ and _endpoint_: ```javascript import Krenalis from 'krenalis-javascript-sdk'; const krenalis = new Krenalis('', ''); // As a test, collect track events and send them to Krenalis: krenalis.track('Workout Completed', { workout_type: 'Cardio', duration_minutes: 45, calories_burned: 380, device: 'Smartwatch' }); ``` 💡 For detailed SDK methods and configuration options, see the [JavaScript SDK](https://www.krenalis.com/docs/integrations/javascript-sdk.md). #### 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 that use CommonJS modules and will be bundled to run in the browser. 1. In the newly 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: ```sh npm install krenalis-javascript-sdk --save ``` 5. Import and use the SDK, replacing `` and `` respectively with the previously copied event write key and Endpoint: ```javascript const { Krenalis } = require('krenalis-javascript-sdk'); const krenalis = new Krenalis('', ''); // As a test, collect track events and send them to Krenalis: krenalis.track('Workout Completed', { workout_type: 'Cardio', duration_minutes: 45, calories_burned: 380, device: 'Smartwatch' }); ``` 💡 For detailed SDK methods and configuration options, see the [JavaScript SDK](/docs/integrations/javascript-sdk). ### 3. Debug the events 1. In the source JavaScript connection, click on the **Event debugger** tab: [Event debugger](/docs/collect\-events/images/event\-debugger\.javascript\.png)! 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 the page on your website where you added the `track` call; the event should appear almost immediately: [Event debugger](/docs/collect\-events/images/event\-debugger\-track\.javascript\.png)! 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: ```json { "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" }, "event": "Workout Completed", "messageId": "82c8516b-434b-48f4-a32c-a6369e1543fd", "properties": { "workout_type": "Cardio", "duration_minutes": 45, "calories_burned": 380, "device": "Smartwatch" }, "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", "type": "track", "userId": null } ``` 💡 You can read the [Event spec](/docs/collect-events/spec) for full details on the schema of an event after it has been received by Krenalis. ### 4. Add a pipeline to import events 1. Click on the **Pipelines** tab of the connection for JavaScript. 2. Next to the **Import events into warehouse** pipeline, click **Add pipeline...**. [Import events into warehouse](/docs/collect\-events/images/import\-events\-into\-warehouse\.javascript\.png)! ### 5. Filter events If you don't want to import all events from your website, use filters to select which events to import. Only events that match the filter conditions will be imported. If no filters are set, all events from the website will be imported. For more information on how to use filters, see the [Filters documentation](/docs/filters). [Filter events](/docs/collect\-events/images/filter\-events\.png)! In the example above, only `track` events are imported. ### 6. 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 and adjust filters. Each pipeline defines how and when events flow from websites into your warehouse. [Pipeline to export user data](/docs/collect\-events/images/pipelines\.javascript\.png)! | Column | Description | |--------------|-------------------------------------------------------------------------------------------| | **Pipeline** | Name and description of the pipeline. | | **Filters** | Conditions used to select which events are imported. If not set, all events are included. | | **Enable** | Switch to activate or deactivate the pipeline. When disabled, no events are imported. | | **Manage** | Edit settings such as filter. | | **⋮ (More)** | Additional options, such as deleting the pipeline. |