next-goatcounter v1.0.6
next-goatcounter
next-goatcounter is a plugin that makes integrating GoatCounter Analytics into you NextJS project easy.
Pull Requests are very welcome.
Feel like supporting this free plugin?
Setup
First, install it:
npm install next-goatcounteror
yarn add next-goatcounterNow, in app/layout.js
import { GCScript } from "next-goatcounter";and in return
<body>
<GCScript siteUrl={"https://site.goatcounter.com/count"} />
{
children
}
</body>Note: GCScript supports scriptSrc parameter to specify self hosted count.js location
Usage
Display View Count
The package provides two components - ViewCount and TotalViews to show no. of views from Goat Counter.
import { ViewCount, TotalViews } from 'next-goatcounter';
<ViewCount /> // Displays non-unique views of current page
<TotalViews /> // Displays non-unique views of the entire webstieBoth ViewCount and TotalViews have the fallback optional prop to display a fallback while content is loading. Read More
import { ViewCount, TotalViews } from 'next-goatcounter';
<ViewCount fallback={<>Loading...</>} />ViewCount also has the optional path prop to change the path for which view count is displayed.
import { ViewCount, TotalViews } from 'next-goatcounter';
<ViewCount path="/posts/123" />There is also a getViewCount() function that you can use for more customisation. Ensure that it is used in a client component only.
Custom Events
To send custom events to GoatCounter,
first
import { GCEvent } from "next-goatcounter";then use GCEvent like this
GCEvent(path, title);