{"id":15434211,"url":"https://github.com/commonlabs-id/next-with-analytics","last_synced_at":"2025-10-11T10:31:44.563Z","repository":{"id":42203564,"uuid":"193901667","full_name":"commonlabs-id/next-with-analytics","owner":"commonlabs-id","description":"Minimalistic analytics helper for Next.js which respects Do Not Track (DNT) headers.","archived":false,"fork":false,"pushed_at":"2023-01-07T06:44:34.000Z","size":1072,"stargazers_count":27,"open_issues_count":19,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-28T20:36:07.070Z","etag":null,"topics":["analytics","do-not-track","google-analytics","next","nextjs","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/commonlabs-id.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-26T12:38:38.000Z","updated_at":"2023-05-12T16:55:21.000Z","dependencies_parsed_at":"2023-02-06T14:15:22.649Z","dependency_job_id":null,"html_url":"https://github.com/commonlabs-id/next-with-analytics","commit_stats":null,"previous_names":["pinjollist/next-with-analytics"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/commonlabs-id/next-with-analytics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commonlabs-id%2Fnext-with-analytics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commonlabs-id%2Fnext-with-analytics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commonlabs-id%2Fnext-with-analytics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commonlabs-id%2Fnext-with-analytics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/commonlabs-id","download_url":"https://codeload.github.com/commonlabs-id/next-with-analytics/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commonlabs-id%2Fnext-with-analytics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006846,"owners_count":26084206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","do-not-track","google-analytics","next","nextjs","react"],"created_at":"2024-10-01T18:38:02.772Z","updated_at":"2025-10-11T10:31:44.243Z","avatar_url":"https://github.com/commonlabs-id.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-with-analytics\n\n![CI](https://github.com/commonlabs-id/next-with-analytics/workflows/CI/badge.svg)\n![Codecov](https://img.shields.io/codecov/c/gh/commonlabs-id/next-with-analytics.svg)\n\n\u003e Minimalistic analytics helper for Next.js which respects Do Not Track (DNT) headers.\n\n`next-with-analytics` is a tiny HOC that wraps a Next.js application with `react-ga` and some useful analytics helpers. It also allows you to respect Do Not Track (DNT) settings for visitors that have them enabled.\n\nOther features include:\n\n- Anonymize IP support\n- Debug mode\n\n## Installation\n\n```bash\n# yarn\nyarn add @pinjollist/next-with-analytics\n\n# npm\nnpm install --save @pinjollist/next-with-analytics\n```\n\n## Usage\n\n### Initialising analytics\n\nThe `initAnalytics` function will create an [analytics instance](#analytics-instance) with any [options](#options) passed into it. To use it, create a custom `_app` page with the `initAnalytics()` called inside it. You can now use the analytics instance to create a route event listener for tracking pageviews, as well as passing [analytics helper functions](#using-analytics-helpers) into all pages as a prop.\n\n```jsx\n// pages/_app.js\n\nimport App from 'next/app';\nimport Router from 'next/router';\nimport { initAnalytics } from '@pinjollist/next-with-analytics';\n\nconst options = {\n  trackingCode: process.env.GOOGLE_ANALYTICS,\n  respectDNT: true,\n};\nconst analyticsInstance = initAnalytics(options);\n\nclass MyApp extends App {\n  componentDidMount() {\n    const { handleRouteChange } = analyticsInstance;\n\n    // Enable tracking page views for route change\n    Router.events.on('routeChangeComplete', handleRouteChange);\n  }\n\n  componentWillUnmount() {\n    const { handleRouteChange } = analyticsInstance;\n\n    // Disable tracking page views for route change before unmount\n    Router.events.off('routeChangeComplete', handleRouteChange);\n  }\n\n  render() {\n    const { Component, pageProps } = this.props;\n    // Add the Analytics helpers to all pages.\n    const { analytics } = analyticsInstance;\n\n    return (\n      \u003cContainer\u003e\n        \u003cComponent analytics={analytics} {...pageProps} /\u003e\n      \u003c/Container\u003e\n    );\n  }\n}\n```\n\n### `withAnalytics` HOC\n\nYou can also use the `withAnalytics` HOC to easily wrap your entire app with `next-with-analytics`. To use it, wrap the `_app` page with the HOC, passing the `next/router` instance, and some preferred options.\n\n**IMPORTANT:** Note that on Next.js 9 and above, this will disable the [Automatic Static Optimization](https://nextjs.org/docs#automatic-prerendering) feature, since it will also try to modify `getInitialProps` in all pages. This HOC remains available to ensure backwards compatibility with Next.js 8.\n\n```jsx\n// pages/_app.js\n\nimport App from 'next/app';\nimport Router from 'next/router';\nimport { withAnalytics } from '@pinjollist/next-with-analytics';\n\nconst options = {\n  trackingCode: process.env.GOOGLE_ANALYTICS,\n  respectDNT: true,\n};\nconst nextWithAnalytics = withAnalytics(Router, options);\n\nclass MyApp extends App {\n  static async getInitialProps({ Component, ctx }) {\n    let pageProps = {};\n    if (Component.getInitialProps) {\n      pageProps = await Component.getInitialProps(ctx);\n    }\n    return { pageProps };\n  }\n\n  render() {\n    const { Component, pageProps, analytics } = this.props;\n    return (\n      \u003cContainer\u003e\n        \u003cComponent analytics={analytics} {...pageProps} /\u003e\n      \u003c/Container\u003e\n    );\n  }\n}\n\nexport default nextWithAnalytics(MyApp);\n```\n\n### Analytics Instance\n\nThe `initAnalytics()` function creates an analytics instance with any [options](#options) passed into it. It returns an `AnalyticsInstance` object, which contains the following:\n\n#### `analytics?: AnalyticsHelpers`\n\nAn object containing all analytics helper functions. See [Using Analytics helpers](#using-analytics-helpers) to learn more about these helper functions.\n\n#### `handleRouteChange: () =\u003e void`\n\nUsed to handle analytics pageview tracking after route change. Use it with [Router Events](https://nextjs.org/docs#router-events):\n\n```jsx\nclass MyApp extends App {\n  // ...\n\n  componentDidMount() {\n    const { handleRouteChange } = analyticsInstance;\n\n    // Enable tracking page views for route change\n    Router.events.on('routeChangeComplete', handleRouteChange);\n  }\n\n  componentWillUnmount() {\n    const { handleRouteChange } = analyticsInstance;\n\n    // Disable tracking page views for route change before unmount\n    Router.events.off('routeChangeComplete', handleRouteChange);\n  }\n}\n```\n\n### Options\n\n#### `trackingCode?: string`\n\nThe Google Analytics tracking code of your website. Default: `''`\n\n#### `respectDNT?: boolean`\n\nSet to `true` to make the module respect Do Not Track (DNT). This will prevent `react-ga` to be initialised if your browser has DNT enabled. Default: `false`\n\n#### `anonymizeIp?: boolean`\n\nSet to `true` to enable [\\_anonymizeIp](https://support.google.com/analytics/answer/2763052) in Google Analytics, an option which is often important for legal reasons (e.g. GDPR)\n\n## Using Analytics helpers\n\nYou can add the provided Analytics helpers directly into the `analytics` prop in the Next.js `_app` page. Typings for TypeScript projects are also available as `WithAnalyticsState`.\n\n```jsx\nimport Link from 'next/link';\n\nfunction IndexPage({ analytics }) {\n  const handleClick = () =\u003e {\n    if (analytics) {\n      analytics.event('Button Click', 'Signup to Platform');\n    }\n  };\n\n  return (\n    \u003cLayout\u003e\n      \u003cContainer\u003e\n        \u003ch1\u003eTry out our platform!\u003c/h1\u003e\n        \u003cLink href=\"/signup\" onClick={handleClick}\u003e\n          \u003ca\u003eSignup Now\u003c/a\u003e\n        \u003c/Link\u003e\n      \u003c/Container\u003e\n    \u003c/Layout\u003e\n  );\n}\n```\n\n### List of Helpers\n\n#### init\n\n`function init(trackingCode?: string | undefined): void`\n\nInitializes Next.js analytics.\n\n#### pageview\n\n`function pageview(): void`\n\nTracks pageview. Can be called e.g. on router location change.\n\n#### event\n\n`function event(category?: string, action?: string): void`\n\nSends a Google Analytics [event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events).\n\n#### exception\n\n`function exception(description?: string, fatal?: boolean): void`\n\nSends a Google Analytics [exception event](https://developers.google.com/analytics/devguides/collection/analyticsjs/exceptions) for tracking exceptions.\n\n## Contributing\n\nContributions and Pull Requests welcome! Please read the [Contributing Guidelines](CONTRIBUTING.md) beforehand.\n\n## License\n\n[MIT](LICENSE) \u0026copy; Resi Respati.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommonlabs-id%2Fnext-with-analytics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcommonlabs-id%2Fnext-with-analytics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommonlabs-id%2Fnext-with-analytics/lists"}