@strydio/gown

A reusable React component built for GOWN analytics for tracking article views via WebSocket, designed for use in Next.js applications.

Target Audience

Developers who blog, manage their own blog site and want to own their analytics data.

Installation

npm install @strydio/gown-sdk
# or
yarn add @strydio/gown-sdk

Usage

import GownAnalytics from '@strydio/gown-sdk'

export default function ArticlePage({ articleId, articleTitle }) {
  return (
    <>
      <GownAnalytics articleId={articleId} articleTitle={articleTitle} />
      {/* rest of your page */}
    </>
  )
}

Props

• articleId (string): Unique identifier for the article.
• articleTitle (string): Title of the article.

Environment Variables

You must define the following environment variable in your .env file:

NEXT_PUBLIC_GOWN_ENDPOINT=wss://your-websocket-endpoint

This variable can be found from the outputs provided after deploying your own stack of the GOWN analytics backend.

Notes

• This package uses next/dynamic to avoid server-side rendering.
• It maintains a singleton WebSocket connection across the app.

Examples

I've included an example blog site here. The pages that currently have the GownAnalytics component are Home and blog posts.

A Personal Note

The functionality in this package was created to help me track article views on my blog for the last couple years from when I initially built it and initegrated it in my Gatsby blog site up until migrating to Next.js. I hope it helps you too!

P.S: My blog site itself uses Timothy's Next.js starter blog.

License

MIT Copyright (c) 2025 Bukola Jimoh