rocketmetrics

Javascript package for RocketMetrics. RocketMetrics is a simplest and fastest way to track the performance of your acquisition channels, and track the AARRR metrics (acquisition, activation, retention, revenue, referral) of each of your channels. Get star

Usage no npm install needed!

<script type="module">
  import rocketmetrics from 'https://cdn.skypack.dev/rocketmetrics';
</script>

README

RocketMetrics

RocketMetrics is a simplest and fastest way to track the performance of your acquisition channels, and track the AARRR metrics (acquisition, activation, retention, revenue, referral) of each of your channels. Get started in 2 minutes !

It works both for frontend and backend.

Create an account

If you don't already have an account, go to https://metrics.rocketchart.co and create an account.

Install the library

npm i rocketmetrics

Set up the library

You have to set up RocketMetrics once for your whole project.

Example for plain Javascript or Node.js:

const rocketmetrics = require('rocketmetrics');

const rmetrics = Rocketmetrics();
rmetrics.configure({
  apiKey: "abcdefghijklmnopqrstuvwxyz",
  metrics: {"Landing page":"2K-LRknrQ","Create account":"FsX-TTjaI","Account created":"Ofi4fyEjb","Arrived on dashboard":"PfdAYsT4m"},
  domain: "yourwebsite.com",
  defaultFunnelId: "jTFXLfz24"
});

module.exports = rmetrics;

// OR

import Rocketmetrics from "rocketmetrics";

const rmetrics = Rocketmetrics();
rmetrics.configure({
  apiKey: "abcdefghijklmnopqrstuvwxyz",
  metrics: {"Landing page":"2K-LRknrQ","Create account":"FsX-TTjaI","Account created":"Ofi4fyEjb","Arrived on dashboard":"PfdAYsT4m"},
  domain: "yourwebsite.com",
  defaultFunnelId: "jTFXLfz24"
});

export default rmetrics;

Example for Vue.js (in the main.js file):

import Rocketmetrics from "rocketmetrics";

const rmetrics = Rocketmetrics();
rmetrics.configure({
  apiKey: "abcdefghijklmnopqrstuvwxyz",
  metrics: {"Landing page":"2K-LRknrQ","Create account":"FsX-TTjaI","Account created":"Ofi4fyEjb","Arrived on dashboard":"PfdAYsT4m"},
  domain: "yourwebsite.com",
  defaultFunnelId: "jTFXLfz24"
});

Vue.mixin({
  data: function() {
    return {
      get rmetrics() {
        return rmetrics;
      }
    }
  }
})

// And anywhere in your code, rmetrics is available under the global scope

await this.rmetrics.triggerEvent(...);

Use the library

Once RocketMetrics is set up, you can require it from any file in your project and use it:

const rmetrics = require('path/to/the/file/where/you/set/up/RocketMetrics').default;

// OR

import rmetrics from './path/to/the/file/where/you/set/up/RocketMetrics';

// AND THEN (examples)

await rmetrics.listen(); //listens for query parameter "rm" in URL, sets up the cookie and creates the lead
await rmetrics.triggerEvent("newValue", {metricName: "Landing page"}); //Sends an event when the lead arrives on the landing page (automatically using his cookie id)
await rmetrics.triggerEvent("newValue", {metricName: "Create account"}); //Sends an event when the lead arrives on the create an account page (automatically using his cookie id)
await rmetrics.triggerEvent("newUser", {userId: "123", userName: "Marc", userCompanyName: "RocketChart", userEmail: "marc@rocketchart.co"}); //Sends an event to notify that the lead became a user with a certain userId (automatically using his cookie id), along with user's details
await rmetrics.triggerEvent("newValue", {metricName: "Account created", userId: "123"}); //Sends an event when the lead has successfully created his account, using his userId (here the cookie is not used then)
await rmetrics.triggerEvent("newValue", {metricName: "Arrived on dashboard"}); //Sends an event when the user arrived on the dashboard, without specifying his userId (by default the cookie id is used then)
await rmetrics.triggerEvent("newValue", {metricName: "Subscribed to a paid plan", userId: "123", amount: 99}); //Sends an event when the user subscribes to a paid plan, with the amount of MRR/ARR or one time payment the user is bringing you
await rmetrics.triggerEvent("newUsage", {userId: "123"}); //Sends an event when a user is active on the app, to track usage statistics on RocketMetrics website

