Add README

README.md

+# Foresight
+### Foresight is an analytics library that allows for declarative event tracking in your websites.
+
+* Lightweight (<3kb minified and gzipped)
+* Declarative event tracking
+* Performant
+
+## Installation
+
+### Direct download
+Download and install the latest distribution file from this
+Git repository and load it in your webpage. For production cases, we encourage you to download the minified version ([`foresight.min.js`](#))
+
+```html
+<script src="/path/to/foresight.min.js"></script>
+```
+
+### Installation via `npm` or `yarn`
+While this package is not available in the npm registry, you can still use package managers to install Foresight.
+
+```bash
+$ npm install git+https://git.forefront.com.my/james/foresight.git
+
+# or
+
+$ yarn add git+https://git.forefront.com.my/james/foresight.git
+```
+
+```js
+// ES6 Import
+import Foresight from 'foresight';
+
+// CommonJS
+var Foresight = require('foresight');
+```
+
+
+## Basic Usage
+
+To initialise Foresight, call its constructor. Pass an optional configuration object as a parameter if needed.
+
+```js
+var foresight = new Foresight({ /* ... */ });
+```
+
+You can then track elements by adding HTML attributes on elements. The value of
+the attribute configures the event to be sent, using the following format:
+
+```ini
+data-track="<event category>;<event action>;<event label>"
+```
+
+`event category` and `event action` are required fields, while `event label` is optional.
+
+---
+
+### Tracking clicks
+
+Clicks are tracked by setting the `data-track` attribute.
+
+```html
+<a href="/register" data-track="home;register cta">Register</a>
+```
+
+The above markup would send the following event data when clicked:
+
+| Field           | Value          |
+| --------------- | -------------- |
+| `eventCategory` | `home`         |
+| `eventAction`   | `register cta` |
+| `eventLabel`    | `null`         |
+
+---
+
+### Tracking views
+
+Views are tracked by setting the `data-track-view` attribute.
+
+```html
+<div class="project" data-track-view="home;view projects;project a">
+  <!-- Content -->
+</div>
+```
+
+The above markup would send the following event data when the `div` enters the viewport:
+
+| Field           | Value           |
+| --------------- | --------------- |
+| `eventCategory` | `home`          |
+| `eventAction`   | `view projects` |
+| `eventLabel`    | `project a`     |
+
+---
+
+## Configuration
+
+```ts
+{ 
+  /** Defer tracking initialisation. */
+  defer?: boolean
+
+  /** Configure the intersection observer. */
+  observerOptions?: IntersectionObserverConfig
+
+  /** Treat clicks as an interactive event. Defaults to `true`. */
+  clicksAreInteractions?: boolean
+
+  /** Treat views as an interactive event. Defaults to `false`. */
+  viewsAreInteractions?: boolean
+}
+```
+
+## Methods
+
+#### `track(element: Element)`
+Start tracking an element for events.
+
+This method is useful if you dynamically add new DOM elements.
+
+Parameters:
+* `element: Element` The element to track.
+
+---
+
+#### `untrack(element: Element)`
+Stop tracking an element for events.
+
+Parameters:
+* `element: Element` The element to track.
+
+---
+
+#### `start(root: Element)`
+Start tracking all elements with tracking attributes for events. You don't need to call this method unless you set the `defer` option to `true`.
+
+This method is idempotent, you can call it multiple times and it won't add duplicate listeners.
+
+Parameters:
+* `root: Element` The container to scan for elements. Defaults to `body`.
+
+---
+
+Copyright © 2018 FOREFRONT International Sdn Bhd.
\ No newline at end of file