Skip to main content

​
Overview

Client-side personalisation uses a JavaScript tracking script that loads in the browser. It fetches personalised content after the page renders and injects it into designated DOM zones. This is the original integration method and works alongside the Server Side SDK.

​
When to use client-side personalisation

Use caseRecommended approach
Content that must be visible immediately (no flash)Server-side SDK
SEO-critical personalised contentServer-side SDK
Event tracking (clicks, impressions, conversions)Client-side script
Consent-dependent contentClient-side script
Overlays, popups, and floating elementsClient-side script
Pages without server-side rendering (SPAs)Client-side script
Quick integration without code changesClient-side script + Browser Extension

​
Integration methods

​
1. Script tag (manual)

Add the Reelevant tracking script to your page. The integration URL is generated from the Integration modal in the workflow editor. 
<!-- Add in your <head> or before </body> -->
<script src="https://reelevant.run/your-script-url.js" async></script>
The script automatically:
  • Creates an anonymous identity (rlvt_tmpId cookie) if none exists
  • Scans the DOM for [rlvt] attribute zones
  • Fetches personalised content from the runner
  • Injects content into matching zones
  • Tracks impressions and clicks

​
2. HTML zones

Mark elements on your page where personalised content should appear: 
<div rlvt
     rlvt-wid="your-workflow-id"
     rlvt-ep="hero">
  <!-- Fallback content shown until personalised content loads -->
  <p>Default content</p>
</div>
AttributeDescription
rlvtMarks the element as a Reelevant zone
rlvt-widWorkflow ID
rlvt-epEntrypoint shortId within the workflow

​
3. Browser extension integrations

The Reelevant Browser Extension provides a no-code way to configure client-side integrations:
1

Install the extension

Install from the Chrome Web Store and log in with your Reelevant credentials.
2

Navigate to your website

Open the page where you want personalised content to appear.
3

Select a workflow

In the extension side panel, browse your workflow list and select the one to integrate.
4

Configure the integration

Use the DOM selector to visually pick the HTML element where content should be injected. Configure datalayer variables and filter conditions.
5

Save

The integration is saved to your workflow. The tracking script will use this configuration on matching pages.

​
Integration triggers

Browser extension integrations support three types of triggers:
TriggerDescription
URL patternContent loads when the page URL matches a pattern (e.g., /products/*)
DataLayer variableContent loads when a specific value is present in the dataLayer (e.g., GTM events)
CSS selectorContent is injected into a specific DOM element selected via the extension

​
Identity management

The client-side script manages two identity cookies:
CookiePurposeLifetime
rlvt_tmpIdAnonymous visitor ID, created automatically365 days
rlvt_clientIdKnown user ID, set by your application365 days
To associate a known user identity: 
// Option 1: URL parameter
// Add ?rlvt_clientId=user@example.com to the page URL

// Option 2: dataLayer
window.dataLayer = window.dataLayer || []
window.dataLayer.push({ rlvt_clientId: 'user@example.com' })

​
Combining with server-side SDK

When using both the server-side Web SDK and the client-side script on the same page:
  1. Server-rendered zones should include data-rlvt-ssr="true" on the wrapper element
  2. The client-side script automatically skips zones marked with data-rlvt-ssr
  3. The client script still handles event tracking, client-only zones, and integrations
<!-- Server-rendered zone (SDK) — script will skip this -->
<div data-rlvt-ssr="true">
  <div class="hero-banner">Personalised hero content from SSR</div>
</div>

<!-- Client-rendered zone — script will handle this -->
<div rlvt rlvt-wid="wf-sidebar" rlvt-ep="sidebar">
  <p>Loading...</p>
</div>

​
DataLayer integration

The script reads values from the window.dataLayer array (Google Tag Manager compatible): 
window.dataLayer = window.dataLayer || []
window.dataLayer.push({
  locale: 'en-GB',
  country: 'UK',
  event: 'product_view',
  productId: 'SKU-12345',
})
These values are automatically forwarded to workflows as URL parameters for use in data nodes.