Usermaven SDK Integration with Angular

This guide will show you step-by-step how to add the Usermaven SDK to your Angular app. Here's an example project to help you out: https://github.com/usermaven/usermaven-angular-example (opens in a new tab)

Step 1: Install Usermaven SDK

First, install the Usermaven module using npm with the command:

npm install @usermaven/sdk-js --save

Step 2: Create client.ts

We'll create a helper function to generate a new instance of the Usermaven client when needed. In the src/app directory, create a client.ts file.

    import { UsermavenClient, usermavenClient, UsermavenOptions } from "@usermaven/sdk-js";
    function createClient(params: UsermavenOptions): UsermavenClient {
        return usermavenClient(params);
    }
    export default createClient

Step 3: Integrate with Angular

To use the Usermaven SDK in an Angular component, import the helper function from client.ts and use it to create a new instance of the Usermaven client.

    import { OnInit } from '@angular/core'; import createClient from './client';
    
    export class ExampleComponent implements OnInit {   private client: any;   constructor() { }   ngOnInit(): void {
        const options: any = {
            // Your UsermavenOptions here...
            key: 'xxxxxxx',
            tracking_host: 'https://events.usermaven.com',
            autocapture: true,
        }; 
        this.client = createClient(options);   }    }

Now you can use this.client to work with the UserMaven SDK in this component.

Additional Notes

(opens in a new tab)

You may face TypeScript compiler errors when using the Usermaven SDK in an Angular project. To resolve these errors, you can add the following lines to your tsconfig.json file:

    {
      "compilerOptions": {
        "skipLibCheck": true,
        // other options...
      },
      // other config...
    }

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
    });

Next.js Node.js