Widget Analytics Events Reference

Every widget instance dispatches CustomEvents on its own container. The container is the div you dropped in with data-bn-preset. Events bubble, so you can also listen on document if you have several widgets on one page.

The full list: bn:ready fires once the widget mounts. bn:view fires when a video enters the viewport past 50 percent. bn:play, bn:pause, bn:complete track playback. bn:product_click fires when a shopper taps a tagged product. bn:add_to_cart fires on cart add. bn:checkout_start fires when the shopper hits checkout. bn:error fires on load or playback failure with an error code.

Every event.detail carries the same base fields: presetId, videoId, productId (null if the event is not product-scoped), sessionId, and ts (unix ms). Product events also carry variantId, priceMinor, and currency (ISO 4217, INR for Indian shoppers).

Example handler:

<script async src="https://www.itsbeyondregular.com/embed.js"></script> <div data-bn-preset="PRESET_ID"></div> <script> document.addEventListener('bn:add_to_cart', (e) => { const { productId, variantId, priceMinor, currency, videoId } = e.detail; console.log('cart add', productId, priceMinor / 100, currency); }); </script>

priceMinor is always an integer in the smallest unit (paise for INR, cents for USD). Divide by 100 for display. Never trust the client value for billing, the merchant gateway is the source of truth.

The widget does not ship a GA or Pixel integration by default. You wire it up in one place with the DOM listener. Fire gtag or fbq inside the handler and you get parity with your existing funnel.

<script> document.addEventListener('bn:product_click', (e) => { const d = e.detail; if (window.gtag) gtag('event', 'select_item', { item_id: d.productId, item_variant: d.variantId, value: d.priceMinor / 100, currency: d.currency }); if (window.fbq) fbq('track', 'ViewContent', { content_ids: [d.productId], value: d.priceMinor / 100, currency: d.currency }); }); </script>

On Shopify Pro, the beyondRegular web pixel already reports product_viewed and product_added_to_cart against the same order tokens, so you do not need to double-report those two.

If you want events server-side, set an Analytics Webhook URL in the dashboard under Preset then Analytics. beyondRegular POSTs a JSON body per event with a X-BR-Signature header (HMAC SHA-256 of the raw body using your webhook secret).

Verify before you trust the payload:

const sig = req.headers['x-br-signature']; const mac = crypto.createHmac('sha256', process.env.BR_WEBHOOK_SECRET) .update(req.rawBody).digest('hex'); if (sig !== mac) return res.status(401).end();

Retries run for 24 hours with exponential backoff on any non-2xx response. Respond fast (under 3 seconds) or the request is treated as failed. Idempotency key is event.id, safe to dedupe on.

Add ?bnDebug=1 to any page URL and the widget logs every dispatched event to the console with the full detail payload. It also prints the resolved preset config and the catalogue fetch timing.

If you see bn:ready but no bn:view, the container is likely below the fold or hidden by CSS (display:none blocks the IntersectionObserver). If bn:product_click never fires, check that products are tagged in the frame from the dashboard, an untagged video still plays but has no clickable regions.

For attribution gaps on Shopify, confirm the theme app embed is enabled and the store is on the Pro plan. The web pixel only writes attribution when both conditions are true.