nextjs google analytics Download nextjs google analytics 소스 코드 다운로드

메모

이 패키지가 필요하지 않을 수 있습니다. 먼저 타사 라이브러리를 확인하십시오.

Nextjs Google 웹 로그 분석

Next.js 용 Google 웹 로그 분석

이 패키지는 Next.js Script 태그를 사용하여 스크립트로드를 최적화합니다. 즉 , 다음 .js> = 11.0.0을 사용하여 앱에서만 작동합니다 .

설치

 npm install --save nextjs-google-analytics

tl; dr

trackPageViews 소품을 사용자 정의 앱 파일에 true 로 설정하여 GoogleAnalytics 구성 요소를 추가하십시오.

 // 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 환경 변수에 설정하거나 GoogleAnalytics 구성 요소의 gaMeasurementId Prop을 사용하여 Google 웹 로그 분석 측정 ID를 전달할 수 있습니다. 둘 다 설정하면 환경 변수가 소품을 무시합니다 .

용법

Google Analytics Measurement ID는 NEXT_PUBLIC_GA_MEASUREMENT_ID 환경 변수에서 읽으므로 프로덕션 환경에서 설정되어 있는지 확인하십시오.

Vercel
Netlify

변수가 설정되지 않았거나 비어 있으면 아무것도로드되지 않아 개발 중에 안전하게 작동합니다.

그것을로드하고 개발시 테스트하려면 다음을 추가하십시오.

 NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

.env.local 파일에.

대안으로 gaMeasurementId Param을 사용하여 Google Analytics Measurement 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 ;

또한 Googletagmanager 스크립트의 기본 경로에 대안을 사용할 수 있습니다.

 < 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 Prop에 개체를 제공하여 해시 변경 사항을 무시할 수 있습니다.

 // 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 Props를 설정하지 않거나 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 Tag API 참조의 event 명령을 참조하십시오.

Google 태그 API 참조 - 이벤트

동의

consent 기능을 사용하여 사용자의 쿠키 환경 설정 (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 Tag API 참조의 consent 명령을 참조하십시오.

Google 태그 API 참조 - 동의

웹 생명

다음.js 웹 생명체를 Google 웹 로그 분석으로 보내려면 사용자 정의 앱 구성 요소 내에서 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` param 사용

내보내는 모든 구성 요소, 후크 및 기능은 환경 변수가 제공되지 않는 경우에 사용할 수있는 선택적 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 웹 로그 분석 디버깅

Google 웹 로그 분석 디버거를 설치하십시오.
주소 표시 줄의 오른쪽에 아이콘을 클릭하여 켜십시오.
Chrome JavaScript 콘솔을 열어 메시지를보십시오.
Windows 및 Linux에서 Control-Shift-J를 누릅니다.
Mac에서는 Command-Option-J를 누릅니다.
당신이있는 페이지를 새로 고치십시오.

TypeScript

모듈은 TypeScript로 작성되며 유형 정의가 포함되어 있습니다.

기여

기부금, 문제 및 기능 요청을 환영합니다!

지원을 보여주세요

이 프로젝트가 마음에 들면 옆을주세요!

특허

MIT

확장하다

nextjs google analytics

Nextjs Google 웹 로그 분석

설치

tl; dr

용법

스크립트

페이지보기

맞춤형 이벤트

동의

웹 생명

`gaMeasurementId` param 사용

Google 웹 로그 분석 디버깅

TypeScript

기여

지원을 보여주세요

특허

google noto emoji scraper

google art downloader

구글 지도

구글 플레이 소프트웨어

구글 구글 플레이

Google 사이트맵 생성기

chat.petals.dev

GPT Prompt Templates

GPTyped

ML stack

awesome free chatgpt

pywin_contextmenu

Google Dorks

shepherd

mongo express

nextjs google analytics

Nextjs Google 웹 로그 분석

설치

tl; dr

용법

스크립트

페이지보기

맞춤형 이벤트

동의

웹 생명

gaMeasurementId param 사용

Google 웹 로그 분석 디버깅

TypeScript

기여

지원을 보여주세요

특허

`gaMeasurementId` param 사용