Monitor when a new feature is used in your JavaScript application

As developers, we always look for ways to improve our JavaScript products. To do so, we are constantly looking for ways to provide more value to our users and improve their experience.

For example, I am sure you have heard of the term "feature flag" before. A feature flag is a way to enable or disable a feature in your application. This is a great way to test new features and ensure they work as expected before releasing them to your users.

However, adding a new feature is just the first step. Once we have released the feature, we must ensure that our users are using it. We must confirm whether the feature is useful and whether our users are using and benefiting from it.

LogSnag is an excellent tool for this problem as it trivializes integrating with your JavaScript application and tracking events. With LogSnag, we can easily track any critical event in our application and monitor user activity when a new feature is released, all in real-time.

For example, let's say we're building a JavaScript application that allows our users to upload files, and we want to add a new feature that allows users to share these files with other users directly. We can use LogSnag to track an event when a user shares a file with another user. We can then use this to monitor how often this feature is being used and even go further and track user journeys to see how they use it.

Connect LogSnag to JavaScript

Setting up LogSnag

Sign up for a free LogSnag account.
Create your first project from the dashboard.
Head to settings and copy your API token.

JavaScript code snippets

Simply use the following code snippets to monitor your new features using LogSnag. Make sure to replace the YOUR_API_TOKEN with your API token and update the project and channel names.

Using JavaScript with Fetch

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Bearer YOUR_API_TOKEN");

var raw = JSON.stringify({
  "project": "my-saas",
  "channel": "features",
  "event": "User Shared File",
  "description": "User shared a file with another user",
  "icon": "📩",
  "notify": true
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://api.logsnag.com/v1/log", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Using JavaScript with jQuery

var settings = {
  "url": "https://api.logsnag.com/v1/log",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_TOKEN"
  },
  "data": JSON.stringify({
    "project": "my-saas",
    "channel": "features",
    "event": "User Shared File",
    "description": "User shared a file with another user",
    "icon": "📩",
    "notify": true
  }),
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

Using JavaScript with XHR

// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
  "project": "my-saas",
  "channel": "features",
  "event": "User Shared File",
  "description": "User shared a file with another user",
  "icon": "📩",
  "notify": true
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://api.logsnag.com/v1/log");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer YOUR_API_TOKEN");

xhr.send(data);

JavaScript integration details

LogSnag is a use-case agnostic event tracking tool that easily integrates with any JavaScript application. It provides powerful features such as real-time event tracking, cross-platform push notifications, event filtering, user and product journeys, charts and analytics, and much more.

Here at LogSnag, we believe that event tracking should be easy and accessible to everyone, and that's why we have made it trivial to integrate with your JavaScript application. It only takes a few minutes to set up LogSnag, and you can start tracking events in no time.

We provide a generous free plan to get you started with event tracking! You can also check out our pricing page to see our paid plans. So please give us a try and let us know what you think!

Other use-cases for LogSnag

View all common use-cases with JavaScript

Setting up LogSnag

JavaScript code snippets

JavaScript integration details

Other use-cases for LogSnag

Posted by

Content