React.js
Install Usermaven SDK
To collect events from your React application with Usermaven, first install usermaven javascript SDK.
npm install --save @usermaven/sdk-jsor
yarn add @usermaven/sdk-jsNext, see our example code for React application. (opens in a new tab)
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.
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
}
}
});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)
usermaven.track("signed_up", {
// additional properties
});
