# SplitDuck setup instructions

## What SplitDuck is
SplitDuck continuously A/B tests the copy on this website (headlines, buttons,
body text) and automatically shows the best-performing version to visitors.
You mark which text to test in the HTML; the site owner writes the alternative
versions ("variants") in the SplitDuck dashboard. No variant copy lives in code.

## 1. Install the script
Add this to the <head> of every page, as early as possible, before any other
content. Replace YOUR_SITE_KEY with the site's key. If you don't have it, ask the
site owner: it's shown on the Setup page of the SplitDuck dashboard.

<style id="splitduck-hide">[data-splitduck]{visibility:hidden}</style>
<script>
  window.splitduck = window.splitduck || { q: [], track: function () { this.q.push(arguments); } };
  setTimeout(function () {
    var style = document.getElementById("splitduck-hide");
    if (style) style.remove();
  }, 500);
</script>
<script src="https://splitduck.com/splitduck.js" data-site-key="YOUR_SITE_KEY" async></script>

## 2. Tag experiments
Add a data-splitduck attribute to each element whose text should be tested:

<h1 data-splitduck="headline">Find a better headline</h1>

Rules:
- The value is the experiment's name. Use a short, stable, snake_case name
  (e.g. "headline", "hero_subheadline", "pricing_cta"). Names are unique per
  site: the same name on two pages is the same experiment.
- Never rename an existing tag. A new name creates a new experiment and starts
  its results from zero.
- The element must contain plain text only. SplitDuck replaces the element's
  entire text content, so any nested markup (links, <strong>, icons, spans) is
  lost. Put the attribute on the innermost element that holds just the text.
- The element must be in the page's HTML when it loads. SplitDuck scans for
  tags once, when the page finishes loading; elements added later by
  client-side JavaScript are not picked up.
- The current text becomes the "control" the first time a visitor loads the
  page. Leave the original copy in place; don't put variant text in code.
- Tag copy that is the same for every visitor. Don't tag personalised or
  dynamic text (names, prices, dates, counts).

## 3. Tag goals (conversions)
Call splitduck.track() when a visitor completes the action you want more of:

splitduck.track("signup_completed");

Rules:
- Use a short, stable, snake_case event name describing a completed action
  (e.g. "signup_completed", "checkout_started", "demo_booked").
- Call it once, at the moment the action succeeds (after a successful form
  submit or API response, not on the button click that starts it).
- It is safe to call before the SplitDuck script has finished loading; calls
  are queued and sent once it loads.
- Tracking an event only registers it. The site owner then picks it as the
  goal for each experiment in the SplitDuck dashboard; until then it doesn't
  count as a conversion.
- An experiment doesn't run until it has a goal: visitors see the original
  text and nothing is recorded.

## 4. Verify
Load a page with at least one tagged element in a browser. The browser console
logs "[splitduck] connected — N experiment(s) active.", and each tagged element
appears under Experiments in the SplitDuck dashboard.