Documentation

.configure()

frontend and backend

rmetrics.configure({
  apiKey: "abcdefghijklmnopqrstuvwxyz",
  metrics: {"Landing page":"2K-LRknrQ","Create account":"FsX-TTjaI","Account created":"Ofi4fyEjb","Arrived on dashboard":"PfdAYsT4m"},
  domain: "yourwebsite.com",
  defaultFunnelId: "jTFXLfz24"
});

Use this method to set up your API Key, the metrics your will track and the domain on which your website/app is hosted (without subdomain or http). You can generate an API Key on the RocketMetrics dashboard, under Settings -> Integration. You can also copy the whole metrics object and paste it in your code. You can also set a defaultFunnelId which is the default funnel that will be used if the lead does not come from any of your funnels (thus no 'rm' query parameter set up).

.listen()

frontend only

await rmetrics.listen(); //listens for query parameter "rm" in URL, sets up the cookie and creates the lead

Use this method on the page where the lead is first landing on. Usually it is the landing page / homepage of your website. This method sets up a cookie in the lead's browser with a automatically generated leadId, and sends an event to RocketMetrics including the funnelId it came from and the leadId. The funnelId is automatically retrieved from the query parameter "rm" (example: https://yourwebsite.com?rm=funnelId).

.triggerEvent()

frontend and backend

await rmetrics.triggerEvent("newValue", {metricName: "Landing page"}); //Sends an event when the lead arrives on the landing page (automatically using his cookie id)
await rmetrics.triggerEvent("newValue", {metricName: "Create account"}); //Sends an event when the lead arrives on the create an account page (automatically using his cookie id)
await rmetrics.triggerEvent("newUser", {userId: "123", userName: "Marc", userCompanyName: "RocketChart", userEmail: "marc@rocketchart.co"}); //Sends an event to notify that the lead became a user with a certain userId (automatically using his cookie id), along with user's details
await rmetrics.triggerEvent("newValue", {metricName: "Account created", userId: user.id}); //Sends an event when the lead has successfully created his account, using his userId (here the cookie is not used then)
await rmetrics.triggerEvent("newValue", {metricName: "Arrived on dashboard"}); //Sends an event when the user arrived on the dashboard, without specifying his userId (by default the cookie id is used then)
await rmetrics.triggerEvent("newValue", {metricName: "Subscribed to a paid plan", userId: "123", amount: 99}); //Sends an event when the user subscribes to a paid plan, with the amount of MRR/ARR or one time payment the user is bringing you
await rmetrics.triggerEvent("newUsage", {userId: "123"}); //Sends an event when a user is active on the app, to track usage statistics on RocketMetrics website

Use this method anywhere in your code, frontend and backend, where you wish to track events. There are three possible events: "newValue", "newUser" and "newUsage". The usual way is to track all events on the frontend until the lead becomes a user using the "newValue" event along with the metricName (the leadId is automatically retrieved from the lead's browser cookies). Once the lead becomes a user, you send a "newUser" event along with the userId. Afterwards, you can choose to send further events using the "newValue" event with either the userId, or nothing and the leadId will automatically be used instead (retrieved from the browser's cookies). In the backend, you have no choice then always using the userId. You can also track the revenue each lead/user is bringing. You just have to add the price (MRR/ARR or one time payment) under "amount" along with the metricName. When you want to track when your users were last active, you can send a "newUsage" event along with either the userId (frontend and backend) or nothing (frontend only, the leadId will be retrieved from cookies) and see the stats under the Usage page on RocketMetrics website