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",
  }),
]

Option	Type	Required	Description	Default
apiKey	string	yes	Amplitude project API key
options	object		Amplitude SDK options

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

Option	Type	Required	Description	Default
trackingId	string	yes	Google Analytics site tracking Id
debug	boolean		Enable Google Analytics debug mode
anonymizeIp	boolean		Enable Anonymizing IP addresses sent to Google Analytics. See details below
customDimensions	object		Map Custom dimensions to send extra information to Google Analytics. See details below
resetCustomDimensionsOnPage	object		Reset custom dimensions by key on analytics.page() calls. Useful for single page apps.
setCustomDimensionsToPage	boolean		Mapped dimensions will be set to the page & sent as properties of all subsequent events on that page. If false, analytics will only pass custom dimensions as part of individual events
instanceName	string		Custom tracker name for google analytics. Use this if you need multiple googleAnalytics scripts loaded
customScriptSrc	string		Custom URL for google analytics script, if proxying calls
cookieConfig	object		Additional cookie properties for configuring the ga cookie
tasks	object		Set custom google analytic tasks

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

Option	Type	Required	Description	Default
org	string	yes	FullStory account's org ID. The _fs_org value in settings.

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

Option	Type	Required	Description	Default
domain	string	yes	Your site's domain, as declared by you in Plausible's settings	location.hostname
hashMode	bool		Enables tracking based on URL hash changes.	false
trackLocalhost	bool		Enables tracking on localhost.	false
apiHost	string		Plausible's API host to use. Change this if you are self-hosting.	'https://plausible.io'

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

Option	Type	Required	Description	Default
appId	string	yes	Your LogRocket App ID

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

Option	Type	Required	Description	Default
apiKey	string	yes	Your Indicative API key

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

Option	Type	Required	Description	Default
token	string	yes	Your Splitbee API token

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
  }),
]