ApexDocsOpen Apex
Developer

Install and quickstart the Apex SDK

Choose the hosted script snippet or npm package, initialize Apex, and send your first SDK events.

The Apex SDK runs experiments, applies DOM mutations, evaluates flags, and sends storefront events to the Apex Worker. Use the hosted script for most storefront installs. Use the npm package when your app needs typed code-owned experiments, React bindings, or direct module imports.

Prerequisites

  • An Apex shop identifier from the installation screen.
  • The public Worker endpoint, usually https://events.drip-apex.com.
  • For npm usage, Node.js 18 or newer in your storefront build pipeline (the SDK package itself targets external consumers; developing inside the Apex monorepo requires Node.js 22.22+).

Hosted script

Add the hosted SDK directly in <head> and initialize it with a placeholder shop ID. Do not load it through a tag manager or place the script behind a consent gate: late loading prevents the anti-flicker guard from protecting the first paint. Consent should gate Apex storage and tracking through setConsent, not script delivery.

html
<script>
  window.drip = window.drip || [];
  window.Drip = window.Drip || {
    init(config) { window.drip.push({ type: "init", config }); },
    track(type, data) { window.drip.push({ type: "track", event: type, data }); },
    trackGoal(goalId, data) { window.drip.push({ type: "trackGoal", goalId, data }); },
    setConsent(granted) { window.drip.push({ type: "setConsent", granted }); }
  };
</script>
<script async src="https://sdk.drip-apex.com/drip.js"></script>
<script>
  Drip.init({
    shopId: "demo-shop",
    endpoint: "https://events.drip-apex.com"
  });
</script>

Use this path for Shopify theme snippets, Shopware plugins, WooCommerce templates, static storefronts, or headless sites where Apex should own assignment, anti-flicker, pageview tracking, and mutation delivery.

Flicker contract

The default scoped anti-flicker guard hides only elements that an active experiment can change. Apex reveals them as soon as mutations resolve. The guard has a 1200ms safety cap, so a failed config request or missing selector cannot leave the storefront hidden indefinitely.

Hydrating Nuxt and Next.js storefronts can keep immediate application with next-frame correction, or opt into applying after hydration. See SSR framework coexistence for the timing modes and handshake hooks.

npm package

Install the SDK when you want module imports:

bash
npm install @drip-apex/sdk

Initialize with fetched experiments:

ts
import { init, track, trackGoal } from "@drip-apex/sdk";
 
init({
  shopId: "demo-shop",
  endpoint: "https://events.drip-apex.com",
  trackingStart: "idle"
});
 
track("add_to_cart", {
  product_id: "gid://shopify/Product/example",
  value: 49,
  currency: "EUR"
});
 
trackGoal("product-page-cta-click", {
  source: "custom-button"
});

Initialize with local experiments:

ts
import { defineExperiment, init } from "@drip-apex/sdk";
 
const heroCopy = defineExperiment({
  slug: "homepage-hero-copy",
  name: "Homepage hero copy",
  variations: [
    { id: "control", weight: 0.5, isControl: true },
    {
      id: "proof-copy",
      weight: 0.5,
      mutations: [
        { selector: "[data-hero-title]", action: "text", text: "Trusted by growing teams" }
      ]
    }
  ]
});
 
init({
  experiments: [heroCopy],
  endpoint: "https://events.drip-apex.com"
});

Track your first conversion

ts
import { trackRevenue } from "@drip-apex/sdk";
 
trackRevenue(89.99, {
  orderId: "order-example-1001",
  currency: "EUR"
});

trackRevenue sends a goal event with the reserved __revenue__ goal ID for each active assignment.