next-lytics v0.1.0

next-lytics

Zero-config Analytics stack for Next.js that just works.

Run your own Segment-like analytics multiplexer, powered by the Analytics package.

The primary motivation behind this was to just have an inclusive, startup-collection of analytics that are packaged together rather than yarn add analytics-package-xyz 10 times for every new project. By taking advantage of Next.js tree shaking we only include the plugins during build-time that are being used.

Installation

1. Add the next-lytics package

yarn add next-lytics

2. Add the Analytics Provider to app.jsx

// pages/_app.jsx

import AnalyticsProvider from "next-lytics"
import { FullStory } from "next-lytics/plugins"

const plugins = [
  FullStory({
    org: "12345",
  }),
  // ... add more plugins here
]

function MyApp({ Component, pageProps }) {
  return (
    <AnalyticsProvider plugins={plugins}>
      <Component {...pageProps} />
    </AnalyticsProvider>
  )
}

export default MyApp

3. Use in your Components

import { useAnalytics } from "next-lytics"

export default function MyComponent() {
  const { track } = useAnalytics()

  return (
    <button onClick={() => track("Button Clicked")}>Click me to track</button>
  )
}

Methods

track

Track an analytics event. Full documentation: https://github.com/DavidWells/analytics#analyticstrack

page

Trigger page view. Full documentation: https://github.com/DavidWells/analytics#analyticspage.

Note - The Analytics provider will automatically track Next.js page views, only use this if you need to trigger a custom page event.

identify

Identify a user. Full documentation: https://github.com/DavidWells/analytics#analyticsidentify

Plugins

next-lytics supports a number of plugins out of the box by default but can be extended easily.

Any anaytics plugin listed in here can be added to the Analytics stack: https://github.com/DavidWells/analytics#analytic-plugins

Built-In Plugins

Our goal is to support the major analytics platforms that any new Next.js project/startup would likely use, without the need to npm install a ton of external libraries.

Amplitude

Full documentation on plugin here: https://github.com/DavidWells/analytics/tree/master/packages/analytics-plugin-amplitude

import { Amplitude } from "next-lytics/plugins"

const plugins = [
  Amplitude({
    apiKey: "token",
  }),
]

Google Analytics

Full documentation on plugin here: https://github.com/DavidWells/analytics/tree/master/packages/analytics-plugin-google-analytics

import { GoogleAnalytics } from "next-lytics/plugins"

const plugins = [
  GoogleAnalytics({
    trackingId: "UA-1234567",
  }),
]

Configuration

FullStory

Website: https://fullstory.com/

Repository: https://github.com/DavidWells/analytics/tree/master/packages/analytics-plugin-fullstory#readme

import { FullStory } from "next-lytics/plugins"

const plugins = [
  FullStory({
    org: "12345",
  }),
]

Configuration

Plausible

Website: https://plausible.io/

Repository: https://github.com/DavidWells/analytics/tree/master/packages/analytics-plugin-fullstory#readme

import { Plausible } from "next-lytics/plugins"

const plugins = [
  Plausible({
    domain: "example.com",
  }),
]

Configuration

LogRocket

Full documentation on plugin here: https://github.com/ian/analytics/tree/main/packages/logrocket

import { LogRocket } from "next-lytics/plugins"

const plugins = [
  LogRocket({
    appId: "123456",
  }),
]

Configuration

Indicative

Website: https://www.indicative.com/

Repository: https://github.com/ian/analytics/tree/main/packages/indicative

import { Indicative } from "next-lytics/plugins"

const plugins = [
  Indicative({
    apiKey: "123456",
  }),
]

Configuration

Splitbee

Website: https://splitbee.io/

Repository: https://github.com/ian/analytics/tree/main/packages/splitbee

import { Splitbee } from "next-lytics/plugins"

const plugins = [
  Splitbee({
    token: "123456",
  }),
]

Configuration

Adding a Custom Plugin

Just install the plugin and add it to your plugins config. You can use any Analytics compatible plugin from here: https://github.com/DavidWells/analytics#analytic-plugins

yarn add analytics-custom-plugin

import CustomPlugin from "analytics-custom-plugin"

const plugins = [
  CustomPlugin({
    id: "xyz",
    // ... other config
  }),
]