# Set up MIRA FIVE with your developer.

> Who does what to set up MIRA FIVE: the project, purchase goal and Google Ads for you; the script, consent line and paid order for your developer.

URL: https://mirafive.io/setup

You click through three screens. Your developer, or their coding agent, adds a few lines to the site. This page lists both, in order, so you can send it on.

No developer at hand? The script alone goes into any site that lets you add code to the head.

You, in the dashboard

1. Create the project and a website source
2. Mark the paid order as a purchase goal
3. Connect Google Ads

Your developer, in the site

1. Add the script to every page
2. Pass the consent answer
3. Send the paid order

Setup takes seven steps, and four of them need no code. Your developer adds the script, the consent line and the paid order. You create the project and its source, check with your developer that events arrive, mark the paid order as a purchase and connect Google Ads.

## First, decide how it collects.

Each website source has a collection mode. It decides what MIRA FIVE can show.

### Consentless

The default. Counted as visits.

- No cookies, nothing stored on the device
- Visits, pages, channels and campaigns
- Events and conversions per visit
- People, buyers and cost per buyer read “Needs consent”

### Full

Behind your consent banner. Followed as a person.

- Nothing sent until the visitor agrees
- Buyers per channel and the person behind each purchase
- Google Ads cost per buyer
- Ids kept in localStorage, never in cookies

Buyers per channel and cost per buyer need visitors who agreed. If your site already shows a consent banner, choose Full. A Full source can also count visitors who decline, without cookies, when each page chooses the mode per visitor.

## Seven steps, in order.

The menu names are the ones in the app. The docs have every detail for your developer.

1. ### Create the project and a website source  
You  
Sign up, create a project, then go to **Data → Sources → Add source** and choose **Website**. Enter the site’s address under Allowed origins and pick the collection mode. The source comes with its website key (`mf_…`) on the **Install** tab.
2. ### Add the script to every page  
Your developer  
Two lines in the head of every page, about 4 kB. For a Full source add `data-mode="full"`; for a consentless one leave it out. React, Next.js, Vue, Nuxt, Astro, Laravel and Symfony have their own packages. Or let a coding agent do it: the source’s Install tab has **Let your coding agent install it**, a prompt for Claude Code, Cursor or Codex with the key, the allowed origins, every step and the check.  
```  
<script>window.mirafive=window.mirafive||function(){(mirafive.q=mirafive.q||[]).push(arguments)}</script>  
<script defer src="https://cdn.mirafive.io/mira.js" data-key="mf_…" data-mode="full"></script>  
```
3. ### Pass the consent answer  
Your developer  
For a Full source only. Nothing is sent until the banner passes the visitor’s answer. `true` means statistics only, `false` forgets the ids and the user and clears the queue, and an object sets statistics, experiments and targeting one by one. When someone signs in, `identify` joins their visits to your own user id; `reset` on sign-out. Works with your consent banner; the docs show a Cookiebot example.  
```  
<script>  
  // Call from your consent banner whenever the visitor answers or changes their choice.  
  mirafive('consent', { statistics: agreedToStatistics })  
  // On every page load while someone is signed in, with your own user id (never an email).  
  mirafive('identify', user.id)  
</script>  
```
4. ### Send the paid order  
Your developer  
The purchase needs its revenue and currency. The quickest way is one line on the order confirmation page, which in full mode lands on the person who paid.  
```  
<script>  
  mirafive('track', 'order_paid', { revenue: 328, currency: 'EUR' })  
</script>  
```  
More exact: send it from the server, where ad blockers and closed tabs cannot lose it and a repeated webhook counts once. Pass the same user id the page gives `identify`. SDKs for Node.js, PHP, Laravel and Symfony do the sending.  
```  
import { Mira } from '@mirafive/sdk-server'  
const mira = new Mira({ key: process.env.MIRAFIVE_SECRET_KEY })  
await mira.send(  
  [{ name: 'order_paid', userId: order.customerId, properties: { revenue: 328, currency: 'EUR' } }],  
  { idempotencyKey: `order-${order.id}` },  
)  
```
5. ### Check that it arrives  
Together  
Open the site on its real domain, since localhost sends nothing by default, and accept the banner for a Full source. Your visit shows up under **Data → Live** within seconds, and the project’s setup guide switches to **Receiving events**. The first real order then shows under **Data → Events**.
6. ### Mark the paid order as a purchase  
You  
Once the first order has arrived, open **Goals → New goal**, name it, choose the event `order_paid` and set the goal to **Purchase**. Revenue comes from the event’s `revenue` property, per currency. From then on the dashboard counts buyers.
7. ### Connect Google Ads  
You  
Go to **Data → Sources → Add source**, choose **Google Ads**, sign in with Google and pick the ad account. Spend arrives every day, and each campaign shows its cost per buyer. Auto-tagging’s click id joins a click to its campaign; if Acquisition lists paid visits without a campaign, add this to the final URL suffix in Google Ads under Admin → Account settings → Tracking.  
```  
utm_campaign={campaignid}  
```

