# Script tag Source: https://docs.mirafive.io/sdks/script-tag > Add MIRA FIVE analytics, feature flags and page experiments to any website by pasting two lines into the page head. `@mirafive/tracker` is the hosted script: two lines in the `` of every page, no build step. Use it for WordPress, Webflow, Shopify themes, static HTML and server-rendered templates. For an app you bundle yourself, use the [browser SDK](https://docs.mirafive.io/sdks/browser) or a framework package from the [SDK overview](https://docs.mirafive.io/sdks) instead. On Laravel and Symfony, the server package renders this tag for you: see [Laravel](https://docs.mirafive.io/sdks/laravel) and [Symfony](https://docs.mirafive.io/sdks/symfony). ## Install Paste this into the `` of every page, usually the shared layout or theme header: ```html ``` - The first line is the command queue. It defines `mirafive(…)` at once, so calls made before the script arrives wait in `mirafive.q` and run, in order, when it has loaded. Leave it out only if nothing on the page calls `mirafive(…)` before the script loads. - The second line loads the loader, `mira.js` (4.31 kB min + gzip). It records a pageview for the landing page and for every client-side navigation. Load `mira.js` by `src`. It finds its feature chunks from its own URL, so it does not work inlined, as `type="module"` or through `eval`. The loader is ES2020 (Safari 14 and later). The feature-flag code uses `Object.hasOwn` (Safari 15.4 and Chrome 93 and later). The script has no dependencies. ## Set up You need the **website key** of a website source (`mf_…`). See [Keys](https://docs.mirafive.io/keys) for where to find it. Put it in `data-key`. The key is public and safe in page source. If your templates read configuration from the environment, keep the key in `MIRAFIVE_WEBSITE_KEY` and print it into the tag. A literal key in the template works too. Turn on more features with attributes on the same tag: ```html ``` On/off attributes are on when present and off when absent or set to `off` or `false` (any case). A template can write `data-autocapture="{{ autocapture }}"`. Every attribute is listed in the [API reference](#attributes). The script starts in [consentless mode](https://docs.mirafive.io/guides/consent#consentless-mode): it sets no cookies, stores nothing on the device, never reads the browser's language, time zone or screen size, and needs no consent banner. > **Warning:** Never put a secret key in a page. MIRA FIVE refuses a secret key in the batch URL with `403 secret_key_in_path` and marks the key as exposed. ## Verify 1. Open the site on its real domain. Pages on `localhost`, `127.*`, `[::1]`, `*.local` and `file:` send nothing unless you add `data-track-localhost`. 2. In the browser's network tab, check that `mira.js` loads with `200`. 3. Run `mirafive('flush')` in the console. Batches otherwise leave 5 seconds after the first event, after 20 events, or when the tab is hidden. 4. Look for `POST https://events.mirafive.io/v1/batch/mf_…`. It answers `202`: ```json { "batch": "…", "accepted": 1, "dropped": 0 } ``` 5. Open the source's live view in MIRA FIVE and find the pageview. Nothing arriving? See [Troubleshooting](#troubleshooting). ## Track events Call `mirafive('track', name, properties)` anywhere on the page, also before the script has loaded: ```html ``` Names are 1 to 128 characters and cannot start with `$`: those are reserved for events MIRA FIVE sends itself. Property limits and revenue are covered in [Track events](https://docs.mirafive.io/guides/track-events). To record clicks, form submits and field changes without code, add `data-autocapture`. Each becomes an `$autocapture` event that describes the element (tag, a short selector, id and stable classes, link or button text, the cleaned `href`, `name`, `type`, and `data-testid`, `data-test`, `data-cy`, `data-qa` and `data-track`). It never records what a visitor typed. It skips password, email and hidden inputs and everything inside an element with `data-mira-no-capture`. Autocapture works in both modes. ## Consent Consentless mode needs no consent call. To collect ids, identify users, run page experiments or target segments, switch the tag to [full mode](https://docs.mirafive.io/guides/consent#full-mode) with `data-mode="full"` and put it behind your consent management platform (CMP). In full mode, nothing is sent and nothing is stored until the visitor answers. The identity code is not even downloaded. Pass the answer with `mirafive('consent', …)`: | Answer | Effect | | --- | --- | | `true` | Grants statistics only. | | `{ statistics, experiments, targeting }` | Answers by scope. A scope you leave out keeps its last answer. | | `false` | Forgets the ids and the user, and clears the queue. | The landing pageview is sent when consent is first granted, so a visitor who accepts on the first page still counts that page. Wire your CMP's callback to the verb. `statistics` is the usual "analytics" category, `targeting` the "marketing" one: ```html ``` If the answer is known before the script runs (your CMP stored it, or the server knows it), set it first. The identity code then loads at once and the landing pageview counts as answered on arrival (`$boot: 1`): ```html ``` Set `window.__mirafive_consent = false` for a stored decline. A `consent` call queued with the snippet before the script ran counts the same way as the pre-set answer. Full mode stores, in `localStorage` only and never in cookies, `mirafive:{namespace}:aid` (the anonymous id, kept 365 days since last seen), `:sid` (the session, 30 minutes idle) and `:uid` (a hash of the user id). The namespace is the key without its last `_…` part. In consentless mode, `consent`, `identify` and `reset` do nothing, silently, and `anonymousId` answers `undefined`, so your CMP wiring can stay in place if you switch modes. Do Not Track, Global Privacy Control, `window.__mirafive_ignore = true` (set it for your own visits) and prerendered pages send nothing in either mode. See [Consent](https://docs.mirafive.io/guides/consent). ## Identify users In full mode, after the visitor granted statistics consent, identify the signed-in user and forget them on logout: ```html ``` `identify` sends `$identify` and puts the user id on every later event. Ids are 1 to 256 characters. When a different user signs in on the same browser, the anonymous and session ids start fresh. To link server-side events to the visitor, read the anonymous id. The callback gets `undefined` without statistics consent: ```html ``` In full mode, `identify`, `reset` and `anonymousId` wait until the first consent grant has loaded the identity code, then run in call order. See [Identify users](https://docs.mirafive.io/guides/identify-users). ## Feature flags Read flags inside a `flags` listener. It runs once flags have loaded, and again whenever they change: ```html ``` - `flag` returns the variant key, or `true`/`false` for an on/off flag. - `config` returns the remote-config value of the variant. - `flagProperties` passes facts for targeting rules. They stay in memory and are never sent: `mirafive('flagProperties', { plan: 'pro' })`. Read outside a listener, `flag` and `config` answer `undefined` before `mira.js` has run, and the fallback until flags have loaded. These reads are not replayed later, because a late read would count an [exposure](https://docs.mirafive.io/guides/experiments) for a value the page never showed. The flag code loads on the first `flag`, `config`, `flags` or `flagProperties` call. Add `data-flags` to start loading at once. A ` ``` The loader requests chunks from `chunks/` next to its own URL, with `integrity` and `crossorigin="anonymous"`. Send these headers: | File | Headers | | --- | --- | | `mira.js` | `Cache-Control: public, max-age=3600` | | `mira..js`, `chunks/*` | `Cache-Control: public, max-age=31536000, immutable` | | Every `.js` file | `Content-Type: text/javascript; charset=utf-8`. From another origin also `Access-Control-Allow-Origin: *`, because chunks are requested in CORS mode for SRI. | | `manifest.json` | `Cache-Control: no-cache` | When you update, add the new files and keep the old chunks. A browser that cached the previous `mira.js` for up to an hour still asks for the chunks it names, and pinned loaders ask for theirs forever. Serve the files unchanged: a proxy that rewrites them, or a folder that mixes files of two builds, breaks the integrity check. To send events through your own domain, point `data-host` at a proxy of `https://events.mirafive.io`, with scheme: `data-host="https://stats.example.com"`. ## Content Security Policy Allow the script origin and the events host: ```text script-src https://cdn.mirafive.io connect-src https://events.mirafive.io ``` When self-hosting, use your own origin in `script-src`. With `data-host`, use that host in `connect-src`. `connect-src` covers both batches and flags. - The inline queue snippet needs the page's `nonce` or its hash in `script-src`. - Under `'strict-dynamic'` the host allowlist is ignored. Give the `mira.js` tag the page's `nonce` too. The chunks it inserts are then allowed through it. ### Subresource Integrity `mira.js` cannot carry an `integrity` attribute: it changes with every release. For a loader that never changes under you, use the pinned copy. Take `loader.file` and `loader.integrity` (sha384) from `dist/manifest.json` of the version you want: ```html ``` Each loader carries the sha256 digests of its chunks and checks every chunk it loads, so a pinned loader only ever runs the chunks it was built with. ## API reference ### Attributes The loader reads these attributes of its own ` Print the key from the project's config or env (MIRAFIVE_WEBSITE_KEY) if templates read it; the key is public, so a literal is acceptable. Load mira.js by src, never inline it. On Laravel use @mirafiveScript from mirafive/sdk-laravel; on Symfony mirafive_script() from mirafive/sdk-symfony. 3. Keep the default consentless mode: it needs no consent banner. Only if the site already has a consent manager (CMP) and the owner wants ids: add data-mode="full" to the tag and call mirafive('consent', { statistics, experiments, targeting }) from the CMP's consent callback, or set window.__mirafive_consent before the tag when the answer is already known. 4. If the site sends a Content-Security-Policy, add https://cdn.mirafive.io to script-src and https://events.mirafive.io to connect-src, and give the inline snippet the page's nonce. If script-src uses 'strict-dynamic', give the mira.js tag the page's nonce as well. 5. Read feature flags only inside mirafive('flags', () => { … mirafive('flag', key, fallback) … }). 6. Verify: load a page on a non-localhost domain (or add data-track-localhost), run mirafive('flush') in the console, and check the network tab for POST https://events.mirafive.io/v1/batch/ answering 202. Report what you changed. Do not add other analytics libraries, cookies or consent banners. ```