DXA Cookbook: From Zero to First Insights

A step-by-step guide to adding site tracking, running your first Genome analysis, and exploring your analytics dashboard — all in under 30 minutes.

Scenario

You have a website and want to understand how visitors use it. By the end of this guide you'll have:

Real-time click, scroll, and performance tracking on your site
Frustration signal detection (rage clicks, dead clicks, quick backs)
An AI-generated tracking plan tailored to your site's structure
Session replay recordings of real visits

Prerequisites

ActionXM CLI installed (npm install -g actionxm)
Authenticated (actionxm auth login)
A website you can add a script tag to

Step 1: Create a Project

bash

actionxm projects create \
  --name "My Store" \
  --type web \
  --domain mystore.example.com

✓ Project created: My Store
  ID:     550e8400-e29b-41d4-a716-446655440000
  Type:   web
  Domain: mystore.example.com

Copy the project ID — you'll need it for the script tag.

Already have a project? Run actionxm projects list to find your ID.

Step 2: Add the Tracking SDK

Paste this script tag into your site's <head> (or before </body>). Replace the data-site-id with your project ID:

html

<script
  src="https://cdn.action-xm.com/t.min.js"
  data-site-id="550e8400-e29b-41d4-a716-446655440000"
  data-replay="true"
  data-replay-sample-rate="1.0"
  data-replay-privacy="balanced"
></script>

That's it. The SDK automatically tracks:

What	How
Page views	Every navigation
Clicks	Element, position, text
Scroll depth	Max scroll % per page
Rage clicks	3+ clicks in the same area within 500ms
Dead clicks	Clicks with no DOM response within 700ms
Quick backs	Navigating away within 5 seconds
Core Web Vitals	LCP, FID, CLS, TTFB, FCP, INP
Session replay	DOM recording via rrweb (at the sample rate you set)
Device info	Device type, browser, OS

Start with 100% replay sample rate

We set data-replay-sample-rate="1.0" so every session is recorded while you're getting started. Reduce to 0.1 (10%) once you have steady traffic.

Using a framework (React, Next.js, Vue, etc.)?

Add the script tag to your root HTML template or index.html. For Next.js, use next/script:

jsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://cdn.action-xm.com/t.min.js"
          data-site-id="550e8400-..."
          data-replay="true"
          data-replay-sample-rate="1.0"
          data-replay-privacy="balanced"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Step 3: Verify Tracking Works

Deploy your site (or run it locally)
Open it in a browser
Click around, scroll down a page, navigate between pages
Wait 15 seconds (the SDK batches events and flushes every 10s)
Open the dashboard:

https://app.action-xm.com/dxa/overview

No data? Open browser DevTools → Console and look for [tracker] log messages. If you don't see them, check that the script tag loaded (Network tab → filter by t.min.js).

You should see:

Sessions: 1+ session
Avg Duration: your browsing time
Sessions Over Time: a dot on the chart

Step 4: Run a Genome Analysis

Genome is an AI engine that crawls your site, discovers its structure, and generates a tracking plan — event rules, profile labels, audiences, and automation suggestions.

Start the analysis:

bash

actionxm genome create

✓ Genome analysis started
  Version: v1.0
  State:   created

Monitor progress (takes 2-5 minutes depending on site size):

bash

actionxm genome status

Genome Status

Version:  v1.0
State:    in-progress
Stage:    collect_analyze (2 of 4)
Progress: 45%
Pages:    12 discovered, 8 analyzed

Wait until the state changes to completed. You can re-run genome status to check.

Analysis taking too long? For large sites, use --scope to focus on key pages:
bash
actionxm genome create --scope /products /checkout /pricing /about

Step 5: Review What Genome Found

View the summary

bash

actionxm genome summary view --version v1.0

This outputs a markdown report covering:

Site structure and page types discovered
Key user flows (e.g., homepage → product → cart → checkout)
Content categories and conversion paths
SDK detection and existing tracking found

View the suggestions

bash

actionxm genome suggestion view --version v1.0

This shows the generated tracking plan:

Event rules — Declarative events for key actions (e.g., "Add to Cart clicked", "Pricing page viewed")
Labels — Profile classifications (visitor, lead, customer)
Audiences — Dynamic segments (e.g., "High-intent visitors: 3+ product views in 7 days")
Workflows — Automation suggestions (e.g., "Show discount banner after 2nd cart abandonment")

Step 6: Apply the Tracking Plan

If the suggestions look good, apply them to your project:

bash

actionxm genome suggestion apply --version v1.0

✓ Suggestions applied
  Event rules: 8 created
  Labels:      4 created
  Audiences:   3 created
  Workflows:   2 created

The event rules take effect immediately — the SDK picks up the new configuration within 5 minutes (no code changes needed). Visitors will start being labeled and segmented automatically.

Step 7: Explore the Dashboard

Now that tracking is running and the tracking plan is applied, explore each DXA tab:

Overview (`/dxa/overview`)

Your home base. Stat cards show session count, average duration, and bounce rate. The sessions-over-time chart reveals traffic patterns.

Click Heatmap (`/dxa/heatmap`)

