Web

@rabolic/web is Rabolic for the browser. It has no runtime dependencies, and the CDN build is under 8 KB gzip. Source: github.com/rabolic/sdks/js/web.

Use the project's publishable key (rb_pub_…). Secret keys (rb_live_, rb_test_) are refused in the browser.

Install

The quickest way is npx rabolic init in your project. By hand:

npm install @rabolic/web

import { rabolic } from '@rabolic/web'

rabolic.init({ projectKey: 'rb_pub_…', trackRoutes: true })

// after signup or login
rabolic.identify(user.id, { plan: 'pro' })

rabolic.track('signup_completed', { method: 'google' })

<script async src="https://cdn.rabolic.com/v1/rabolic.js" data-key="rb_pub_…"></script>

<script>
  !(function (w, d, src) {
    if (w.rabolic) return
    var q = (w.rabolic = [])
    var m = ['init', 'track', 'page', 'identify', 'reset', 'register', 'unregister', 'setConsent', 'optOut', 'optIn', 'flush']
    for (var i = 0; i < m.length; i++)
      (function (n) {
        q[n] = function () {
          q.push([n].concat([].slice.call(arguments)))
        }
      })(m[i])
    q.getAnonymousId = function () {
      return null
    }
    q.appLink = function (url) {
      return url
    }
    var s = d.createElement('script')
    s.async = true
    s.src = src
    d.head.appendChild(s)
  })(window, document, 'https://cdn.rabolic.com/v1/rabolic.js')

  rabolic.init({ projectKey: 'rb_pub_YOUR_KEY' })
</script>

Options

Pass them to init().

At start the SDK fetches remote config (GET /v1/config, cached for 5 minutes). Today it sets the session timeout from your project settings. The protocol has more switches, but no project setting controls them yet.

API

No method throws into your page. Pass debug: true to see why a call was dropped.

Automatic events

• Active time: active_ms counts time the page was visible and interacted with in the last 30 s. scroll_depth is the furthest point seen, from 0 to 1.
• Page hide: on visibilitychange to hidden or pagehide, queued events go out with navigator.sendBeacon.
• Campaigns: utm_* and the click id type (gclid, fbclid, ttclid, msclkid) from the landing URL go in context.campaign.
• Context: platform: 'web', locale, time zone, screen size and density, page URL, path, title and referrer, and the user agent.

Sessions

• Sessions are shared across tabs through localStorage.
• A new session starts after 30 minutes without events, or the web session timeout set in your project settings.
• A landing with different campaign parameters starts a new session.
• reset() starts a new session.

See Sessions.

Identity

Call identify() after signup and after every login, with your own stable user id. Use the same id on every platform:

rabolic.identify(user.id, { plan: 'pro' })

Call reset() when someone logs out, so the next person on that device starts fresh:

rabolic.reset()

See Identity.

Links into your app

rabolic.appLink(url) adds rb_aid=<anonymous id> to a store or deep link. The React Native and Flutter SDKs report it in $deep_link as linked_anonymous_id. Rabolic stores it, but doesn't link the web visitor to the app user by it yet. To join them today, call identify() with the same user id on both sides.

Consent and privacy

rabolic.init({ projectKey: 'rb_pub_…', consent: 'pending' })

// when your cookie banner answers
rabolic.setConsent('granted') // or 'denied'

Cookieless mode. persistence: 'memory' keeps the ids in memory only, for one page lifetime. Nothing is written to cookies or localStorage.

What the SDK stores, with the default persistence:

• the anonymous id, a random UUID, in localStorage (rb_aid), mirrored to a first-party rb_aid cookie (SameSite=Lax, Secure on https, one year);
• the session id and last activity, in localStorage;
• the unsent queue, in localStorage (rb_queue).

The SDK never reads form fields, the clipboard or location, and does no fingerprinting. See Consent and privacy.

Delivery and limits

See Limits.