Install Motif in application code

The tracker is a deferred script. Identify and milestones are browser calls. Stripe Connect remains the only revenue writer.

Tracker

Put this tag in the first HTML document that a visitor opens (root layout or index.html). If signup is on the app origin, put the same tag there with the same website id. Use one Motif website. Replace WEBSITE_ID with the id from Websites. Motif does not find Clerk users automatically. After auth, call identify and track("signup_completed") with the product user id. A reverse-proxy install can serve the same file from your own host, because the script posts events relative to its own URL.

<script defer src="https://collect.motiftrace.com/m.js" data-website-id="WEBSITE_ID" data-domain="example.com"></script>

On localhost, the tracker does nothing unless the tag includes data-allow-localhost. The tracker sends text/plain so that the beacon stays a CORS-simple request.

Identify a signed-in user

After authentication, call identify with the product's stable internal user id. Never give an email, name, or profile field. Motif HMAC-hashes the id on the server and never stores the raw value.

window.motif?.identify(currentUser.id)

Canonical milestones

Record signup after the account exists. Record checkout_started immediately before a server-created Checkout Session or a Stripe Pricing Table. Do not record checkout_started for Payment Links and Buy Buttons. The tracker sends it for those on click.

window.motif?.track("signup_completed")
window.motif?.track("checkout_started")

Stripe success URL

If your backend creates Checkout Sessions, keep Stripe's placeholder on the success URL. Motif reads session_id from that page and joins the visitor to the payment. The tracker never accepts an amount.

https://yoursite.com/thanks?session_id={CHECKOUT_SESSION_ID}

{CHECKOUT_SESSION_ID} is Stripe's literal token. Do not replace it. You can also set client_reference_id yourself. If you set it, your value wins. The tracker stamps Payment Links, Buy Buttons, and Pricing Tables.

Give this task to a coding agent

If you are signed in, go to Websites → Install tracker → Copy install prompt. That gives you this prompt with your website id. If not, replace WEBSITE_ID and example.com. Then paste:

Add Motif analytics to the existing example.com codebase.

Motif is one hosted script tag plus some optional browser calls. You do not install a package or build a backend.

Done means:
- Every page of example.com serves the tag below inside <head> in the initial HTML.
- You did each optional step below, or you skipped it and gave a one-line reason.
- You end with the report at the bottom.

Facts (use them exactly; do not change them or search for them)
Website id: WEBSITE_ID
Domain: example.com
Script: https://collect.motiftrace.com/m.js
Tag:
<script defer src="https://collect.motiftrace.com/m.js" data-website-id="WEBSITE_ID" data-domain="example.com"></script>

Adapt to this product
The steps below are a template. You can read this codebase, so you know the product better than this prompt does. Use that knowledge.
- First, find what example.com sells and how a visitor becomes a paying customer: landing page, signup, trial, onboarding, checkout. Write that path at the top of your report.
- Put each Motif call at the real moment in that path, even if the code does not look like the examples. If an account is created only after an email link or an invite, call signup_completed there, not on the form submit.
- Motif ranks channels with two event names only: signup_completed and checkout_started. Map the moments of this product to these names. Do not invent other names; Motif does not use them in rankings.
- If the product has a moment that these names do not cover (a demo booking, a waitlist, a free tool), do not track it. List it under "Suggestions".
- If a step does not fit this product, skip it and give the reason. Do not force a step.
- The Facts and the Rules do not change. Everything else is your decision.

Examine the code before you edit
- Find the framework. Find the one file that renders <head> for every route:
  - Next.js App Router: app/layout.tsx <head>, or next/script with strategy="beforeInteractive"
  - Next.js Pages Router: pages/_document.tsx <Head>
  - Vite, Create React App, plain HTML: index.html <head>
  - Remix / React Router: app/root.tsx <head>
  - Astro: the shared layout in src/layouts/
  - Nuxt: app.head.script in nuxt.config
  - SvelteKit: src/app.html
  - Rails, Django, Laravel, Hugo, Jekyll, Eleventy: the base layout or head partial
  - WordPress theme: a wp_head action in functions.php, or header.php before </head>
- Search for login (signup, register, createUser, Clerk, Auth0, NextAuth, Supabase auth, Firebase auth).
- Search for Stripe Checkout (checkout.sessions.create, success_url, buy.stripe.com, stripe-pricing-table).
- If two files can be the shell, or the app is in a different repo, stop. Ask which one before you edit.

Steps

1. Tracker (always)

Put the tag above, unchanged, in the <head> of the document that wraps every route. The tag must be in the initial HTML on first paint. If signup or the logged-in app is on a different origin (for example app.example.com), put the same tag with the same website id there too. One Motif website covers the two origins.

2. Stripe success URL (only if this code creates Stripe Checkout Sessions)

Keep Stripe's placeholder on success_url, for example:

success_url: "https://example.com/thanks?session_id={CHECKOUT_SESSION_ID}"

{CHECKOUT_SESSION_ID} is Stripe's literal token. Do not replace it. Do not add client_reference_id. Payment Links and Buy Buttons need no change.

3. Identify signups (only if the product already has login)

Immediately after authentication succeeds on the client, call identify with the product's stable user id. Never use an email:

window.motif?.identify(currentUser.id)

Immediately after the product creates a new account, call this. Do not call it on every login:

window.motif?.track("signup_completed")

If the product has no login, skip this step.

4. Checkout start (only for server-built Checkout Sessions or a Stripe Pricing Table)

Call this on the click that opens Checkout:

window.motif?.track("checkout_started")

For Payment Links and Buy Buttons, skip this step. The tracker already records those clicks.

5. Chrome extension (only if this product already ships one that opens the web app)

Open the web app with the chrome-extension referrer intact (do not use noreferrer). Put the extension id in the query:

const extId = chrome.runtime.id;
chrome.tabs.create({
  url: `https://app.example.com/extension-login?ext_id=${encodeURIComponent(extId)}`,
});

Replace /extension-login with the path that the extension already opens. Do not load m.js inside the extension.

Rules
- Edit only files that already exist. Do not add a Motif backend, SDK, npm package, README, or environment variable.
- Do not create a second Motif website. Do not use a different website id.
- If a document already has a Motif tag (a <script> with a src that ends in /m.js), replace it with the tag above. Keep one tag in each document. The first tag on a page wins.
- Do not put the tag in a component that renders after hydration or client routing.
- Do not put the tag in a tag manager or only on a thank-you page.
- Never send emails, names, or profile fields to Motif. Give identify only the product user id.
- Keep every Motif call in the browser. Write each call as window.motif?. so that a blocked script never throws.
- Do not invent attribution. Do not change payment amounts. Do not change Stripe webhooks or Motif billing.

Verify
- Build or start the site. Get the home page HTML (curl or view-source).
- Make sure data-website-id="WEBSITE_ID" is inside <head> in that HTML, and that no script injects it later.
- If you can open a browser, examine the Network tab. It must show m.js and a request to /v1/events.
- Read the diff again. Make sure no identify call gets an email or a name.

Report back in this shape
Product path: how a visitor becomes a paying customer, and where each Motif call sits on that path
Files changed: one line per file
Steps: each step above as done or skipped, with the reason for each skip
Verified: what you examined and how; what you could not examine
Founder to do: deploy, DNS, or Stripe dashboard steps that a person must do
Suggestions: product moments that Motif does not track yet, and other changes that would give Motif better data

After the deploy, open https://example.com one time. Motif's setup screen shows live in a few seconds.