JavaScript

JavaScript SDK

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.

GitHub - Evntaly/evntaly-js: Evntaly official library for your JavaScript projectsGitHub

Installation

Install the Evntaly JavaScript SDK using npm:

npm install evntaly-js

Initialization

Initialize the SDK with your Developer Secret and Project Token - Check Here

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.

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.

evntaly.identifyUser({
  id: '0f6934fd-99c0-41ca-84f4',
  email: '[e-mail]',
  full_name: 'John Doe',
  organization: 'ExampleCorp',
  data: {
    id: 'JohnD',
    email: '[e-mail]',
    location: 'USA',
    salary: 75000,
    timezone: 'America/New_York'
  }
});

Enabling and Disabling Tracking

You can enable or disable event tracking globally.

evntaly.disableTracking();

evntaly.enableTracking();

---

Integration with Frontend Frameworks

Angular

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

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: "[e-mail]",
      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

<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

Method	Description	Example Usage	Available Since
track	Tracks a custom event.	evntaly.track({title: 'Event'})	v1.0.0
identifyUser	Identifies a user for analytics.	evntaly.identifyUser({id: 'user-123'})	v1.0.0
disableTracking	Disables all event tracking.	evntaly.disableTracking()	v1.0.0
enableTracking	Enables all event tracking.	evntaly.enableTracking()	v1.0.0
checkLimit	Checks API usage limits.	await evntaly.checkLimit()	v1.0.0

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 [e-mail].