# 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](https://evntaly.gitbook.io/evntaly/getting-started#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>**.