Track canceled subscriptions in your JavaScript application

Many JavaScript applications have a subscription model where users pay a monthly or yearly fee to use the application. These applications are called SaaS or Software as a Service application. In these applications, users are usually charged a monthly or yearly fee and can use the application for that period. In some cases, users are on a pay-as-you-go model set for each action they perform in the application.

In either of these cases, a common issue that the application usually faces is when a user cancels their subscription, also called churn. Therefore, an application's churn rate is a critical metric that can significantly affect the application's revenue and, consequently, the sustainability of the application.

Therefore, SaaS applications should actively monitor when users cancel their subscriptions, the reason for the cancellation, and the overall churn rate. This way, the application can always be aware of the performance of the application and take immediate action if needed. For example, in the case of a high churn rate, the application can take action to improve the user experience to reduce churn. Or, in the case of a high-value user canceling their subscription, the application owner can take action to retain the user.

LogSnag is a powerful, real-time event tracking tool that works seamlessly with any JavaScript application and is an excellent solution for tracking subscription cancellations and churn rates. With LogSnag, you can set up event tracking for anything you want and track when users cancel their subscription in your JavaScript application in real-time. You may also set up optional rules to notify you and your team when a user has canceled their subscription.

In addition, LogSnag allows you to track user journeys and create a timeline of events for each user. This way, you can always track the activity of a specific user, such as when they have canceled their subscription and any other activity they have done in your application.

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

To track subscription cancellations in your JavaScript application, you can use the following code snippet. Please 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": "billing",
  "event": "Subscription Cancelled",
  "description": "User cancelled a startup subscription",
  "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": "billing",
    "event": "Subscription Cancelled",
    "description": "User cancelled a startup subscription",
    "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": "billing",
  "event": "Subscription Cancelled",
  "description": "User cancelled a startup subscription",
  "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

We believe that event tracking should be simple and accessible to every developer and team. Therefore, we have worked hard to create the next generation of event tracking tools. As a result, LogSnag is flexible and easy to use, making it a great companion for your JavaScript applications.

In addition to real-time event tracking, LogSnag provides powerful features such as cross-platform push notifications, event filtering, user and product journeys, charts, insights, and more.

LogSnag provides 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 don't hesitate to 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