# safepay-analytics

> This is a Safepay package to log analytics.

Latest version **1.0.8** (published 2024-08-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install safepay-analytics
pnpm add safepay-analytics
yarn add safepay-analytics
bun add safepay-analytics
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2024-08-02 |
| First published | 2023-10-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Fatima Aurangzeb |
| Maintainers | sfpy |
| Keywords | analytics |

## Links

- npm: https://www.npmjs.com/package/safepay-analytics
- Repository: https://github.com/getsafepay/safepay-analytics
- Homepage: https://github.com/getsafepay/safepay-analytics#readme
- Issues: https://github.com/getsafepay/safepay-analytics/issues
- npm.io page: https://npm.io/package/safepay-analytics

## Dependencies (2)

- [react-ga4](https://npm.io/package/react-ga4.md) ^2.1.0
- [typescript](https://npm.io/package/typescript.md) ^4.1.2

## Recent versions

- 1.0.8 (latest) — 2024-08-02
- 1.0.7 — 2024-08-02
- 1.0.6 — 2024-07-22
- 1.0.5 — 2024-07-22
- 1.0.4 — 2024-06-11
- 1.0.3 — 2024-06-05
- 1.0.2 — 2023-10-31
- 1.0.1 — 2023-10-31
- 1.0.0 — 2023-10-18

## README

# Safepay Analytics

The `safepay-analytics` package is an [npm package](https://www.npmjs.com/package/safepay-analytics) of React components and functions used to provide Analytics capability to Safepay front-end applications.

## Installation

Install via `npm` or `yarn`.

```js
yarn add safepay-analytics
```

```js
npm i safepay-analytics
```

### Initializing Analytics

The client should be initialized before it is used. To initialize the client, pass in Provider, as well as the parameters for that provider, in this case a Tracking ID.

```js
import { Provider, initialize } from "safepay-analytics";

initialize({ provider: Provider.GA, ga: { trackingId: "1234" } });
```

Note that an `Error` is thrown if an invalid provider is provided.

### Logging Events Directly

```js
import { logEvent, Category, Action, Events } from "safepay-analytics";

logEvent({
  category: Category.Authorization,
  action: Action.Signup,
  events: [Events.OnClick],
  shouldLogImpression: true,
});
```

### Logging Events Using the Trace Component

This is a React component that wraps event callbacks with logging logic:

```js
import {
  logEvent,
  Category,
  Action,
  Events,
  TraceEvent,
} from "safepay-analytics";

<TraceEvent
  category={Category.Authorization}
  action={Action.Signup}
  events={[Events.OnClick]}
  shouldLogImpression={true}
>
  <SomeButton onClick={onClickHandler} />
</TraceEvent>;
```

Depending on the context that `<Trace/>` is used in, you may have to define new values in [@uniswap/analytics-events](https://www.npmjs.com/package/@uniswap/analytics-events) for the enums that are passed in as arguments such: `BrowserEvent`, `EventName`, `ModalName`, `ElementName`.

| Field                 | Type                                      | Required |
| :-------------------- | :---------------------------------------- | -------- |
| `category`            | Category                                  | Yes      |
| `action`              | Action                                    | Yes      |
| `events`              | Events[]                                  | Yes      |
| `label`               | string                                    | No       |
| `value`               | number                                    | No       |
| `nonInteraction`      | boolean                                   | No       |
| `transport`           | "beacon" or "xhr" or "image" or undefined | No       |
| `shouldLogImpression` | boolean                                   | Yes      |

##### Values for Category

```
Authorization = "AUTHORIZATION",
OpenDropDown = "OPEN_DROP_DOWN",
OpenExternalLink = "OPEN_EXTERNAL_LINK",
OpenInternalLink = "OPEN_INTERNAL_LINK",
SavingCardProcess = "SAVING_CARD_PROCESS",
UserActions = "USER_ACTIONS",
```

##### Values for Action

```
Login = "LOGIN",
Signup = "SIGN_UP",
ViewPlanDetails = "VIEW_PLAN_DETAILS",
OpenAcountActions = "OPEN_ACCOUNT_ACTIONS",
OpenMenu = "OPEN_MENU",
ClickCancelUrl = "CLICK_CANCEL_URL",
ProceedAfterCardSelection = "PROCEED_AFTER_CARD_SELECTION",
CardSaved = "CARD_SAVED",
CreateDiscountClick = "CREATE_DISCOUNT_CLICK",
CreateQuicklinkClick = "CREATE_QUICKLINK_CLICK",
ApplyFinanceClick = "APPLY_FINANCE_CLICK",
```

##### Values for Events

```
OnClick = "onClick",
```

#### Log in Page Views

This is a built in React component that logs an event when it is first mounted. You may use it as a wrapper:

```js
import { Trace, Title } from "safepay-analytics";

<Trace page={window.location.pathname} title={Title.SubscriptionProfile}>
  <SomeComponent />
</Trace>;
```

| Field   | Type   | Required |
| :------ | :----- | -------- |
| `page`  | string | Yes      |
| `title` | Title  | Yes      |

##### Values for Title

```
// Subscriptions

SubscriptionHome = "SUBSCRIPTION_HOME",
SubscriptionProfile = "SUBSCRIPTION_PROFILE",
SubscriptionTerms = "SUBSCRIPTION_TERMS",
SubscriptionWallet = "SUBSCRIPTION_WALLET",
SubscriptionAddCard = "SUBSCRIPTION_ADD_CARD",

// Auth

ForgotPassword = "FORGOT_PASSWORD",
ResetPassword = "RESET_PASSWORD",
SignUp = "SIGN_UP",
Login = "LOGIN",

// Merchant Dashboard pages
DiscountHome = "DISCOUNT_HOME",
MerchantDashboardHome = "MERCHANT_DASHBOARD_HOME",
QuicklinkHome = "QUICKLINK_HOME",
PaymentDetails = "PAYMENT_DETAILS",
PaymentDetailsV2 = "PAYEMNT_DETAILS_2.0",
PaymentList = "PAYMENT_LIST",
PaymentV2List = "PAYEMNT_LIST_V2",

```

---
_Source: https://npm.io/package/safepay-analytics · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._