## For your developer.

The facts to check before and after the change.

Website key

`mf_…`, public by design: it can only send events and read the source’s flags, and only from its allowed origins.

Secret key

For server events. Read from `MIRAFIVE_SECRET_KEY`, shown once, never in browser code.

Endpoints

Browsers send to `events.mirafive.io/v1/batch/<website key>`, servers to `events.mirafive.io/v1/batch` with the secret key.

Content Security Policy

`connect-src https://events.mirafive.io`, and for the script tag `script-src https://cdn.mirafive.io`.

Storage

No cookies in any mode. In full mode, ids in localStorage after consent; nothing before.

Sends nothing

From localhost unless allowed, from bots, and from browsers with Do Not Track or Global Privacy Control.

Retries

Each batch id counts once; an idempotency key makes a repeated webhook count once.

[Read the quickstart](https://docs.mirafive.io/quickstart)

## Questions about setup.

### Do I need a developer?

For the script alone, no: anyone who can add code to the head of the site can paste it. The consent line and the paid order need someone who edits the site’s templates or server code, or a coding agent with the prompt from the Install tab.

### How long does it take?

The docs’ quickstart gets a first event through in about five minutes. The consent line and the paid order depend on how your site is built; the steps above are the whole list.

### Is there a plugin for Shopify, Shopware or WooCommerce?

No. The script goes into the theme’s head, and the purchase line onto the order confirmation page or into the server code. On Shopify the order status page no longer runs your own scripts, so the paid order comes from a server that receives Shopify’s order webhook.

### How does my developer get the key?

Copy it from the source’s Install tab, or copy the ready prompt. On Free a workspace has one member; on Pro you can invite your developer to the project.

### Can we test before the site goes live?

Yes. Pages on localhost send nothing unless you allow it with `data-track-localhost`, so development stays out of your numbers. To keep your own visits on the live site out, set `window.__mirafive_ignore`, as the docs describe.

## Create the project, then send this page.

Free up to 25,000 events a month, no card. The first visits show up live.

[Start free](https://app.mirafive.io/register)[Send to your developer](mailto:?subject=Setting%20up%20MIRA%20FIVE%20on%20our%20site&body=Hi%2C%0A%0Awe%20are%20setting%20up%20MIRA%20FIVE%2C%20our%20analytics%20for%20channels%20and%20Google%20Ads%2C%20hosted%20in%20Germany.%20Could%20you%20add%20it%20to%20the%20site%3F%20The%20steps%20for%20you%20are%20here%3A%0A%0Ahttps%3A%2F%2Fmirafive.io%2Fsetup%0A%0AI%20will%20send%20you%20the%20website%20key%20from%20the%20source%E2%80%99s%20Install%20tab%2C%20or%20the%20ready%20prompt%20for%20your%20coding%20agent.%0A%0AThanks!)