Tractionboard

Tractionboard Tracker - Documentation

Version 0.2

Track events and actions

Tractionboard's tracker has to be implemented in all pages where you want to send events. We recommend to install it in all your pages, just sending the visit event so you will have access to the timeline of your users and what they usually do in your application. Additionally you can declare events to highlight certain actions. If you require further assistance not covered in this documentation, please feel free to contact us.


Getting Started

Installation

To install and activate the tracker, add the following code before closing the body html tag (</body>):

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});</script>
<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});</script>

  • app_id: This is your unique account token that will initiate the tracker. If you are going to send more than one event from the same page, you don't need to initiate it each time.

Once you have implemented this code in your app, the tracker will start to send us information about your visitors.


Sending Specific Events

Events are related to actions inside your application. They could be related to your funnel or not. For example, if you have a newsletter, you could want to know how many people are subscribing to it and how many people are confirming the subscription. These are two different events, one when the user inserts his mail and clicks in the send button and other when the user confirms the subscription (usually from your thanks landing page).

Newsletter Subscription Event

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
  tb.sendEvent("newsletter-subscription");
</script>
<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
tb.sendEvent("newsletter-subscription");
</script>

Note that we always have to include the tractionboard.min.js script.

Newsletter Confirmation event

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
  tb.sendEvent("newsletter-confirmation");
</script>
<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
tb.sendEvent("newsletter-confirmation");
</script>

The two previous examples will send the event newsletter-subscription / newsletter-confirmation plus the visit event. This always happens unless you explicitly tell the tracker not to send the visit:

<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94", auto_visit: false});
  tb.sendEvent("newsletter-confirmation");
</script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94", auto_visit: false});
tb.sendEvent("newsletter-confirmation");
</script>

However we recommend to send the visit even when you send another event so you can know the exact steps that your user follows in your application.

Event names are free and you can make them as descriptive as you want.

Dynamic content (AJAX Calls)

If your application performs certain actions through AJAX calls and you don't reload the page after performing them, you will need to send the event through your success AJAX code. In this situation, the page doesn't reload, so you won't want to count a new visit in this case:

if(resp.result === 'success') {
  $('.mcbeta-success')
  .html('<i class="icon icon_check_alt2"></i>' + resp.msg)
  .fadeIn(1000);
  $('.mcbeta-failed').fadeOut(500);
  /* Traction board */
  var tb = Tractionboard.init({app_id: 'kajk3j4k4kl75h6g8gf94', auto_visit: false});
  tb.sendEvent("newsletter-subscription");
  /* Traction board */
} else if(resp.result === 'error') {
if(resp.result === 'success') {
$('.mcbeta-success')
.html('<i class="icon icon_check_alt2"></i>' + resp.msg)
.fadeIn(1000);
$('.mcbeta-failed').fadeOut(500);
/* Traction board */
var tb = Tractionboard.init({app_id: 'kajk3j4k4kl75h6g8gf94', auto_visit: false});
tb.sendEvent("newsletter-subscription");
/* Traction board */
} else if(resp.result === 'error') {

Special Events

There is some special events that Tractionboard uses to calculate metrics or perform certain actions. The name of these events can't be changed and have to be called through their own methods. These are the special events:

Sign UP

This event is used to compose some metrics from your SaaS, so it's really important to send it

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
  tb.sendEvent("signup", {"user_id": "923423", "free_field": "other user attribute"});
</script>
<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
tb.sendEvent("signup", {"user_id": "923423", "free_field" : "other user attribute"});
</script>

Login

Whenever a user logs in in your system, you will have to notify us through the method identifyUser. This is crucial since it's the only way Tractionboard will be able to link your visitors and users. Linking visitors and users will allow you to know the entire efficiency of a certain marketing campaign.

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
  tb.identifyUser("923423");
</script>
<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
tb.identifyUser("923423");
</script>

  • 923423: This is the unique user id.

This method will automatically send the event login, and as always the event visit. Event login will be use for the system to count how many times and how often your users access your application. Also once Tractionboard receives this event it will update the user to the status user

Payment

This method is provisional, because we will integrate Tractionboard with the major payment gateways (Stripe, Braintree, etc). Until then you can send us the payment information with the following method:

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
  tb.payment("923423", "silver", "monthly", "29.99");
</script>
<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
tb.payment("923423", "silver", "monthly", "29.99");
</script>

  • 923423: This is the unique user id.
  • silver: Your internal membership name. It can be any name.
  • monthly: The frequency of the subscription: monthly or yearly.
  • 29.99: The amount paid.

Additionally, this method collects parameters too, so it could be useful for you if you want to add more information about the payment:

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
  tb.payment("923423", "silver", "monthly", "29.99", {"gateway": "paypal", "credit-card": "visa"});
</script>
<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
tb.payment("923423", "silver", "monthly", "29.99", {"date": "2015-04-24", "credit-card": "visa"});
</script>

Fields are free and you can add as much info as you need.

This event will upgrade the status of this user inside our system to customer

Cancel

This method could be avoid too once we implement with the payment gateways. Its usage is as follow:

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
  tb.cancel("923423");
</script>
<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94"});
tb.cancel("923423");
</script>

  • 923423: This is the unique user id.

This event will upgrade status of this user inside our system to cancel

User Segmentation

Additionally, Tractionboard can collect attributes from your users. These attributes will allow you to perform cohort analyses on your users:

Sending Attributes

Here is an example about how to send attributes:

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94", auto_visit: false});
  tb.userAttributes("923423", {"gender": "male", "age": "23"});
</script>
<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94", auto_visit: false});
tb.userAttributes("923423", {"gender": "male", "age": "23"});
</script>

  • 923423: This is the unique user id.
  • Attributes: {"gender": "male", "age": "23"}: You can add as much as you want. The names are free to choose too. And they are upgradeable, so if you send different values for the sale field, it will be updated inside our system.

Both, user id and attributes are mandatory.

Integrations

Stripe Integration

The stripe integration is done 100% automatically, however in order to related users inside your app with customers in Stripe you need to send us the stripe customer id as an attribute of your users:

<script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
  var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94", auto_visit: false});
  tb.userAttributes("923423", {"stripe_customer_id": "242342342"});
</script>
asdasd <script src="https://api.tractionboard.io/tractionboard.min.js"></script>
<script>
var tb = Tractionboard.init({app_id: "kajk3j4k4kl75h6g8gf94", auto_visit: false});
tb.userAttributes("923423", {"stripe_customer_id":"242342342"});
</script>

  • 923423: This is the unique user id.
  • Attributes: {"stripe_customer_id": "242342342"}: This is the Stripe customer id of user 923423