alpp-tracker

A simple tracker in JavaScript to upload events directly from the browser to Alpp.

How it works

The tracker helps you record events in your HTML page and stores them in a Data Source within your Alpp account.

By default, the tracker stores along every event basic fields like:

• timestamp (DateTime) of the event
• session_id (String) an automatically generated uuid to track a given user session through different pages for 30 min
• event (String) with a name that can be passed on instantiation to better split events
• hostname (String) the hostname of the page
• source (Object) the source of the user
• user_id (String) . an automatically generated uuid to track a given user for 90 days

Additionally, as part of every event, you can pass along any attribute in JSON format.

Getting Started

Data Source schema

The schema is the set of columns, their types and their jsonpaths, that you want to store in a Data Source. In this case, the schema will contain the set of default properties plus the extra data you want to send with every event.

For instance, let's say you want to send an id of the element that triggered the event, the user email and the section of your application where the event happened.

alpp('click', {
  id: 'buy-button',
  userEmail: '[email protected]',
  section: 'shopping cart'
})

Instantiating the script

Place this code snippet in your HTML file, adding the secure append token you've just created and the Data Source name.

<script data-token="YOUR_TOKEN" src="https://cdn.jsdelivr.net/npm/alpp-tracker.js" defer></script>

Issuing events

Once the script is loaded in the DOM, you can start sending events with the alpp object. It accepts two parameters, the first one is the event name, and the second one, the rest of the attributes you want to store.

This is an example of storing a pageload event which will be triggered once the script is loaded:

<script>
  alpp('pageload', { referrer: document.referrer, page: 'landing_page_1' })
</script>

The following would be an example to trigger "onclick":

alpp('click', {
  referrer: document.referrer,
  page: 'landing_page_1',
  place: 'sign-up button'
})

If you want to initialize the alpp object with events before the script is loaded and ready, you can add as many tuple events as in an Array:

<script>
  window.alpp = [
    ['event_name', { hey: 'hello' }],
    ['click', { place: 'image' }]
  ]
</script>