Send Events

For developers integrating a UI with an already-deployed engine. You capture visitor behavior with the RudderStack JavaScript SDK; RudderStack forwards it to the engine, which builds the user model. You do not run any infrastructure here, you only need two values from whoever deployed the system:

• a Write Key
• a Data Plane URL

(These come from the RudderStack source set up during deployment. See Deployment, RudderStack.)

Set up the RudderStack SDK

RudderStack is a customer-data pipeline. Its browser SDK buffers events client-side and ships them to the data plane, which fans them out to destinations (here, the engine's ingest webhook). Load the SDK and initialise it with your two values:

<script>
  !function(){var e=window.rudderanalytics=window.rudderanalytics||[];e.methods=["load","page","track","identify","reset","group","alias"];e.factory=function(t){return function(){var r=Array.prototype.slice.call(arguments);return r.unshift(t),e.push(r),e}};for(var t=0;t<e.methods.length;t++){var r=e.methods[t];e[r]=e.factory(r)}e.load=function(t,r,n){var o=document.createElement("script");o.src="https://cdn.rudderlabs.com/v3/rudder-analytics.min.js",o.async=!0;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a),e._loadOptions=n||{},e._writeKey=t,e._dataPlaneUrl=r}}();

  rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL);
</script>

Full SDK reference and framework packages (React, Vue, Next): RudderStack JavaScript SDK docs.

Identify the user

Recommendations are per visitor, so every event needs to be tied to a stable identity. Call identify once you know who the visitor is (a returning user_id, or the id assigned at survey time). Until then the SDK uses an anonymous id, and the engine still accepts it (anonymousId). Traits passed here seed the cold-start profile.

rudderanalytics.identify(userId, {
  nationality: "NL",
  age_range: "25-34",
  persona: "student"
});

Use the same userId later when you read recommendations.

Track events

Emit one track call per visitor action. Keep a single session_id per visit and reuse it across a view's start and end so the engine can pair them into dwell.

const SESSION = crypto.randomUUID();

// Visitor opens a story (the other items on screen are impressions)
rudderanalytics.track("CONTENT_VIEW_STARTED", {
  content: { content_id: "content_841" },
  context: {
    session_id: SESSION,
    candidates: [{ content_id: "content_842" }, { content_id: "content_843" }]
  }
});

// Visitor leaves the story
rudderanalytics.track("CONTENT_VIEW_ENDED", {
  content: { content_id: "content_841" },
  context: { session_id: SESSION },
  details: { reason: "next_button", dwell_seconds: 42.5 }   // next_button|link|close_button|abandon
});

// Visitor searches and clicks a result
rudderanalytics.track("CONTENT_LOOKUP", {
  details: { query_text: "Bergen-Belsen 1944", clicked_id: "content_841" }
});

// Visitor answers the survey (a rating answer feeds engagement)
rudderanalytics.track("SURVEY_ANSWERED", {
  answers: [{ question_id: "satisfaction", question_type: "rating", answer_value: 4 }]
});

The event names, the exact nested property shapes, and what each field becomes are in the Event catalog. Get those right and the engine does the rest.

Next: Consume Recommendations.