npm package: @siteminder/canvas-analytics-js
Description: <p align="center"> <a href="#" target="_blank"> <img alt="Canvas Analytics Javascript Plugin" title="Canvas Analytics Javascript Plugin" src="https://getdrawings.com/free-icon/data-analytics-icon-73.png" width="128"> </a> <h1 align="center">Canvas Analyti
Author: SiteMinder
Latest version: 0.3.6

<p align="center">
<a href="#" target="_blank">
<img alt="Canvas Analytics Javascript Plugin" title="Canvas Analytics Javascript Plugin" src="https://getdrawings.com/free-icon/data-analytics-icon-73.png" width="128">
</a>
<h1 align="center">Canvas Analytics Javascript Plugin</h1>
</p>
<p align="center">Configurable lightweight analytics utility for web</p>

## Installation

```sh
npm install @siteminder/canvas-analytics-js --save
```

## Usage

Here is a quick example to get you started, it's all you need:

```js

const config = {
  serverUrl: "http://localhost:3040/api/v1/collect",
  session: 'cd3',
  trackers: [
    {
      target: {
        selectorType: "direct",
        object: window,
        eventType: "load"
      },
      hit: {
        type: "pageview",
        data: {
          cd2: "propertyId"
        }
      }
    },
    {
      target: {
        selectorType: "direct",
        object: window,
        eventType: "hashchange"
      },
      hit: {
        type: "pageview"
      }
    },
    {
      target: {
        selectorType: "querySelector",
        matcher: "#testBtn",
        eventType: "click"
      },
      hit: {
        type: "event",
        data: {
          ec: "tester-category",
          ea: "tester-action",
          el: "tester-label",
          ev: 1000
        }
      }
    }
  ]
};
const analytics = new Analytics(config);
analytics.init();

```

**Configuration**
```
Config(Object)
|- session(string): this field is optional. When it's enabled, a uuid string will be injected to hit.data object
|- target(Object)
|--- selectorType(string): "querySelector" / "direct"
|--- matcher(string):  when querySelector is chosen: valid CSS selector(s) syntax
|--- object(Object):   when direct is chosen: window / document or other similar DOM object
|--- eventType(string): all supported DOM event handlers e.g. onclick
|- hit(Object)
|--- type(string): "pageview", "event"
|--- data(Object): any kind of data you want to pass to your severs like a ga compatible object
```


Current custom dimensions used as data keys in Analytic API;
- cd1: user-agent - Derived on the server from the client request header.
- cd2: propertyId - Hotel/Site unique identifier.
- cd3: sessionId - Session ID generated and stored in localStorage in the browser.
- cd4: host - Property domain/host name. This is derived and passed to GA from Analytics API directly.


**Methods**

* `init()` - init the plugin

**Caveat**

Please put the canvas-analytics-plugin ahead of its bootstrap code snippet.

You are welcome to use the following pattern to load the code:
```
<script src="./dist/analytics.umd.js" defer async></script>
<script src="./your-bootstrap-code.js" defer async></script>

in the file ./your-bootstrap-code.js
...
const config = {...}
const analytics = new Analytics(config);
analytics.init();
...
```


## Setup

```bash
# install
npm install

# compile
npm run compile

# run app
npm run dev
npm run dev:browser

# test
npm run test
```

## Releases

Detailed changes for each release are documented in the [release notes](https://github.com/siteminder-au/canvas-analytics-js/releases).

## Commit Messages Guidelines

Detailed commit guidelines are documented in the  [Commit Messages Guidelines](COMMIT_CONVENTION.md)