nextjs google analyticsダウンロード-NEXTJSGoogle nextjs google analyticsソースコードダウンロード

注記

このパッケージは必要ないかもしれません。まずサードパーティのライブラリを確認してください。

NextJS Googleアナリティクス

next.jsのGoogle Analytics

このパッケージは、next.js Scriptタグを使用してスクリプトの読み込みを最適化します。つまり、 next.js> = 11.0.0を使用してアプリでのみ動作します。

インストール

 npm install --save nextjs-google-analytics

tl; dr

trackPageViews Propをカスタムアプリファイルにtrueに設定してGoogleAnalyticsコンポーネントを追加します。

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

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

export default App ;

Google Analytics測定IDは、 NEXT_PUBLIC_GA_MEASUREMENT_ID環境変数に設定するか、 GoogleAnalyticsコンポーネントのgaMeasurementIdプロップを使用して渡すことができます。環境変数は、両方が設定されている場合、プロップをオーバーライドします。

使用法

Google Analytics測定IDは、 NEXT_PUBLIC_GA_MEASUREMENT_ID環境変数から読み取られるため、本番環境で設定されていることを確認してください。

ヴェルセル
netlify

変数が設定されていない、または空の場合、何もロードされないため、開発で安全に機能します。

それをロードして開発でテストするには、追加します。

 NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

.env.localファイルに。

別の方法として、 gaMeasurementId Paramを使用してGoogle Analytics測定IDを渡すことができます。

NEXT_PUBLIC_GA_MEASUREMENT_ID環境変数は、 gaMeasurementId PARAMよりも優先されるため、両方が異なる値で設定されている場合、環境変数は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" />

ページビュー

Pageビューを追跡するには、 GoogleAnalyticsコンポーネントのtrackPageViewsプロップを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プロップGoogleAnalytics設定したり、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コマンドを参照してください。

GoogleタグAPIリファレンス - イベント

同意

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 Tag APIリファレンスのconsentコマンドを参照してください。

GoogleタグAPIリファレンス - 同意

Webバイタル

Next.js Web Vitalsを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 Paramを受け入れます。

 // 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を押します。
あなたがいるページを更新します。

タイプスクリプト

モジュールはタイプスクリプトで記述され、タイプ定義が含まれています。

貢献

貢献、問題、機能のリクエストは大歓迎です！

あなたのサポートを見せてください

あなたがこのプロジェクトが好きなら§を贈りましょう！

ライセンス

mit

拡大する

nextjs google analytics

NextJS Googleアナリティクス

インストール

tl; dr

使用法

スクリプト

ページビュー

カスタムイベント

同意

Webバイタル

`gaMeasurementId` PARAMを使用します

Googleアナリティクスをデバッグします

タイプスクリプト

貢献

あなたのサポートを見せてください

ライセンス

google noto emoji scraper

google art downloader

グーグルマップ

Google Play ソフトウェア

グーグルグーグルプレイ

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

使用法

スクリプト

ページビュー

カスタムイベント

同意

Webバイタル

gaMeasurementId PARAMを使用します

Googleアナリティクスをデバッグします

タイプスクリプト

貢献

あなたのサポートを見せてください

ライセンス

`gaMeasurementId` PARAMを使用します