Published on July 3, 2022

Track user sign in events in JavaScript

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.

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": "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));
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": "auth",
"event": "User Signed In",
"description": "email: john@doe.com",
"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": "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
View all common use-cases with JavaScript