@metrixorg/websdk

Getting Started

These instructions will get you setup to use WebSDK in your project.

install using npm:

``bash
npm install @metrixorg/websdk
`

Initialize Metrix at the start of your application by calling the following method:

`typescript
import { init } from '@metrixorg/websdk';

init(APP_ID, API_KEY, config);
`

Or add within
`

> Note: Replace ${VERSION} with desired version(e.g., 1.6.0). or to always use latest version replace ${VERSION} with latest.

Initialize Metrix at the start of your application by calling the following method:

typescript:

`typescript
declare let Metrix: any;

Metrix.init(APP_ID, API_KEY, config);
`

javascript:

`javascript
Metrix.init(APP_ID, API_KEY, config);
`

API

#### authorizeUser

To authorize user to Metrix server, you must call this API.

`typescript
authorizeUser(username: string) : void
`

> Note: To know the user to Metrix's servers call this method, before sending any data to Metrix's servers

#### newEvent

Each interaction that the user has with your application can be introduced as an _Event_ in your dashboard and application in order for Metrix to collect and present its statistics.

`typescript

newEvent(slug: string, customAttributes: {[key: string]: string}): void

`

You can use Metrix to track any events in your application.
Suppose you want to track every tap on a button.
You would have to create a new event in the Events Management section of your dashboard (_Settings_ > _Events_ > _Add event_) and retrieve the generated slug for the event.
The slug is to be used in the application code to send the event to Metrix library.
So In your button's onClick method you could then invoke the Metrix newEvent method providing the event slug and
optionally some attributes named customAttributes related to the event like the following:

`typescript
// Send simple event
import { newEvent } from '@metrixorg/websdk';
newEvent('EVENT_SLUG');

// Send an event with custom attribute
const attributes = {};
attributes['first_name'] = 'Ali';
attributes['last_name'] = 'Bagheri';
attributes['manufacturer'] = 'Nike';
attributes['product_name'] = 'shirt';
attributes['type'] = 'sport';
attributes['size'] = 'large';

newEvent('EVENT_SLUG', attributes);
`

#### setCustomAttribute

`typescript
setCustomAttribute(key: string, value: string) : void
`

#### setCustomUserId

`typescript
setCustomUserId(customId: string) : void
`

#### setFirstName

you can use metrix WebSDK to store user session visiting your application.
By this method you can send user first name to metrix library.

`typescript
setFirstName(firstName: string) : void
`

#### setLastName

By this method you can send user last name to metrix library.

`typescript
setLastName(lastName: string) : void
`

#### setEmail

By this method you can send user email to metrix library.

`typescript
setEmail(email: string) : void
`

#### setHashedEmail

By this method you can send user hashed email to metrix library.

`typescript
setHashedEmail(hashedEmail: string) : void
`

#### setPhoneNumber

By this method you can send user phone number to metrix library.

`typescript
setPhoneNumber(phoneNumber: string) : void
`

#### setHashedPhoneNumber

By this method you can send user phone number as hashed phone number to metrix library.

`typescript
setHashedPhoneNumber(hashedPhoneNumber: string) : void
`

#### setCountry

By this method you can send user country to metrix library.

`typescript
setCountry(country: string) : void
`

#### setCity

By this method you can send user city to metrix library.

`typescript
setCity(city: string) : void
`

#### setRegion

By this method you can send user city to metrix library.

`typescript
setRegion(region: string) : void
`

#### setLocality

By this method you can send user locality to metrix library.

`typescript
setLocality(locality: string) : void
`

#### setGender

By this method you can send user gender to metrix library.

`typescript
setGender(gender: string) : void
`

#### setBirthday

By this method you can send user birthday date to metrix library.

`typescript
setBirthday(birthday: string) : void
`

Web Push

> You can find sample applications for implementing Metrix WebSdk to sending web push notifications in following:
>
> - Netxjs sample
> - Pure html/js sample

To enabling web push, follow these steps:

$3

download this file and put it at root of your project files ( this means somewhere beside index.html or index.php file ).

> Note: this file must be accessible with end of your site domain URL. for example if domain is this file must be accessible with .

$3

pass this config as third parameter to init method.

`typescript
import { init } from '@metrixorg/websdk';

init(APP_ID, API_KEY, config);
`

PUSH initialization config:

`typescript
{
push: {
enabled: true; // default is false but if set to true you must provide publicKey.
publicKey: YOUR_PUBLIC_KEY; // your push subscription public key.
showBell: true; // default is false
hasSW: false; // default is false
}
}
`

There are two modes to grant permission from user and send web push notification.

#### Mode 1: Metrix Bell

By adding showBell set to true to push config. Metrix bell shows and can get permission from user and send push to user.

`typescript
{
push: {
...
showBell: true // defaults to false
}
}
`

#### Mode 2: Calling method

You can call subscribePush() method anywhere from your website to get permission from user and send push to user.

`typescript
subscribePush() : void
`

> Note: Logically you should call init method before subscribePush method and config publicKey and other configs to sending push.

On-Site messaging

Enable this feature, by adding enabled set to true to onSiteMessaging in config object.

`typescript
{
...
onSiteMessaging: {
enabled: true // defaults to false
}
}
`

> Note: You should authorize your user to Metrix by authorizeUser(username: string): void method.

Additional Features

$3

Metrix, tracks sessions visiting your website/application and collect data from their activity.
types of activity are:

- duration: session duration time, the time that user is active on your website/application tab by specified session.
> note: The time when the user leaves your website/application tab is not counted as session duration. Therefore, when the user returns to your website/application tab, the duration of the session is calculated from that moment.
- activityFlow: array of pages address of your website/application that the user has viewed.

$3

Metrix, collect metadata from user _device_, _browser_ and _location_ of user visiting your website/application.

data that is collect from _device_ is:

- os
- osVersion
- deviceLang
- screen

data that is collect from _browser_ is:

- browserName
- browserVersion
- timezone
- timezoneOffset

_location_ data is:

- latitude
- longitude`