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 before the closing </head> tag and initialize it with a placeholder shop ID:
<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.
npm package
Install the SDK when you want module imports:
npm install @drip-apex/sdkInitialize with fetched experiments:
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:
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
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.