Semust Metrik
Framework Guides
Installing Metrik in Next.js, React and other single-page apps, plus the command queue.
Metrik supports single-page apps with no extra configuration: when the route changes, a new pageview is recorded.
Product page: Semust Metrik.
Single-page apps
When the path in the address bar changes, Metrik records a new pageview automatically.
React Router, the Next.js router and any library built on the history API are
supported.
Hash-only changes do not count
Navigating from /pricing to /pricing#faq does not create a new pageview. This stops
in-page anchor links from inflating your visit numbers.
Next.js
Add the script to your root layout:
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://unpkg.com/semust-js@latest/dist/semust-js.min.js"
data-token="mk_your-key-here"
strategy="afterInteractive"
/>
</body>
</html>
);
}Do not rename the file
The script identifies itself by filename. If you copy it to your own server under a
different name, or bundle it together with other files, it cannot read your access key
and nothing is recorded. The address may change, but the filename must stay
semust-js.min.js.
The command queue
If your application code can run before the script has loaded, queue your calls. They run in order once the script is ready:
window.semustMetrik = window.semustMetrik || { q: [] };
window.semustMetrik.q = window.semustMetrik.q || [];
window.semustMetrik.q.push(["identify", "[email protected]", { plan: "pro" }]);
window.semustMetrik.q.push(["track", "signup_completed"]);The first item in the array is the method name; the rest are its arguments. This works
for identify, track and trackPayment.
A safe helper:
function metrik(method, ...args) {
const w = window;
if (w.semustMetrik && w.semustMetrik.initialized) {
w.semustMetrik[method](...args);
return;
}
w.semustMetrik = w.semustMetrik || { q: [] };
w.semustMetrik.q = w.semustMetrik.q || [];
w.semustMetrik.q.push([method, ...args]);
}
metrik("track", "signup_completed");Cross-domain tracking
If visitors move from example.com to shop.example.com, list the hostnames so their
identity carries across:
<script src="https://unpkg.com/semust-js@latest/dist/semust-js.min.js"
data-token="mk_your-key-here"
data-allowed-hostnames="shop.example.com,blog.example.com"></script>Install the script on both sites using the same access key.
Google Tag Manager
With GTM, settings are passed through window.semustMetrikConfig rather than data-*
attributes — see Installation.