nextjs google analytics
v2.3.7
Catatan
Anda mungkin tidak membutuhkan paket ini. Silakan periksa perpustakaan pihak ketiga terlebih dahulu.
Google Analytics for Next.js
Paket ini mengoptimalkan pemuatan skrip menggunakan tag Script Next.js, yang berarti bahwa ia hanya akan berfungsi pada aplikasi menggunakan next.js> = 11.0.0 .
npm install --save nextjs-google-analytics
Tambahkan komponen GoogleAnalytics dengan prop trackPageViews diatur ke true ke File Aplikasi Kustom Anda:
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics trackPageViews />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ; Anda dapat lulus ID Pengukuran Google Analytics Anda dengan mengaturnya di variabel lingkungan NEXT_PUBLIC_GA_MEASUREMENT_ID atau menggunakan prop gaMeasurementId pada komponen GoogleAnalytics . Variabel lingkungan akan mengesampingkan prop jika keduanya ditetapkan .
ID Pengukuran Google Analytics Anda dibaca dari variabel lingkungan NEXT_PUBLIC_GA_MEASUREMENT_ID , jadi pastikan itu diatur dalam lingkungan produksi Anda:
Jika variabel tidak diatur atau kosong, tidak ada yang akan dimuat, membuatnya aman untuk bekerja dalam pengembangan.
Untuk memuatnya dan mengujinya pada pengembangan, tambahkan:
NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"
ke file .env.local Anda.
Sebagai alternatif, Anda dapat menggunakan Param gaMeasurementId untuk melewati ID Pengukuran Google Analytics Anda.
Variabel lingkungan NEXT_PUBLIC_GA_MEASUREMENT_ID akan lebih diutamakan daripada param gaMeasurementId , jadi jika keduanya diatur dengan nilai yang berbeda, variabel lingkungan akan mengganti param.
Gunakan komponen GoogleAnalytics untuk memuat skrip GTAG. Anda dapat menambahkannya ke komponen aplikasi khusus dan ini akan mengurus memasukkan skrip yang diperlukan untuk setiap halaman (atau Anda dapat menambahkannya berdasarkan per halaman jika Anda memerlukan lebih banyak kontrol):
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ; Secara default, skrip dimuat menggunakan strategi afterInteractive , yang berarti mereka disuntikkan pada sisi klien dan akan berjalan setelah hidrasi.
Jika Anda membutuhkan lebih banyak kontrol, komponen memperlihatkan prop strategi untuk mengontrol bagaimana skrip dimuat:
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics strategy = "lazyOnload" />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ;Anda juga dapat menggunakan alternatif ke jalur default untuk skrip GoogletagManager oleh
< GoogleAnalytics gtagUrl = "/gtag.js" /> Untuk melacak tampilan halaman, atur Prop trackPageViews dari komponen GoogleAnalytics ke True.
// pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;
const App = ( { Component , pageProps } ) => {
return (
< >
< GoogleAnalytics trackPageViews />
< Component { ... pageProps } />
</ >
) ;
} ;
export default App ; Secara default itu akan menjadi pemicu pada perubahan hash jika trackPageViews diaktifkan, tetapi Anda dapat mengabaikan perubahan hash dengan memberikan objek ke 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 ; Sebagai alternatif, Anda dapat secara langsung memanggil hook usePageViews di dalam komponen aplikasi khusus, jangan atur prop trackPageViews pada komponen GoogleAnalytics atau atur ke false (default):
// 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 ; Modul ini juga mengekspor fungsi pageView yang dapat Anda gunakan jika Anda membutuhkan lebih banyak kontrol.
Anda dapat menggunakan fungsi event untuk melacak acara khusus:
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 >
) ;
} Untuk parameter yang mungkin dapat ditentukan dalam event tersebut, silakan merujuk ke perintah event di referensi API TAG Google.
Anda dapat menggunakan fungsi consent untuk memperbarui preferensi cookie pengguna (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
} ,
} ) ; Untuk nilai -nilai yang mungkin yang dapat ditentukan dalam arg dan params , silakan merujuk ke perintah consent dalam referensi API TAG Google.
Untuk mengirim vitals web next.js ke Google Analytics Anda dapat menggunakan acara khusus pada fungsi reportWebVitals di dalam komponen aplikasi khusus:
// 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 ; Jika Anda menggunakan TypeScript, Anda dapat mengimpor NextWebVitalsMetric dari next/app :
import type { NextWebVitalsMetric } from "next/app" ;
export function reportWebVitals ( metric : NextWebVitalsMetric ) {
// ...
} gaMeasurementId Semua komponen, kait, dan fungsi yang diekspor, menerima param gaMeasurementId opsional yang dapat digunakan jika tidak ada variabel lingkungan yang disediakan:
// 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 ; Instal Google Analytics Debugger.
Hidupkannya dengan mengklik ikonnya di sebelah kanan bilah alamat.
Buka konsol JavaScript Chrome untuk melihat pesan.
Pada Windows dan Linux, tekan Control-Shift-J.
Di Mac, tekan Command-option-j.
Segarkan halaman tempat Anda berada.
Modul ini ditulis dalam TypeScript dan Definisi Jenis disertakan.
Kontribusi, masalah, dan permintaan fitur dipersilakan!
Berikan ️ jika Anda menyukai proyek ini!
Mit
