Back
Blocmetrics

Blocmetrics

  View on GitHub

Overview

Blocmetrics provides a way to track customized events on a website. A user will create an account on Blocmetrics and register their apps by providing a name and a url. Users can then build and send an event object from their website to Blocmetrics. Blocmetrics will match the call via the origin’s url with a registered application and then persist the event. Users can login to Blocmetrics and view event metrics.

Figure 1 Figure 1. User main menu listing all registered apps.

Figure 1 Figure 2. Registering a new application.

Figure 1 Figure 3. Summary for a registered application with events received from the website.

On the user’s website where tracking is to occur, the user can create a simple JavaScript function to build a report (note that the url below is for when the dev server is up and running):

var blocmetrics = {};

blocmetrics.report = function(eventName) {
  var event = {event: { name: eventName }};

  var request = new XMLHttpRequest();
  request.open("POST", "http://localhost:3000/api/events", true);
  request.setRequestHeader('Content-Type', 'application/json');
  request.send(JSON.stringify(event));
};


To create and send reports, the user calls that function passing in the event to be tracked. For example:

<!-- When a button is clicked: -->
<a href="/about" onclick="blocmetrics.report('about link clicked')">About</a>


// When the page loads
<script>blocmetrics.report('about page loaded');</script>


Tech Stack

Bootstrap for our front-end components and styling.

Rails is used for user management on the front end via server rendered static pages. It was also used as the API to handle received events from registered applications.

PostgreSQL for the database layer.

Back
Author face

Dave Lively

Dave is a Support Engineer at SalesLoft, husband to Sarah, graduate of West Point, and avid Atlanta United supporter.

Recent post