Quickstart: Script tag — Docs

No build step? OakData is published to npm as a standard ES module, so you can load it straight from a CDN with a single <script type="module"> tag — no bundler, no framework. This works on static sites, server-rendered templates, or any plain HTML page.

Drop-in snippet

Paste this near the end of your <head> (or before</body>). Replace the key with your project's public key (oak_pub_…):

<script type="module">
  import oak from 'https://esm.sh/oakdata-js@0.4'

  oak.init('oak_pub_xxxxxxxxxxxxxxxxxxxxxxxx', {
    api_host: 'https://oakdata.co',
  })

  // Expose globally so inline handlers can call oak.* anywhere on the page.
  window.oak = oak
</script>

That single tag boots the tracker: pageviews fire on load and autocapture records clicks and form submits. Pinning the major version (@0.4) keeps the CDN from silently upgrading you across breaking changes.

Calls before init are safe

The default export queues any method calls made before init() and replays them once the tracker is up — so you can reference oak from inline handlers without worrying about load order.

Tracking events & identifying users

Because the snippet assigns window.oak, you can call the API from ordinary inline scripts or event handlers elsewhere on the page:

index.html

html

<button onclick="oak.capture('cta_clicked', { location: 'hero' })">
  Get started
</button>

<script>
  // After your own login flow resolves:
  oak.identify('user_123', { email: 'sam@example.com' })
</script>

Public keys only

Anything in page source is public. Only ever use a oak_pub_… key in a script tag. Secret keys (oak_sec_…) are for the REST API and MCP server and must stay server-side.

See the SDK reference for every method and init option.