42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import Script from 'next/script.js'
|
|
|
|
export interface PlausibleProps {
|
|
plausibleDataDomain: string
|
|
dataApi?: string
|
|
src?: string
|
|
}
|
|
|
|
/**
|
|
* Plausible analytics component.
|
|
* To proxy the requests through your own domain, you can use the dataApi and src attribute.
|
|
* See [Plausible docs](https://plausible.io/docs/proxy/guides/nextjs#step-2-adjust-your-deployed-script)
|
|
* for more information.
|
|
*
|
|
*/
|
|
export const Plausible = ({
|
|
plausibleDataDomain,
|
|
dataApi = undefined,
|
|
src = 'https://plausible.io/js/plausible.js',
|
|
}: PlausibleProps) => {
|
|
return (
|
|
<>
|
|
<Script
|
|
strategy="lazyOnload"
|
|
data-domain={plausibleDataDomain}
|
|
data-api={dataApi}
|
|
src={src}
|
|
/>
|
|
<Script strategy="lazyOnload" id="plausible-script">
|
|
{`
|
|
window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
|
|
`}
|
|
</Script>
|
|
</>
|
|
)
|
|
}
|
|
|
|
// https://plausible.io/docs/custom-event-goals
|
|
export const logEvent = (eventName, ...rest) => {
|
|
return window.plausible?.(eventName, ...rest)
|
|
}
|