@siteminder/canvas-analytics-js

Canvas Analytics Javascript Plugin

Configurable lightweight analytics utility for web

Installation

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

Usage

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

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

# 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.

Commit Messages Guidelines

Detailed commit guidelines are documented in the Commit Messages Guidelines