— NOTE: I no longer use Plausible Analytics. I’ve switched to Umami Analytics. —

How to Install and Use plausible-tracker with NPM

If you’re looking to integrate privacy-friendly analytics into your website or web app, Plausible Analytics is a great choice. It provides simple and easy-to-understand metrics while ensuring user privacy. One of the ways to integrate Plausible is by using its official package, plausible-tracker, which makes it easy to programmatically track page views and custom events. In this guide, we’ll cover how to install and use the plausible-tracker package via NPM, and at the end, we’ll mention how you can also use the <script> tag method for a simpler installation if needed.

Step 1: Install the plausible-tracker Package

To get started, you need to have Node.js installed on your machine. You can check whether Node.js is installed by running the following command in your terminal:

node -v

If Node.js is not installed, you can download it from Node.js official website.

Once you have Node.js set up, navigate to the root of your project directory and run the following command to install plausible-tracker via NPM:

npm install plausible-tracker

If you’re using Yarn as your package manager, you can install it with:

yarn add plausible-tracker

This command will add the plausible-tracker package to your node_modules folder and update your package.json file with the dependency.

Step 2: Initialize the Tracker in Your Code

Once you have installed the package, you need to initialize the tracker in your JavaScript or TypeScript file. Typically, you would initialize it in the main entry point of your application.

Here’s an example of how to set it up:

import { Plausible } from 'plausible-tracker';

const plausible = Plausible({
  domain: 'your-domain.com', // Replace with your actual domain
});

plausible.trackPageview();

In this example:

• We first import Plausible from the plausible-tracker package.
• Then we initialize the tracker by passing an options object. You should replace 'your-domain.com' with your actual domain, as this is used by Plausible to track and report data.
• The plausible.trackPageview() method is called to automatically track a page view when the user navigates to the page.

Step 3: Track Custom Events

In addition to tracking page views, Plausible lets you track custom events. This is useful if you want to track specific user interactions, such as clicks on a button, form submissions, or any other engagement with your app.

Here’s how you can track custom events:

plausible.trackEvent('Signup');

In this case, the event 'Signup' will be sent to Plausible. You can use this method to track any type of custom event that makes sense for your analytics needs.

If you need to send additional properties with the event, Plausible allows that as well. For example:

plausible.trackEvent('Purchase', {
  props: {
    value: 100,
    currency: 'USD',
  }
});

Step 4: Advanced Options and Customization

The plausible-tracker package also supports more advanced configuration, including custom domains, script loading strategies, and manual control over when to send data. You can pass additional options when initializing the tracker:

const plausible = Plausible({
  domain: 'your-domain.com',
  apiHost: 'https://plausible.io', // Custom API host if you're self-hosting
  trackLocalhost: true, // Useful for local development
});

Refer to the official Plausible documentation for a more in-depth look at the available options and configurations.

Step 5: Deploy and Monitor

Once you have set up the tracker in your code, the last step is to deploy your application. Once it’s live, you can monitor your analytics by logging into your Plausible account. The tracker will start collecting data automatically for every page view and event you’ve configured.

Alternative Method: Using the <script> Tag

While installing and using plausible-tracker via NPM provides programmatic control over your analytics, there’s also a simpler option if you don’t need that flexibility. You can install Plausible Analytics using a single <script> tag in your HTML.

Here’s how you can add it:

<script async defer data-domain="your-domain.com" src="https://plausible.io/js/plausible.js"></script>

This method is easier for simpler use cases, where you just need automatic page view tracking without any custom event handling. Simply include the script tag in the <head> of your HTML file, replacing 'your-domain.com' with your actual domain, and you’re good to go!

Both methods work well, but the choice depends on the level of control and customization you need.