@masa-finance/analytics-react

Masa Analytics React

A customizable, easy-to-use React component for connecting to Masa Analytics, written in TypeScript.

Features

• Easy integration with any React application
• Customizable event handling
• Written in TypeScript for better type safety and developer experience

Events Tracking and Usage

This package provides built-in support for tracking different types of events:

• Page Visit Event
• Wallet Connect Event
• Login Event
• Mint Event

These events can be easily integrated into your application to gather insights about user interactions.

Page Visit Event

firePageViewEvent function is provided to send a page visit event to your API. It takes the following parameters:

• page: A unique identifier of the page visited.
• user_address: The users wallet address.

Usage

import { useMasaAnalyticsReact } from "@masa-finance/analytics-react";

const { firePageViewEvent } = useMasaAnalyticsReact({
  clientApp: "My App",
  clientName: "My Company Name",
});

// Track a page visit event
const user_address = "0x742d35Cc6634C0532925a3b844Bc454e4438f44e";
const page = "https://your-site.example.com/page1";

void firePageViewEvent(page, user_address);

Wallet Connect Event

fireConnectWalletEvent function is provided to send a wallet connect wallet event to your API. It takes the following parameters:

• user_address: The users wallet address.
• connector: The users wallet connector. e.g "metamask" "walletconnect"

Usage

import { useMasaAnalyticsReact } from "@masa-finance/analytics-react";

const { fireConnectWalletEvent } =
  useMasaAnalyticsReact({
    clientApp: 'My App',
    clientName: 'My Company Name',
  });


// Track a wallet connect event
const user_address = "0x742d35Cc6634C0532925a3b844Bc454e4438f44e";
const connector = "metamask"

void fireConnectWalletEvent({ user_address: user_address, connector: connector });

Login Event

fireLoginEvent function is provided to send a login event to your API. It takes the following parameters:

• user_address: The users wallet address.

Usage

import { useMasaAnalyticsReact } from "@masa-finance/analytics-react";

const { fireLoginEvent } = useMasaAnalyticsReact({
  clientApp: "My App",
  clientName: "My Company Name",
});

// Track a login event
const user_address = "0x742d35Cc6634C0532925a3b844Bc454e4438f44e";

void fireLoginEvent({ user_address: user_address });

Mint Event

fireMintEvent function is provided to send a mint event to your API. It takes the following parameters:

• user_address: The users wallet address.
• network: The blockchain network of the mint operation.
• contract_address: The address of the contract of the mint operation.
• token_name: The token name of the contract of the mint operation.
• ticker: The ticker of the contract of the mint operation.
• token_type: The type of the contract of the mint operation.

Usage

import { useMasaAnalyticsReact } from "@masa-finance/analytics-react";

const { fireMintEvent } = useMasaAnalyticsReact({
  clientApp: "My App",
  clientName: "My Company Name",
  clientId: '1234-5678-9012-4567'
});

// Track a mint event
const user_address = "0x742d35Cc6634C0532925a3b844Bc454e4438f44e";
const network = "goerli";
const contract_address = "0x742d35Cc6634C0532925a3b844Bc454e4438f44e";
const token_name = "My SBT Project";
const ticker = "MSP";
const token_type = "SBT";

void fireMintEvent({
  user_address: user_address,
  network: network,
  contract_address: contract_address,
  token_name: token_name,
  ticker: ticker,
  token_type: token_type
  });

These events can be used to monitor user interactions with your website, helping you make data-driven decisions and improve the user experience.

Installation

You can install the @masa-finance/analytics-react package using either npm or yarn:

Using npm

npm install @masa-finance/analytics-react

Using yarn

yarn add @masa-finance/analytics-react

Publishing to npm

Before publishing to npm, ensure that you have all the required dependencies installed:

npm install

Next, build the package:

npm run build

Now, you should see a dist folder containing the compiled JavaScript files.

To publish the package to npm, first log in to your npm account using the command line:

npm login

Enter your username, password, and email when prompted.

Finally, publish the package:

npm publish

Your package is now published to npm and can be installed and used in other projects.

Contributing

We welcome contributions from the community! If you'd like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a branch with a descriptive name related to the issue or feature you're working on.
3. Make your changes and commit them with clear and concise commit messages.
4. Create a pull request, explaining the changes you made and their purpose.

For bug reports and feature requests, please create an issue on GitHub.

License

analytics-react is released under the MIT License.

Changelog

v0.7.0-alpha-1

17 August 2023

• feat: object based syntax 6e81f8a
• update changelog a49ec6e
• update changelog 98529b3
• hooks - tracking: Updated events endpoint to /tracking + reorganized mintEvent args into an object for better handling ( BREAKING CHANGE ) 7b5b912
• feat: refine hooks 6c2774a
• Readme tracking examples: Adding wallet connection example ba1144f
• lint free f1cba76
• Readme: Updated mint event params 2c72779
• Update package.json bf0f014
• Update README.md 7d8e02d
• Readme tracking examples: Adding wallet connection example 8668ca8