Umami Logger

!npm
!NPM Downloads
!GitHub Workflow Status (with event)

Description

Umami Logger is a configurable event logging package for Umami Analytics. It allows you to easily send custom events with automatically populated browser metadata.

Features

- Easy setup with minimal configuration
- Automatically captures common browser metadata
- Built with TypeScript
- Uses Axios for network requests

Installation

Install the package using npm:

``bash
npm install @bitprojects/umami-logger-typescript
`

Or using yarn:

`bash
yarn add @bitprojects/umami-logger-typescript
`

Usage

First, initialize the Umami Logger with your configuration:

`typescript
import Umami from '@bitprojects/umami-logger-typescript';

Umami.initialize({
baseUrl: 'https://umami.is',
websiteId: 'your-website-id',
hostName: 'your-custom-hostname', //optional
});
`


Then, you can log events like this:

`typescript
Umami.trackEvent('some-event', { foo: 'bar' });
`

API

$3

Initialize the logger with your Umami configuration.

- config.baseUrl: The base URL of your Umami instance.
- config.websiteId: The website ID in your Umami dashboard.

$3

Logs an event to your Umami dashboard.

- eventName: The name of the event.
- eventData: Additional data to attach to the event (optional).

$3

Automatically logs a page view event. This is triggered when you initialize Umami Logger.

- overrideUrl: An optional parameter that lets you specify a custom URL for the page view event, overriding the default window.location.pathname.

Example for Vue Router Integration

To track page views in a Vue project with Vue Router, you can use the beforeEach or afterEach hooks in your router setup:

`typescript
import VueRouter from 'vue-router';
import Umami from '@bitprojects/umami-logger-typescript';

const router = new VueRouter({
// your routes here
});

router.beforeEach((to, from, next) => {
Umami.trackPageView(to.path); // the to.path will override the default pathname
next();
});
``

Author

Developed by Phil0xFF, on behalf of B.IT Projects GmbH.