Javascript
The fastest way to get started with Usermaven on the web is via using the JavaScript snippet.
Add tracking pixel
This one piece of code will start tracking Analytics data. Paste the code in the header of your website, just before the closing head tag.
`<script type="text/javascript">
(function () {
window.usermaven = window.usermaven || (function () { (window.usermavenQ = window.usermavenQ || []).push(arguments); })
var t = document.createElement('script'),
s = document.getElementsByTagName('script')[0];
t.defer = true;
t.id = 'um-tracker';
t.setAttribute('data-tracking-host', "https://um.contentstudio.io")
t.setAttribute('data-key', 'API KEY');
t.setAttribute('data-autocapture', 'true');
t.setAttribute('data-randomize-url','true');
t.src = 'https://um.contentstudio.io/lib.js';
s.parentNode.insertBefore(t, s);
})();
</script>` If you want to disable autocapture, remove data-autocapture="true" from the script tag. And if you don't want cookie-less tracking, remove data-privacy-policy="strict".
In single-page applications like Sveltekit, to automatically track page views without configuring on each route change, add the data-auto-pageview="true" option in the script.
Attributes Explained:
- data-key: Your unique tracking identifier or API key (replace 'API KEY' with your actual key).
- data-tracking-host: The endpoint for tracking data. The default value is
https://events.usermaven.com, but we recommend using a whitelabel (opens in a new tab) option to enable first-party tracking, which also helps bypass adblockers. - data-autocapture: Auto-captures client-side events ('true' to enable, 'false' to disable).
- data-privacy-policy: Privacy mode ('Strict' for cookie-less, remove this attribute for cookie-based tracking).
For Single-Page Applications (SPA) Built in React, Angular, Vue, and Similar Frameworks:
Add data-auto-pageview="true" to automatically track page views.
Send users and companies attributes (for product insights)
Next, use our identify function to send us customer data. Add this snippet below the previous one and modify it with the attributes you'd like to send.
<script type="text/javascript">
usermaven('id', {
// Required attributes
id: 'lzL24K3kYw', // Unique ID for the user in database.
email: "user@domain.com", // Email address for the user.
created_at: "2021-01-20T09:55:35", // DateTime string in your system that represents when the user first signed up.
// Recommended attributes
// First name and last name are shown on people pages.
first_name: 'John',
last_name: 'Smith',
// Optional attributes (you can name attributes what you wish)
custom: {
plan_name: "premium",
},
// If your product is used by multiple users in a company, we recommend to pass the Company attributes.
company: {
// Required Attributes
id: "uPq9oUGrIt", // Company ID in your database
name: "Usermaven", // Company Name in your database.
created_at: "2021-01-20T09:55:35", // DateTime string in your system that represents when the company first signed up.
// Optional attributes such as industry, website, employee count etc.
custom: {
plan: "enterprise",
industry: "Technology",
website: "https://usermaven.com",
employees: 20
}
}
});
</script>Send important events (for product insights)
Start sending your important events such as "signed_up", "book-a-demo" etc. In most cases, you should make events calls after usermaven('id') call for the logged in user, so that you can associate events with a people/company in your workspace. Not sure what events you need to track? We have got you covered. Get started with our tracking guide. (opens in a new tab)
<script type="text/javascript">
usermaven("track", "signed_up", {
// additional properties
});
</script>