Select a page URL from the dropdown to see where visitors click. Hot spots appear as colored dots — larger and redder means more clicks.

Scroll Depth (`/dxa/scroll-depth`)

See how far down the page visitors scroll. The bucket chart shows what percentage reached 25%, 50%, 75%, and 100%. If most visitors don't scroll past 50%, your key content may be too far down.

Frustration Signals (`/dxa/frustration`)

Three tables surface visitor pain points:

Rage clicks — Rapid repeated clicks (broken button? slow response?)
Dead clicks — Clicks that produced nothing (misleading UI element?)
Quick backs — Left a page within 5 seconds (wrong content? confusion?)

Performance (`/dxa/performance`)

Core Web Vitals with rating badges (Good / Needs Improvement / Poor). The "Worst Pages" table highlights pages with >10% poor rate — fix these first.

Session Replay (`/dxa/replay`)

Watch real visitor sessions played back. Filter by frustration signals to find the most painful experiences first. Click a session to see the rrweb player with a timeline, event markers, and playback controls.

Funnel (`/dxa/funnel`)

Visualize conversion funnels (e.g., Homepage → Product → Cart → Checkout → Purchase). Dropoff indicators show where visitors abandon. Click "See why" to view session recordings of dropoff visitors.

Pages (`/dxa/pages`)

Sortable table of all tracked pages with session count, avg duration, and bounce rate. Use this to find underperforming pages.

Use Smart Filters

The filter bar below the header lets you slice all tabs by device type, browser, and OS. Save a filter combination as a named segment to reuse it later.

Step 8: Tune and Iterate

Now that you have baseline data:

Lower replay sample rate — Once you have enough recordings, set data-replay-sample-rate="0.1" to reduce overhead
Re-run Genome — After making site changes, run a new version:
bash
```
actionxm genome create --version "v2.0"
```
Add custom events — If Genome missed something, add event rules manually via the dashboard

Set up surveys — Use VoC surveys to capture qualitative feedback alongside your quantitative DXA data:

bash

actionxm surveys create --name "Exit Survey" --type nps \
  --from-prompt "Quick exit survey for an e-commerce store"

Quick Reference

Task	Command
List projects	`actionxm projects list`
Check status	`actionxm status`
Start genome analysis	`actionxm genome create`
Monitor progress	`actionxm genome status`
View results	`actionxm genome summary view --version v1.0`
View suggestions	`actionxm genome suggestion view --version v1.0`
Apply suggestions	`actionxm genome suggestion apply --version v1.0`
List genome versions	`actionxm genome list`
Cancel analysis	`actionxm genome cancel --version v1.0`

Troubleshooting

No data in dashboard after adding the script?

Open DevTools → Console, look for [tracker] log messages
Check Network tab for requests to /collect — they should return 200
Verify data-site-id matches your project ID (actionxm projects list)
Wait at least 15 seconds — the SDK batches events before sending

Genome analysis stuck or failed?

Check status: actionxm genome status
For large sites (500+ pages), restrict scope: --scope /products /pricing
Cancel and retry: actionxm genome cancel --version v1.0 then actionxm genome create

Session replay not recording?

Verify data-replay="true" is on the script tag
Check that the replay sample rate isn't 0: data-replay-sample-rate="1.0"
Open DevTools Console and look for [replay] log messages
rrweb is lazy-loaded — first recording starts after page load completes

DXA Cookbook: From Zero to First Insights ​

Scenario ​

Prerequisites ​

Step 1: Create a Project ​

Step 2: Add the Tracking SDK ​

Using a framework (React, Next.js, Vue, etc.)? ​

Step 3: Verify Tracking Works ​

Step 4: Run a Genome Analysis ​

Step 5: Review What Genome Found ​

View the summary ​

View the suggestions ​

Step 6: Apply the Tracking Plan ​

Step 7: Explore the Dashboard ​

Overview (/dxa/overview) ​

Click Heatmap (/dxa/heatmap) ​

Scroll Depth (/dxa/scroll-depth) ​

Frustration Signals (/dxa/frustration) ​

Performance (/dxa/performance) ​

Session Replay (/dxa/replay) ​

Funnel (/dxa/funnel) ​

Pages (/dxa/pages) ​

Step 8: Tune and Iterate ​

Quick Reference ​

Troubleshooting ​

DXA Cookbook: From Zero to First Insights

Scenario

Prerequisites

Step 1: Create a Project

Step 2: Add the Tracking SDK

Using a framework (React, Next.js, Vue, etc.)?

Step 3: Verify Tracking Works

Step 4: Run a Genome Analysis

Step 5: Review What Genome Found

View the summary

View the suggestions

Step 6: Apply the Tracking Plan

Step 7: Explore the Dashboard

Overview (`/dxa/overview`)

Click Heatmap (`/dxa/heatmap`)

Scroll Depth (`/dxa/scroll-depth`)

Frustration Signals (`/dxa/frustration`)

Performance (`/dxa/performance`)

Session Replay (`/dxa/replay`)

Funnel (`/dxa/funnel`)

Pages (`/dxa/pages`)

Step 8: Tune and Iterate

Quick Reference

Troubleshooting