nextjs google analytics
v2.3.7
笔记
您可能不需要此包。请先检查第三方图书馆。
Google分析Next.js
此软件包使用next.js Script标签优化脚本加载，这意味着它将仅使用Next.js> = 11.0.0在应用程序上使用。
npm install --save nextjs-google-analytics
将GoogleAnalytics组件添加到trackPageViews Prop设置为true自定义应用程序文件：
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics trackPageViews />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ;您可以通过在NEXT_PUBLIC_GA_MEASUREMENT_ID环境变量或使用gaMeasurementId Prop上的GoogleAnalytics组件上设置Google Analytics（分析）测量ID 。如果设置两个，则环境变量将覆盖道具。
您的Google Analytics（分析）测量ID是从NEXT_PUBLIC_GA_MEASUREMENT_ID环境变量读取的，因此请确保将其设置在您的生产环境中：
如果该变量未设置或空为空，则不会加载任何内容，从而可以安全地开发工作。
要加载并在开发中测试它，请补充：
NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"
到您的.env.local文件。
作为替代方案，您可以使用gaMeasurementId参数通过Google Analytics（分析）测量ID 。
NEXT_PUBLIC_GA_MEASUREMENT_ID环境变量将优先于gaMeasurementId param，因此，如果两个都设置为具有不同的值，则环境变量将覆盖参数。
使用GoogleAnalytics组件加载GTAG脚本。您可以将其添加到自定义应用程序组件中，这将负责包含每个页面的必要脚本（或者，如果需要更多控制，则可以按每个页面添加）：
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ;默认情况下，使用afterInteractive策略加载脚本，这意味着它们被注入客户端，并将在水合后运行。
如果您需要更多的控制权，则该组件将公开策略道具以控制脚本的加载方式：
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics strategy = "lazyOnload" />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ;另外，您可以通过使用替代方案来通过
< GoogleAnalytics gtagUrl = "/gtag.js" /> 要跟踪页面视图，将GoogleAnalytics组件的trackPageViews Prop设置为true。
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics trackPageViews />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ;默认情况下，如果启用trackPageViews ，它将在哈希更改上触发，但是您可以通过向trackPageViews提供对象来忽略哈希的更改：
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics trackPageViews = { { ignoreHashChange : true } } />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ;作为替代方案，您可以直接调用自定义应用程序组件中的usePageViews挂钩，请勿在GoogleAnalytics组件上设置trackPageViews Prop或将其设置为false（默认）：
// pages/_app.js
import { GoogleAnalytics , usePageViews } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
usePageViews ( ) ; // IgnoreHashChange defaults to false
// usePageViews({ ignoreHashChange: true });
return (
< >
< GoogleAnalytics /> { /* or <GoogleAnalytics trackPageViews={false} /> */ }
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ;该模块还导出一个pageView函数，如果您需要更多的控件，则可以使用该功能。
您可以使用event功能跟踪自定义事件：
import { useState } from "react" ;
import Page from "../components/Page" ;
import { event } from "nextjs-google-analytics" ;
export function Contact ( ) {
const [ message , setMessage ] = useState ( "" ) ;
const handleInput = ( e ) => {
setMessage ( e . target . value ) ;
} ;
const handleSubmit = ( e ) => {
e . preventDefault ( ) ;
event ( "submit_form" , {
category : "Contact" ,
label : message ,
} ) ;
setState ( "" ) ;
} ;
return (
< Page >
< h1 > This is the Contact page </ h1 >
< form onSubmit = { handleSubmit } >
< label >
< span > Message: </ span >
< textarea onChange = { handleInput } value = { message } />
</ label >
< button type = "submit" > submit </ button >
</ form >
</ Page >
) ;
}有关event中可以指定的可能参数，请参阅Google标签API参考中的event命令。
您可以使用consent功能来更新用户的cookie首选项（GDPR）。
const consentValue : 'denied' | 'granted' = getUserCookiePreferenceFromLocalStorage ( ) ; // 'denied' or 'granted'
consent ( {
arg : 'update' ,
params : {
ad_storage : consentValue ,
analytics_storage : consentValue ,
ad_user_data : consentValue ,
ad_personalization : consentValue
} ,
} ) ;有关arg和params中可以指定的可能值，请参阅Google标签API参考中的consent命令。
要将Next.js Web Vitals发送到Google Analytics（分析）您可以在自定义应用程序组件中的reportWebVitals函数上使用自定义事件：
// pages/_app.js
import { GoogleAnalytics , event } from "nextjs-google-analytics" ;
export function reportWebVitals ( { id , name , label , value } ) {
event ( name , {
category : label === "web-vital" ? "Web Vitals" : "Next.js custom metric" ,
value : Math . round ( name === "CLS" ? value * 1000 : value ) , // values must be integers
label : id , // id unique to current page load
nonInteraction : true , // avoids affecting bounce rate.
} ) ;
}
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ;如果您使用的是Typescript，则可以从next/app中导入NextWebVitalsMetric ：
import type { NextWebVitalsMetric } from "next/app" ;
export function reportWebVitals ( metric : NextWebVitalsMetric ) {
// ...
} gaMeasurementId参数所有导出的组件，钩子和功能，都接受可选的gaMeasurementId参数，以防万一没有提供环境变量：
// pages/_app.js
import { GoogleAnalytics , event } from "nextjs-google-analytics" ;
import { gaMeasurementId } from "./lib/gtag" ;
export function reportWebVitals ( {
id ,
name ,
label ,
value ,
} : NextWebVitalsMetric ) {
event (
name ,
{
category : label === "web-vital" ? "Web Vitals" : "Next.js custom metric" ,
value : Math . round ( name === "CLS" ? value * 1000 : value ) , // values must be integers
label : id , // id unique to current page load
nonInteraction : true , // avoids affecting bounce rate.
} ,
gaMeasurementId
) ;
}
const App = ( { Component , pageProps } ) => {
usePageViews ( { gaMeasurementId } ) ;
return (
< >
< GoogleAnalytics gaMeasurementId = { gaMeasurementId } />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ; 安装Google Analytics（分析）调试器。
通过单击地址栏右侧的图标来打开它。
打开Chrome JavaScript控制台以查看消息。
在Windows和Linux上，按Control-Shift-J。
在Mac上，按Command-Option-J。
刷新您所在的页面。
该模块用打字稿编写，并包括类型定义。
欢迎贡献，问题和功能请求！
如果您喜欢这个项目，请给！
麻省理工学院
