Install the tracker on your platform

Every setup on this page adds the same script tag to the <head> of each page. Copy yours from Settings > Install in the dashboard. It carries your site id:

<script defer src="https://analytics.example.com/m.js?s=your-site"></script>

After you publish, open your site in a browser. You appear in Live within a few seconds. If you don't, the browser console says why, for example misomoon skipped: bot, and troubleshooting lists the other causes.

To count visitors whose ad blocker drops analytics requests, serve the tracker from your own domain and use that address in the tag (First-party proxy).

#Website builders

#WordPress

Install the misomoon plugin. It adds the tag, leaves out your own visits, can serve the tracker from your domain, and sends WooCommerce orders to misomoon (Track a WordPress site and WooCommerce store).

Without the plugin, add the tag from your theme. In a child theme's functions.php, or in a code snippets plugin, add:

add_action('wp_head', function () {
	echo '<script defer src="https://analytics.example.com/m.js?s=your-site"></script>';
});

A theme update replaces the parent theme's functions.php, so don't edit that file.

#Shopify

1. Open Online Store > Themes.
2. On your current theme, click ... > Edit code.
3. Open layout/theme.liquid and paste the tag before </head>.
4. Click Save.

Shopify's checkout doesn't load your theme's code, so the tracker doesn't count checkout pages. To count orders, post them to the custom webhook from your own code (Send payments from your own server).

#Webflow

1. Open Site settings > Custom code.
2. Paste the tag into Head code.
3. Save, then publish the site. Custom code runs only on the published site.

#Framer

1. Open Site Settings > General > Custom Code.
2. Paste the tag into the field for the end of the <head> tag.
3. Publish the site.

#Wix

1. Open Settings > Custom code in the Advanced section.
2. Click Add Custom Code and paste the tag.
3. Choose All pages and place the code in Head.
4. Click Apply.

Wix runs custom code only on a premium plan with a connected domain.

#Squarespace

1. Open Settings > Advanced > Code Injection.
2. Paste the tag into Header.
3. Click Save.

Code injection needs a plan that includes it.

#Ghost

1. Open Settings > Code injection.
2. Paste the tag into Site header.
3. Click Save.

#Carrd

Add an Embed element, set its type to Code and its placement to Head, and paste the tag. Embeds need a Pro plan.

#Google Tag Manager

1. Create a tag of type Custom HTML and paste the script tag.
2. Set its trigger to All Pages.
3. Submit and publish the container.

A blocker that stops Google Tag Manager also stops every tag inside it. To count those visitors, add the script tag to your pages directly, through a proxy.

#Frameworks

Single-page apps need nothing extra: the tracker counts each pushState route change as a pageview. For a router that uses #/routes, add data-hash to the tag.

#React, Next.js, and React Router

Use the <Misomoon> component from @misomoon/sdk/react in your root layout. In Next.js, withMisomoon() from @misomoon/sdk/next also sets up the proxy. The SDK guide shows both.

#Vue and Vite apps

Paste the tag into the <head> of index.html. To send events from components, call init() from @misomoon/sdk/web instead of adding the tag:

// main.ts
import { init } from '@misomoon/sdk/web'

init({ site: 'your-site', host: 'https://analytics.example.com' })

Then call track('Signup') from any component. Use either the tag or init(), not both: a tag in index.html and a call to init() add the tracker twice.

#Nuxt

Add the tag to nuxt.config.ts:

export default defineNuxtConfig({
	app: {
		head: {
			script: [{ src: 'https://analytics.example.com/m.js?s=your-site', defer: true }],
		},
	},
})

#SvelteKit

Paste the tag into the <head> of src/app.html, before %sveltekit.head%. To send events, import track from @misomoon/sdk/web. It does nothing during server rendering, so you can call it from any component.

#Astro

Add the tag to the <head> of your base layout. is:inline tells Astro to leave the tag as it is:

<script is:inline defer src="https://analytics.example.com/m.js?s=your-site"></script>

#Angular

Paste the tag into the <head> of src/index.html.

#Server-rendered apps

In Laravel, Django, Rails, Phoenix, and other frameworks that render pages from templates, paste the tag into the <head> of the layout that every page extends. For example, use resources/views/layouts/app.blade.php in Laravel or app/views/layouts/application.html.erb in Rails. To send events from your server, such as a signup, use the Node SDK or call /api/event (Send events from your server).

#Static site generators

In Hugo, Jekyll, Eleventy, and similar tools, paste the tag into the partial or layout that holds the <head>.

#AI app builders

In Lovable, Bolt, v0, Replit, and other tools that write the app for you, ask the agent to add the tag:

Add this script tag to the <head> of every page, exactly as written: <script defer src="https://analytics.example.com/m.js?s=your-site"></script>

Then publish the app and check Live. If the app has its own server, ask the agent to pass misomoon.ref() to the checkout too (Connect payments).

#Mobile apps

React Native and Expo apps use @misomoon/sdk/react-native. It counts screens and engaged time without a script tag (Track a React Native or Expo app).