Published on July 3, 2022

Track waitlist signup events via JavaScript

Track waitlist signup events via JavaScript

Say you have just come up with a great new product idea, and you're seriously considering turning it into a real product. Or maybe you have been working on a product for a while and are almost ready to launch it.

Usually, for both of these cases, developers create a prelaunch landing page before launching the product and set up a waitlist to collect user emails and monitor the demand for the product.

The prelaunch landing page is a great way to get your product idea out to the world and to get people interested in your product or idea. It also allows you to gather user feedback and get their input into your product.

LogSnag makes it easy to set up and track a prelaunch waitlist for your product or idea using JavaScript. It is a simple event tracking tool that allows you to track, analyze and create reports from your waitlist data.


Setting up LogSnag

  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

Simply use the following code snippets to send your waitlist signup events to 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": "auth",
"event": "Waitlist Member Added",
"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": "Waitlist Member Added",
"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": "Waitlist Member Added",
"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 use-case agnostic event tracking tool that allows you to track almost any event, such as prelaunch waitlist signups or beta signup for a new feature or product. It works seamlessly with JavaScript and is very easy to use.

In addition, with LogSnag, you can create charts and analytics from your data. For example, you may create a chart showing the number of daily or monthly waitlist signups for your product.

You may also create funnels to track the conversion rate from your waitlist signups to paying customers. You will also be able to generate user journeys for your users and see how they use your product once they get access to it.

LogSnag is also available on desktop and mobile and allows you to receive real-time notifications when your waitlist signups are added. You may also decide to receive push notifications for any other events that you may want to track from your JavaScript code.

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 sign in events in JavaScript
  24. Track user signup events via JavaScript
View all common use-cases with JavaScript