Track user sign in events in JavaScript

Most of the time, when building a JavaScript product that requires users to authenticate and sign in to access the product, you may decide that it is essential to track the sign-in attempts.

Monitoring the sign-in events is an excellent way to track the number of users who continue to log in and use your JavaScript application. This is a great way to gauge the effectiveness of your product and measure your user retention rate.

A good understanding of this metric is critical to the success of a product. It can give you great insight into how your business grows and how your users interact with your JavaScript product.

An easy way to set up event tracking is to use LogSnag, a simple event tracking tool that works seamlessly with JavaScript.

Start monitoring user sign-in events

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

JavaScript code snippets

All you have to do next is to copy the following code snippets into your JavaScript code and replace the YOUR_API_TOKEN and project values with your API token and project name.

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": "auth",
  "event": "User Signed In",
  "description": "email: john@doe.com",
  "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));

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": "auth",
    "event": "User Signed In",
    "description": "email: john@doe.com",
    "icon": "🔓",
    "notify": true
  }),
};

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

// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
  "project": "my-saas",
  "channel": "auth",
  "event": "User Signed In",
  "description": "email: john@doe.com",
  "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 simple event tracking tool that works seamlessly with JavaScript and makes it easy to track almost anything in your JavaScript code.

LogSnag allows you to track your important events in real-time and create timelines of your events. It also makes it easy to create custom metrics and charts such as the number of sign-in attempts per day, the conversion funnels for users who sign up and sign in, and other such metrics.

You may also create simple or complex user journeys for tracking and monitoring individual user journeys through your product.

LogSnag is also available on desktop, mac, iOS, and Android and allows you to receive real-time updates and push notifications when your users sign in, sign out, or use your product.

Other use-cases for LogSnag

1. Monitor your CI/CD build status for your JavaScript application
2. Monitor your CPU usage in your JavaScript application
3. Monitor when database goes down in your JavaScript application
4. Monitor high disk usage in your JavaScript application
5. Monitor when a user changes their email address in your JavaScript application
6. Monitor failed logins in your JavaScript application
7. Monitor failed payments for your JavaScript application
8. Monitor memory usage in your JavaScript application
9. Monitor MySQL downtime in your JavaScript application
10. Monitor when a new feature is used in your JavaScript application
11. Monitor your Postgres downtime in your JavaScript application
12. Monitor Redis downtime in your JavaScript application
13. Monitor suspicious activity in your JavaScript application
14. Monitor when a user exceeds the usage limit for your JavaScript service
15. Monitor when a user is being rate limited in your JavaScript application
16. Get a notification when your JavaScript code is done executing
17. Send push notifications to your phone or desktop using JavaScript
18. Track canceled subscriptions in your JavaScript application
19. Track your JavaScript cron jobs
20. Track when a file is uploaded to your JavaScript application
21. Track when a form is submitted to your JavaScript application
22. Track payment events via JavaScript
23. Track user signup events via JavaScript
24. Track waitlist signup events via JavaScript