Gathering detailed insights and metrics for nextjs-google-analytics-gtm
Gathering detailed insights and metrics for nextjs-google-analytics-gtm
Google Analytics for Next.js with support for GTM server container
1.1.12
2
MIT
TypeScript
15.96 kB
Installations
npm install nextjs-google-analytics-gtmDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.14.0
NPM Version
8.5.3
Releases
Unable to fetch releases
Languages
2
TypeScript
JavaScript
TypeScript (98.22%)
JavaScript (1.78%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
2 Stars
330 Commits
1 Forks
2 Branches
1 Contributors
Updated on Mar 02, 2023
Maintainers
1
Package Meta Information
Latest Version
1.1.12
Package Id
nextjs-google-analytics-gtm@1.1.12
Unpacked Size
15.96 kB
Size
5.76 kB
File Count
15
NPM Version
8.5.3
Node Version
16.14.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Nextjs Google Analytics
Google Analytics for Next.js
Installation
npm install --save nextjs-google-analytics-gtm
Usage
Note:
This is a fork which allows users to use the original package by Mauricio Robayo, but with a custom GTM server-side container.
To do this you MUST define the following environment variable:
NEXT_PUBLIC_GTM_DOMAIN="www.yourdomain.com"
Your Google Analytics measurement id is read from NEXT_PUBLIC_GA_MEASUREMENT_ID environment variable, so make sure it is set in your production environment:
If the variable is not set or is empty, nothing will be loaded, making it safe to work in development.
To load it and test it on development, add:
NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"
to your .env.local file.
Scripts
Use the GoogleAnalytics component to load the gtag scripts. You can add it to a custom Document component and this will take care of including the necessary scripts for every page (or you could add it on a per page basis if you need more control):
1// pages/document.tsx 2import Document, { 3 DocumentContext, 4 Html, 5 Head, 6 Main, 7 NextScript, 8} from "next/document"; 9import { GoogleAnalytics } from "nextjs-google-analytics-gtm"; 10 11class MyDocument extends Document { 12 static async getInitialProps(ctx: DocumentContext) { 13 const initialProps = await Document.getInitialProps(ctx); 14 15 return initialProps; 16 } 17 render() { 18 return ( 19 <Html> 20 <Head> 21 <GoogleAnalytics /> 22 </Head> 23 <body> 24 <Main /> 25 <NextScript /> 26 </body> 27 </Html> 28 ); 29 } 30} 31 32export default MyDocument;
Page views
To track all pages views, call the usePagesViews hook inside a custom App component, make sure to include the necessary gtag scripts with the GoogleAnalytics component:
1// pages/_app.js 2import { GoogleAnalytics, usePagesViews } from "nextjs-google-analytics"; 3 4const App = ({ Component, pageProps }) => { 5 usePagesViews(); 6 7 return ( 8 <> 9 <Component {...pageProps} /> 10 </> 11 ); 12}; 13 14export default App;
The module also exports a pageView function that you can use if you need more control.
Custom event
You can use the event function to track a custom event:
1import { useState } from "react"; 2import Page from "../components/Page"; 3import { event } from "nextjs-google-analytics"; 4 5export function Contact() { 6 const [message, setMessage] = useState(""); 7 8 const handleInput = (e) => { 9 setMessage(e.target.value); 10 }; 11 12 const handleSubmit = (e) => { 13 e.preventDefault(); 14 15 event("submit_form", { 16 category: "Contact", 17 label: message, 18 }); 19 20 setState(""); 21 }; 22 23 return ( 24 <Page> 25 <h1>This is the Contact page</h1> 26 <form onSubmit={handleSubmit}> 27 <label> 28 <span>Message:</span> 29 <textarea onChange={handleInput} value={message} /> 30 </label> 31 <button type="submit">submit</button> 32 </form> 33 </Page> 34 ); 35}
Web Vitals
To send Next.js web vitals to Google Analytics you can use a custom event on the reportWebVitals function inside a custom App component:
1// pages/_app.js 2import { event } from "nextjs-google-analytics"; 3 4export function reportWebVitals({ id, name, label, value }) { 5 event(name, { 6 category: label === "web-vital" ? "Web Vitals" : "Next.js custom metric", 7 value: Math.round(name === "CLS" ? value * 1000 : value), // values must be integers 8 label: id, // id unique to current page load 9 nonInteraction: true, // avoids affecting bounce rate. 10 }); 11} 12 13const App = ({ Component, pageProps }) => { 14 return ( 15 <> 16 <Component {...pageProps} /> 17 </> 18 ); 19}; 20 21export default App;
If you are using TypeScript,you can import NextWebVitalsMetric from next/app:
1import type { NextWebVitalsMetric } from "next/app"; 2 3export function reportWebVitals(metric: NextWebVitalsMetric) { 4 // ... 5}
TypeScript
The module is written in TypeScript and type definitions are included.
Contributing
Contributions, issues and feature requests are welcome!
Show your support
Give a ⭐️ if you like this project!
LICENSE
No vulnerabilities found.
No security vulnerabilities found.