​
Pre-Requisites

Before proceeding, ensure you:

1

Have installed Angular

Get started here

2

Get your project ID

Sign up on Litlyx Dashboard and create a new project.

​
1. Install

Choose your package manager & install the library.

​
2. Import

Now import Litlyx in your entry-point file. The easiest way in Angular is in the file app.component.ts.

javascript
import { Lit } from "litlyx-js"
If you have an advanced Angular project or you are a senior developer, import it in the chosen path where you configure the entire application, for example, a provider used to initialize the application in app.module.ts.

​
3. Initialize

Next, initialize the Litlyx library with your project in your entry-point file (always app.component.ts in this example) as follow:

javascript
constructor() {
    Lit.init("your_project_id");
}

This line will already collect more than 10 KPIs for you such as Page Visits, Referrers, Countries, Unique Sessions and many more.

If you have an advanced Angular project or you are a senior developer, remember not to show hardcoded IDs. Use a more secure pattern, for example, using an .env file and reading from it “your_project_id”.

​
4. Collect Custom Events

To customize your experience, add the following line in each function you desire. There is no limit to the number of events.

If you want to test if it works and everything is well configured, import the OnInit method in the entry-point file (always app.component.ts in this example):

javascript
export class AppComponent implements OnInit {

and implement the imported function as follows:

javascript
  ngOnInit(): void {
    Lit.event("your_event_name");
  }

If you want to exercise more control over your events, you can use the metadata field.

javascript
  ngOnInit(): void {
    Lit.event("your_event_name", metadata: { 
    'type': 'INIT_LIBRARY', 
    'priority': 0.9
    });
  }

In your dashboard, you can group them in the Events tab with the Event Metadata Analyzer.

VuePHP