Skip to content
EvolveEvolveEvolve

analytics

@evolve-storefront/analytics · v1.0.0 · Storybook ↗

A typed event bus for storefront analytics. Feature packages emit events such as a product added to the cart; your app decides which listeners, such as Google Tag Manager or your own, receive them.

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/analytics react
    Requirements1
    react>=19

  2. Wrap your app in ConsentGatedAnalyticsProvider. Setup lists its props.

Then render it on a page:

"use client";


import { createAnalyticsBus } from "@evolve-storefront/analytics/bus";
import { createGtmListener } from "@evolve-storefront/analytics/listeners/gtm";
import { AnalyticsProvider } from "@evolve-storefront/analytics/provider";
import type { ReactNode } from "react";


const bus = createAnalyticsBus({ debug: process.env.NODE_ENV !== "production" });
bus.listen(createGtmListener());


// Mount once, around the app. Feature packages emit into it from their hooks.
export function Providers({ children }: { children: ReactNode }) {
  return <AnalyticsProvider bus={bus}>{children}</AnalyticsProvider>;
}

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

EmitOnMountEmit one event when this mounts, and never again while it stays mounted.
EmitOnViewEmit one event once the wrapped content has actually been seen.

Hooks

2 hooks to read and change the data yourself, for when you build your own UI. All hooks

More in this package