@humany/widget-tracking

Exposes API methods for tracking and listening to widget events and user interactions.

Using the plugin

This plugin exposes two methods, action and navigate, used for catching events in your widgets. To access this methods inject them to the settings of your plugin.

This will allow you to access the data and handle them as needed.

import { AnalyticsPlugin } from '@humany/widget-tracking';

humany.configure('*', config => {
  config.plugin(AnalyticsPlugin, {
    action: ({ type, args, location })  => {
      // ...
    },
    navigate: ({ type, args }) => {
      // ...
    },
  });
});

Exposed methods

To listen to a API response add the action method two your plugin settings.

The action method returns an object with three properties:

• type: The type of action (e.g. ReadGuide). You can find all types of API responses further down.
• args: The data returned
• location: Each API response returns the location / route data

The navigate method is invoked on every route change and returns an object:

• type: Navigate
• args: The new location

API Responses

WidgetOpen

Invoked when widget is opened. Provides the location object which contains the current route name and params.

Response:

{
  location: Location
}

ReadGuide

Invoked when a guide is opened.

Provides the current guide with its categories and the current location.

Response:

{
  guide: GuideItem,
  categories: CategoryItem[],
  location: Location,
}

FeedbackGiven

Invoked when a feedback is given to a guide.

Provides the following data:

• guide: Guide which feedback was given to
• categories: Categories which the guide belongs to
• feedbackType: Type of feedback which was given
• location: Current location

Response:

{
  guide: GuideItem,
  categories: CategoryItem[],
  feedbackType: string,
  location: Location
}

ContactMethodEnter

Invoked when a contact method is opened, such as an email form.

Provides the contact method and the current location.

Response:

{
  contactMethod: any,
  location: Location,
}

ContactMethodComplete

Invoked when a contact method is submitted.

Provides the contact method and the current location.

Response:

{
  contactMethod: any,
  location: Location,
}

Search

Invoked when a search has been made.

Provides the following data:

• phrase: Search phrase
• hits: Number of hits displayed to user when search was made
• totalHits: Total number of hits search generated
• location: Current location

Response:

{
  phrase: string,
  hits: number,
  totalHits: number,
  location: Location
}

SearchResultClick

Invoked when a search result is clicked on.

Provides the following data:

• position: Position of the search result clicked on among the search result list.
• guide: Guide clicked on
• location: Current location

Response:

{
  position: number,
  guide: GuideItem,
  location: Location
}

Legacy Support

It is possible to use this plugin with older versions. In order to use the plugin with legacy versions, configure the plugin as below:

humany.configure(config => {
  const analyticsPluginSettings = {
    action: ({ type, args, location })  => {
      // ...
    },
    navigate: ({ type, args }) => {
      // ...
    },
  };

  const legacyAnalyticsPlugin = new LegacyAnalyticsPlugin(analyticsPluginSettings);
  config.registerPlugin(legacyAnalyticsPlugin);
});

Types

GuideItem {
  id: number;
  title: String;
}

CategoryItem {
  id: number;
  name: String;
}

Location {
  name: string;
  params: { [key: string]: string };
}

WidgetOpenResponse {
  location: Location;
}

ReadGuideResponse {
  guide: GuideItem;
  categories: CategoryItem[];
  location: Location;
}

FeedbackGivenResponse {
  guide: GuideItem;
  categories: CategoryItem[];
  feedbackType: string;
  location: Location;
}

SearchResponse {
  phrase: string;
  hits: number;
  location: Location;
}

SearchResultClickResponse {
  position: number;
  guide: GuideItem;
  location: Location;
}

ContactMethodEnterResponse {
  contactMethod: any;
  location: Location;
}

ContactMethodCompleteResponse {
  contactMethod: any;
  location: Location;
}