Skip to content

Umami Logger is a configurable event logging package for Umami Analytics.

Notifications You must be signed in to change notification settings

B-IT-Projects-GmbH/umami-logger-typescript

Repository files navigation

Umami Logger

npm 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:

npm install @bitprojects/umami-logger-typescript

Or using yarn:

yarn add @bitprojects/umami-logger-typescript

Usage

First, initialize the Umami Logger with your configuration:

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

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

Then, you can log events like this:

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

API

initialize(config: UmamiConfig): void

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.

trackEvent(eventName: string, eventData: EventData): void

Logs an event to your Umami dashboard.

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

trackPageView(overrideUrl?: string): void

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:

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.

About

Umami Logger is a configurable event logging package for Umami Analytics.

Topics

Resources

Stars

Watchers

Forks