> For the complete documentation index, see [llms.txt](https://evntaly.gitbook.io/evntaly/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://evntaly.gitbook.io/evntaly/sdks/javascript.md).

# JavaScript

The SDK is designed for seamless integration with JavaScript-based frameworks like Angular, React, and Vue, enabling you to track user interactions, custom events, and page views effectively.

{% embed url="<https://github.com/Evntaly/evntaly-js>" %}

## Installation

Install the Evntaly JavaScript SDK using npm:

```bash
npm install evntaly-js
```

## Initialization

Initialize the SDK with your **Developer Secret** and **Project Token -** Check [Here](/evntaly/getting-started.md#create-project)&#x20;

```javascript
const { EvntalySDKService } = require('evntaly-js');

const evntaly = new EvntalySDKService();
evntaly.init('YOUR_DEVELOPER_SECRET', 'YOUR_PROJECT_TOKEN');
```

## Tracking Events

For custom event tracking, use the **track** method.

```javascript
evntaly.track({
  title: 'New Order Received',
  description: 'New Order has been placed in the cart',
  message: 'Order #12345',
  data: {
    user_id: '67890',
    timestamp: new Date().toISOString(),
    referrer: 'social_media',
    email_verified: true
  },
  tags: ['checkout', 'payment'],
  notify: true,
  icon: '🎁',
  apply_rule_only: false,
  user: {
    id: '0f6934fd-99c0-41ca-84f4'
  },
  type: 'Transaction',
  sessionID: '20750ebc-dabf-4fd4-9498-443bf30d6095_bsd',
  feature: 'Checkout',
  topic: 'Sales'
});
```

## User Identification

Identify a user to associate events with a specific profile.

```javascript
evntaly.identifyUser({
  id: '0f6934fd-99c0-41ca-84f4',
  email: 'user@example.com',
  full_name: 'John Doe',
  organization: 'ExampleCorp',
  data: {
    id: 'JohnD',
    email: 'user@example.com',
    location: 'USA',
    salary: 75000,
    timezone: 'America/New_York'
  }
});
```

## Enabling and Disabling Tracking

You can enable or disable event tracking globally.

```javascript
evntaly.disableTracking();

evntaly.enableTracking();
```

***

## Integration with Frontend Frameworks

### Angular&#x20;

```javascript
import { Injectable } from '@angular/core';
import { EvntalySDKService } from 'evntaly-js';

@Injectable({ providedIn: 'root' })
export class EvntalyService {
  constructor(private readonly evntaly: EvntalySDKService) {
    this.evntaly.init('DEVELOPER_SECRET', 'PROJECT_TOKEN');
  }
  
  trackEvent() {
    this.evntaly.track({
      title: "Angular Event",
      description: "Testing Evntaly in Angular",
      user: { id: "user-123" },
      feature: "angular-feature",
      type: "Button Click",
    });
  }
}
```

### React&#x20;

```javascript
import React, { useEffect } from 'react';
import EvntalySDKService from 'evntaly-js';

const evntaly = new EvntalySDKService("YOUR_DEVELOPER_SECRET", "YOUR_PROJECT_TOKEN");

const ExampleComponent = () => {
  useEffect(() => {
    evntaly.identifyUser({
      id: "user-123",
      email: "user@example.com",
      full_name: "John Doe",
      organization: "ExampleCorp",
    });
  }, []);

  const trackEvent = () => {
    evntaly.track({
      title: "React Event",
      description: "Event from React",
      user: { id: "user-123" },
      feature: "react-feature",
      type: "Button Click",
    });
  };

  return <button onClick={trackEvent}>Track React Event</button>;
};

export default ExampleComponent;    
```

### Vue&#x20;

```javascript
<template>
  <button @click="trackEvent">Track Vue Event</button>
</template>

<script>
import EvntalySDKService from 'evntaly-js';

export default {
  data() {
    return {
      evntaly: new EvntalySDKService("YOUR_DEVELOPER_SECRET", "YOUR_PROJECT_TOKEN")
    }
  },
  methods: {
    trackEvent() {
      this.evntaly.track({
        title: "Vue Event",
        description: "Testing Evntaly in Vue",
        user: { id: "user-123" },
        feature: "vue-feature",
        type: "Button Click",
      });
    }
  }
}
</script>
```

## Methods

<table><thead><tr><th width="196.17578125">Method</th><th>Description</th><th width="291.40234375">Example Usage</th><th>Available Since</th></tr></thead><tbody><tr><td><code>track</code></td><td>Tracks a custom event.</td><td><code>evntaly.track({title: 'Event'})</code></td><td>v1.0.0</td></tr><tr><td><code>identifyUser</code></td><td>Identifies a user for analytics.</td><td><code>evntaly.identifyUser({id: 'user-123'})</code></td><td>v1.0.0</td></tr><tr><td><code>disableTracking</code></td><td>Disables all event tracking.</td><td><code>evntaly.disableTracking()</code></td><td>v1.0.0</td></tr><tr><td><code>enableTracking</code></td><td>Enables all event tracking.</td><td><code>evntaly.enableTracking()</code></td><td>v1.0.0</td></tr><tr><td><code>checkLimit</code></td><td>Checks API usage limits.</td><td><code>await evntaly.checkLimit()</code></td><td>v1.0.0</td></tr></tbody></table>

## Best Practices

* **Initialize early:** Always initialize the SDK as early as possible.
* **Avoid sensitive data:** Do not pass sensitive personal data directly to the SDK.
* **Monitor API limits:** Regularly check API limits to avoid missing critical events.

## Troubleshooting

* **Events not appearing:** Check if the SDK is initialized correctly and the API tokens are valid.
* **Network errors:** Ensure your network allows requests to `https://evntaly.com`.

***

## Support

For additional help, contact support at **<support@evntaly.com>**.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://evntaly.gitbook.io/evntaly/sdks/javascript.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.