Install with an AI assistant

If you build with an AI coding assistant, you don't have to find the right file yourself. Muro gives you a ready-made prompt with your project ID already in it. Paste it into your assistant and it adds the script in the right place for your framework.

Steps

What the prompt tells your assistant

The prompt is a fixed set of instructions, the same for every project apart from your ID. It asks the assistant to:

• Add the script so it loads on every page, in the root layout or template, not on individual pages.
• Use the right file for your framework. It includes exact instructions for plain HTML, Next.js App Router (app/layout.tsx), Next.js Pages Router (pages/_document.tsx, created if missing), React with Vite or Create React App (index.html), Vue with Vite or Vue CLI (index.html), Astro (your root layout) and a Shopify theme (layout/theme.liquid).
• Use a plain <script async> tag in <head> everywhere. For Next.js it says explicitly not to use next/script, because that loads after hydration and can miss the first pageview.
• Leave the data-project-id value and the script URL exactly as they are.
• Never load the script during server-side rendering, since it uses browser-only APIs.
• For Shopify, add only the theme script. The Muro pixel for carts and checkouts is something you add by hand in Shopify admin (see Install Muro on Shopify).
• Check for a Content Security Policy and, if there is one, allow https://api.muroanalytics.com in script-src and https://cdn.muroanalytics.com in connect-src.
• Tell you how to verify the install in the Network tab.

What a good change looks like

For a Next.js App Router project, the whole change should look like this:

// app/layout.tsx
<head>
  <script
    async
    data-project-id="YOUR_PROJECT_ID"
    src="https://api.muroanalytics.com/muro.js"
  />
</head>

Push back on the assistant if the diff:

• Uses next/script or a strategy prop.
• Puts the script in one page or component instead of the root layout.
• Installs an npm package. Muro has none; the script tag is the whole install.
• Changes the project ID or the script URL.
• Adds the script in more than one place, which would count every pageview twice.

Track an event with your assistant

Custom events have their own prompt. In the Custom Events panel on your dashboard, click Track an event (or Generate a setup prompt if you have no custom events yet), describe the action (for example "Finishes creating an account"), pick an event name and your framework, then click Generate prompt and Copy prompt.

• For A click, the prompt asks your assistant to add a data-muro-event attribute to the button or link. No JavaScript is added.
• For Something that completes, like a signup or a payment, it asks for a small safe wrapper around window.muro.track that fires once, after the action has actually succeeded.

See Track custom events for the details.

Verify it works

After you deploy, load a page of your live site, then:

1. Open DevTools, go to the Network tab, filter by collect and reload. You should see a POST to cdn.muroanalytics.com/collect with status 202.
2. Or set the dashboard time picker to Live. Your visit appears within about 30 seconds.

If you're still on onboarding step 2, it switches from "Waiting for first event…" to "Data received!" on its own.

Next steps