nextjs google analytics

บันทึก

คุณอาจไม่ต้องการแพ็คเกจนี้ โปรดตรวจสอบห้องสมุดบุคคลที่สามก่อน

nextjs Google Analytics

Google Analytics สำหรับ next.js

แพ็คเกจนี้เพิ่มประสิทธิภาพการโหลดสคริปต์โดยใช้แท็ก Script next.js ซึ่งหมายความว่ามันจะ ใช้งานได้กับแอพโดยใช้ next.js> = 11.0.0

การติดตั้ง

 npm install --save nextjs-google-analytics

tl; dr

เพิ่มส่วนประกอบ 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 ;

คุณสามารถผ่าน รหัสการวัด Google Analytics ของคุณได้โดยการตั้งค่าบนตัวแปรสภาพแวดล้อม NEXT_PUBLIC_GA_MEASUREMENT_ID หรือใช้ prop gaMeasurementId บนองค์ประกอบ GoogleAnalytics ตัวแปรสภาพแวดล้อมจะแทนที่เสาหากทั้งสองถูกตั้งค่า

การใช้งาน

รหัสการวัด Google Analytics ของคุณถูกอ่านจากตัวแปรสภาพแวดล้อม NEXT_PUBLIC_GA_MEASUREMENT_ID ดังนั้นตรวจสอบให้แน่ใจว่าตั้งค่าในสภาพแวดล้อมการผลิตของคุณ:

• vercel
• ทำให้เป็นตะลึง

หากตัวแปรไม่ได้ตั้งค่าหรือว่างเปล่าจะไม่มีอะไรโหลดทำให้ปลอดภัยในการทำงานในการพัฒนา

ในการโหลดและทดสอบในการพัฒนาเพิ่ม:

 NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

ไปยังไฟล์ .env.local ของคุณ

เป็นทางเลือกคุณสามารถใช้ param gaMeasurementId เพื่อส่ง รหัสการวัด Google Analytics ของคุณ

ตัวแปรสภาพแวดล้อม NEXT_PUBLIC_GA_MEASUREMENT_ID จะมีความสำคัญกว่าพารามิเตอร์ gaMeasurementId ดังนั้นหากทั้งสองถูกตั้งค่าด้วยค่าที่แตกต่างกันตัวแปรสภาพแวดล้อมจะแทนที่พารามิเตอร์

สคริปต์

ใช้ส่วนประกอบ GoogleAnalytics เพื่อโหลดสคริปต์ GTAG คุณสามารถเพิ่มลงในส่วนประกอบแอพที่กำหนดเองและสิ่งนี้จะดูแลรวมถึงสคริปต์ที่จำเป็นสำหรับทุกหน้า (หรือคุณสามารถเพิ่มได้ในแต่ละหน้าหากคุณต้องการการควบคุมเพิ่มเติม):

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

โดยค่าเริ่มต้นสคริปต์จะถูกโหลดโดยใช้กลยุทธ์ afterInteractive ซึ่งหมายความว่าพวกเขาจะถูกฉีดบนฝั่งไคลเอ็นต์และจะทำงานหลังจากความชุ่มชื้น

หากคุณต้องการการควบคุมมากขึ้นส่วนประกอบจะเปิดเผย Prop กลยุทธ์เพื่อควบคุมวิธีการโหลดสคริปต์:

 // 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" /> 

การดูหน้าเว็บ

ในการติดตามการดูหน้าเว็บตั้งค่า prop trackPageViews ของส่วนประกอบ GoogleAnalytics เป็น TRUE

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics trackPageViews />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

โดยค่าเริ่มต้นมันจะถูกทริกเกอร์ในการเปลี่ยนแปลงแฮชหากเปิดใช้งาน trackPageViews แต่คุณสามารถเพิกเฉยต่อการเปลี่ยนแปลงแฮชได้โดยการจัดหาวัตถุให้กับ prop 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 Hook ภายในส่วนประกอบแอพที่กำหนดเองได้โดยตรง อย่าตั้งค่า prop trackPageViews บนส่วนประกอบ GoogleAnalytics หรือตั้งค่าเป็นเท็จ (ค่าเริ่มต้น):

 // 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 โปรดดูคำสั่ง event ในการอ้างอิง Google Tag API

• การอ้างอิง Google Tag 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 โปรดดูคำสั่ง consent ในการอ้างอิง Google Tag API

• การอ้างอิง Google Tag API - ความยินยอม

เว็บ Vitals

ในการส่ง 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 ;

next/app NextWebVitalsMetric ใช้ TypeScrip

 import type { NextWebVitalsMetric } from "next/app" ;

export function reportWebVitals ( metric : NextWebVitalsMetric ) {
  // ...
} 

การใช้ param 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

1. ติดตั้ง Google Analytics ดีบักเกอร์

2. เปิดใช้งานโดยคลิกที่ไอคอนทางด้านขวาของแถบที่อยู่

3. เปิดคอนโซล Chrome JavaScript เพื่อดูข้อความ

   บน Windows และ Linux กด Control-Shift-J

   บน Mac ให้กด Option-j

4. รีเฟรชหน้าคุณเปิดอยู่

ตัวพิมพ์ใหญ่

โมดูลถูกเขียนใน TypeScript และประเภทคำจำกัดความรวมอยู่ด้วย

การบริจาค

ยินดีต้อนรับการมีส่วนร่วมปัญหาและคำขอคุณสมบัติ!

แสดงการสนับสนุนของคุณ

ให้️ถ้าคุณชอบโครงการนี้!

ใบอนุญาต

มิกซ์