Skip to main content

Replay and monitoring

Lucky Orange

Lucky Orange records sessions and builds heatmaps. The c15t luckyOrange helper waits until the measurement category is allowed before it creates the LOQ queue and loads Lucky Orange. Once Lucky Orange's privacy module is ready, the helper grants consent through LO.privacy.setConsentStatus(true).

When the visitor withdraws, the helper calls setConsentStatus(false). Recording code already on the page can't be unloaded, so keep c15t's default page reload.

Configure Lucky Orange

In the Lucky Orange dashboard, turn on Require Consent. With it on, Lucky Orange waits for the consent the helper grants through its privacy API. Copy your site ID, then delete the original Lucky Orange snippet and any tag manager copy, so Lucky Orange can't load outside c15t.

npm install @c15t/integrations
src/consent-scripts.ts
import { luckyOrange } from '@c15t/integrations/lucky-orange';

export const scripts = [luckyOrange({ siteId: 'YOUR_SITE_ID' })];

Register the scripts

Complete your framework quickstart first. Keep its Inth endpoint, policy, styles and consent UI. Remove the vendor's original script, SDK initializer or tag-manager entry, so the vendor loads only through c15t.

The vendor pages put the helper in src/consent-scripts.ts. If your framework quickstart already has a scripts array, such as the one in c15t.config.ts in the Next.js guide, add the helper to that array instead of creating a second file. The scripts export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration point for your framework below. These are edits to that provider, not a second provider.

Add the configuration to scripts in c15t.config.ts, next to next.config.ts:

import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });

Keep the rest of your config, such as mode and routePrefix, in the same call. ConsentRoot reads the config in the browser, so the layout keeps passing only state. App Router, Pages Router and static export all read the same file. See Next.js scripts and embeds.

Options

OptionDefaultBehavior
siteIdRequiredLucky Orange site ID. Trimmed and URL-encoded into the default loader URL. If it's missing or blank, c15t logs an error and never loads Lucky Orange.
categorymeasurementConsent category or condition that must be allowed before the loader runs.
scriptUrlhttps://tools.luckyorange.com/core/lo.js?site-id=<siteId>Custom or proxied loader URL. A blank value uses the default.

A proxy scriptUrl must keep lo.js in its path. Lucky Orange finds the site ID by looking for script URLs that contain that file name. A renamed proxy path hasn't been tested.

Loading and revocation

When the category is allowed, the helper creates window.LOQ as an array, or uses the one your page already defines. It pushes a ready callback onto the queue, then adds the loader. When Lucky Orange calls back, the helper waits for its privacy module and then sets the consent status to the visitor's current choice. If the visitor withdrew in the meantime, the helper sets it to false, so a late callback can't grant consent.

If the privacy module fails to start, the helper logs luckyOrange: privacy initialization failed. with the error and never calls setConsentStatus. This holds even if c15t disposed the helper while it was waiting.

On withdrawal, the helper keeps the loader on the page and calls setConsentStatus(false). If the visitor grants consent again on the same page, it calls setConsentStatus(true) without loading Lucky Orange a second time. Calling luckyOrange() again with equal options, such as on a rerender, returns the same script.

The helper doesn't call optOut(). That writes an opt-out cookie that lasts two years and gets in the way if the visitor grants consent again. c15t hasn't confirmed that setConsentStatus(false) stops every active recording, and removing a script can't unload recording code. Keep reloadOnConsentRevoked enabled. The next page, with consent denied, doesn't load Lucky Orange.

Cookies and storage

Lucky Orange can set the lo-domain-check, lo-opt-out, lo-uid and lo-visits cookies, and lo-session, lo-messenger and lo-visitor in local storage. Some cookies last two years. Lucky Orange documents Do Not Track support. c15t hasn't tested how Do Not Track or an existing Lucky Orange opt-out interacts with the helper, so check both with your own account.

Verify Lucky Orange

Filter the DevTools Network panel by luckyorange.com. Before consent, and with only an unrelated category allowed, check that no loader, LOQ, LO, cookie or storage entry appears. Allow measurement, wait for the privacy module and check that LO.privacy.getConsentStatus() returns true. Withdraw consent and confirm the page reloads with Lucky Orange blocked.

If you set reloadOnConsentRevoked: false, withdraw consent while the loader is still downloading, and confirm that no late callback grants consent. With your own account, check recording state after withdrawal and a new grant. Keep Require Consent turned on.

If the console shows luckyOrange: privacy initialization failed., Lucky Orange never received a consent status.

Sources: browser library, privacy tools and cookies and storage.

Test in a private window with an opt-in policy. Open DevTools Network, disable the cache and filter by the vendor's domain:

  1. Load the page. No request goes to the vendor before you choose.
  2. Click Reject, then reload. There is still no vendor request.
  3. Open Privacy settings and allow the helper's category. The vendor script loads without a page reload.
  4. Turn the category off again and save. c15t reloads the page, and the new page makes no vendor request.

c15t reloads on revocation because removing a script element does not stop code that already ran. The vendor's listeners, timers and queued events stay alive until the page unloads. If you set reloadOnConsentRevoked: false, stop the vendor yourself. Register a callback-only script whose onConsentChange calls the vendor's opt-out API, as shown in custom integrations, and check the permission before each of your own event calls. The reload does not delete cookies the vendor already set; see clear on revocation for your framework.

The helper lists its vendor by name in the preference dialog, so a visitor can turn it off inside an allowed category. See vendor consent for your framework. The consent verification guide covers navigation, expiry and hosting checks.