Attribution Playground

The Attribution Playground is an interactive demo that shows exactly how the AttributionHub attribution script works. Simulate visitor journeys from any traffic source and see in real time which channel, source, and campaign the script detects — without installing anything on your site.

Page URL: attributionhub.com/playground 

What It Does

The Playground loads the real production attribution script inside a sandboxed iframe, then fakes the landing page URL and referrer so the script processes the visit as if it happened on your actual website. You can:

• Simulate visits from 15 different traffic sources — paid ads, organic search, social media, email, AI chatbots, affiliates, and direct
• See which channel, source, medium, and campaign the script detects
• Observe how first-touch and latest-touch attribution differ over multiple visits
• Review a visit-by-visit log showing the landing URL, referrer, and detected channel for each simulation
• Inspect the raw localStorage data the script stores
• Preview how hidden form fields get populated

This makes it a powerful tool for understanding attribution logic, testing UTM configurations, and evaluating AttributionHub before installing it.

How to Use It

1. Choose a Scenario

The Playground provides quick presets (collapsible) for common traffic sources:

Click any preset to pre-fill the URL and referrer fields, or enter your own values manually. The presets section is collapsible — click the label to toggle it.

2. Configure the Visit

• Simulated Landing Page URL — The full URL the visitor would land on, including any UTM parameters or ad click IDs (e.g. gclid, fbclid). Displayed in a multi-line text area for easier editing of long URLs.
• Simulated Referrer — The page the visitor came from (e.g. https://www.google.com/). Leave empty for a direct visit.

3. Click “Simulate Visit”

The Playground runs the attribution script with your simulated URL and referrer. A mock website appears in the preview panel with a fake browser chrome (address bar showing your simulated URL).

The status indicator in the top-right corner of the Simulate a Visit card shows the current state:

• Ready (green) — No simulation has been run yet
• Simulating… (amber) — The script is currently running
• N visits simulated (indigo) — Shows the total number of simulated visits
• Error (red) — The script failed to load

4. Review the Results

After simulation, several panels display the attribution data:

Demo Site Preview — Shows a mock “Contact Us” form with hidden attribution fields auto-populated by the script. This demonstrates exactly what would happen on your real website.

Attribution Results — Displays the structured attribution data, including:

• Visitor ID and total touch count
• First Touch — The very first visit’s channel, source, medium, campaign, and other fields
• Latest Touch — The most recent visit’s attribution data
• Latest Non-Direct Touch — The most recent visit that was not a direct/unknown source (useful because direct visits do not overwrite previous attribution)

Each touch card shows: channel group, source, medium, campaign, paid/organic flag, source platform, drill-down fields, landing URL, referrer, and timestamp. See the Field Reference for details on every field.

localStorage Raw Data — The raw JSON stored locally by the script, available in a collapsible panel with syntax highlighting and a copy button.

5. Simulate Multiple Visits

You can simulate additional visits to see how multi-touch attribution works. First-touch data remains locked to the original visit, while latest-touch updates with each new simulation. The touch count increments with each visit.

Visit Log

The Visit Log (collapsible, below the Simulate a Visit card) records each simulated visit with:

• Visit number and detected channel group badge
• Full landing page URL (including all query parameters)
• Referrer URL (or “no referrer” for direct visits)

This gives you a chronological history of all simulated visits in the current session. The badge on the Visit Log header shows the total number of recorded visits.

Reset

Use the Reset button next to the status indicator to clear all stored data, the visit log, and start over.

Script Settings

Expand the Script Settings section to customize how the attribution script behaves:

This section also displays a live embed code snippet showing the exact <script> tag you would add to your website, updated as you change settings.

How It Works Internally

The Playground uses a two-part architecture:

1. Parent component — A component managing the UI, settings state, presets, visit log, and result display.
2. Sandboxed iframe — A static HTML page that receives configuration via URL query parameters, overrides window.location (via history.replaceState) and document.referrer to match the simulated visit, then loads the real attribution script.

To keep playground data separate, the actual localStorage key is always <your-name>-playground. With the default name, that’s attrhub-playground — visible in DevTools under Application → Local Storage.

Communication between the parent and iframe uses the browser postMessage API. After the script runs, the iframe applies a fixup step that replaces the real origin with the simulated origin in the stored data. It then reports the attribution results and localStorage contents back to the parent.

Because the real production script is used (not a simulation or mock), the results you see in the Playground are identical to what would happen on a live website.