Skip to content

Update plausible tracker #1741

@vitonsky

Description

@vitonsky

An official plausible-tracker package have no active maintainers, it have quite few code, but have a lot of bugs like

  • "enableAutoOutboundTracking breaks target="_blank" and probably noopener security" #12
  • uses XHR API that loses analytics on static sites with no SPA approach (like Astro does) #16
  • uses callbacks, that will not be called on localhost, that force users write code that works different locally and on production

I just checked how you use plausible tracker in https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/stats.ts

It looks you would have benefits if you move to https://github.com/vitonsky/plausible-client

There are fixed all listed problems and additionally you may filter and transform events on high level like that:

import { Plausible, enableAutoOutboundTracking } from 'plausible-client';

const plausible = new Plausible({
  apiHost: 'https://plausible.io',
  domain: 'example.org',
  filter(event, eventName) {
    // Skip all events while development
    if (location.hostname === 'localhost') {
      console.warn('Analytics event is skipped, since run on localhost', event);
      return false;
    }

    // Skip all events for users who don't want to be tracked
    if (window.localStorage.plausible_ignore === 'true') return false;

    // Skip events by event props
    if (event.props.group === 'no-track') return false;

    // Skip events by its name, for users who does not participate in preview program
    if (!event.props.previewEnabled && eventName.startsWith('preview:')) return false;

    // Pass all events otherwise
    return true;
  }
  transform(event, eventName) {
    event.props = {
      ...event.props,
      group: 'clients',
      userId: event.props.uid ? "uuid:" + event.props.uid : undefined,
      isPreferDarkTheme: window.matchMedia("(prefers-color-scheme: dark)").matches,
    };

    return event;
  }
});

I'm maintainer of this package. I've created it to solve problems with plausible-tracker on my projects, and now I'm here to share my solution with you and to get wide adoption of my solution for those who have similar problems.

If you have questions or ideas - feel free to ask.

Migration is quite trivial in your case and takes a few lines in code.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions