> ## Documentation Index
> Fetch the complete documentation index at: https://docs.traceten.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Plain HTML

> Add Traceten to any static site or HTML template in one step.

## What this lets you do

Paste one line into your HTML and start detecting AI-referred traffic on every page that includes it.

## Before you start

* Your Traceten site key, from **Sites → Install** in the [dashboard](https://app.traceten.com/dashboard). It looks like `ttid_7Rb4TrC1dTbnD8w3s1TS12`: always `ttid_` followed by 22 letters and digits, and case-sensitive.
* Write access to the HTML file or template that contains your site's `<head>` tag.

## Steps

<Steps>
  <Step title="Open your HTML template">
    Find the file containing your global `<head>` tag. For a simple static site, this is usually `index.html`. For a templating system (Jinja, Handlebars, ERB), it's whatever file wraps every page, typically named `base.html`, `layout.html`, or `_layout.html`.

    If each page has its own `<head>`, you'll need to add the snippet to each file. Using a shared layout template is simpler.
  </Step>

  <Step title="Paste the snippet before </head>">
    Add the tag anywhere inside your `<head>` block. Copy it from **Sites → Install** for your site so `data-site` (your site key) is already yours. `data-cookie-domain` only appears once you've confirmed a value under **Sites → Settings → Cookies**. It's off by default, so a freshly created site's tag won't carry it yet.

    ```html theme={null}
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>My site</title>

        <!-- Traceten AI traffic attribution -->
        <script
          async
          src="https://cdn.traceten.com/tt.min.js"
          data-site="ttid_7Rb4TrC1dTbnD8w3s1TS12"
          data-cookie-domain="example.com"
        ></script>
      </head>
      <body>
        <!-- page content -->
      </body>
    </html>
    ```

    The `async` attribute is important. It tells the browser to load the script without waiting for it, so the snippet never delays your page from rendering.

    `data-cookie-domain` keeps one visitor as one visitor across your subdomains, so an AI referral that lands on `example.com` still gets credit for a signup that completes on `app.example.com`. It's off by default, so confirm a value under **Sites → Settings → Cookies** first if you want it. Leave it as the dashboard gives it to you once you have. If your site has no subdomains it does no harm, and if the value does not match the page it is ignored. See [Subdomains and cross-domain](/install/subdomains).
  </Step>

  <Step title="Deploy your changes">Push or upload the updated file to your hosting provider.</Step>

  <Step title="Verify it works">
    Open your site in a browser, then open **Sites → Install** in the [dashboard](https://app.traceten.com/dashboard) and look at the **Verify** step. It should turn green within 30 seconds of a pageview.
  </Step>
</Steps>

## Notes

**The snippet does not block rendering.** The `async` attribute and internal use of `requestIdleCallback` mean the snippet has no impact on your Largest Contentful Paint or Time to Interactive scores.

**The snippet is under 10KB gzipped.** It has zero runtime dependencies and no external requests other than the single event POST to `ingest.traceten.com`.

**One site key per domain.** If you run multiple sites (e.g. `example.com` and `docs.example.com`), create a separate site in the dashboard for each and use their respective keys.

## Next steps

* [Verify the snippet is firing](/install/verify)
* [Troubleshooting](/install/troubleshooting) if you don't see the green indicator
