nextjs google analytics скачать - nextjs google analytics Source Code Скачать

Примечание

Вам может не понадобиться этот пакет. Пожалуйста, сначала проверьте сторонние библиотеки.

NextJS Google Analytics

Google Analytics для lete.js

Этот пакет оптимизирует загрузку скрипта с помощью тега Script next.js, что означает, что он будет работать только на приложениях, используя next.js> = 11.0.0 .

Установка

 npm install --save nextjs-google-analytics

TL; DR

Добавьте компонент GoogleAnalytics с помощью поддержки trackPageViews , установленной в 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 или используя предложение gaMeasurementId на компоненте GoogleAnalytics . Переменная среда будет переоценить опору, если оба установлены .

Использование

Ваш идентификатор измерения Google Analytics считывается из переменной среды NEXT_PUBLIC_GA_MEASUREMENT_ID , поэтому убедитесь, что она установлена в вашей производственной среде:

Вертел
NetLify

Если переменная не установлена или не пустая, ничего не будет загружено, что делает ее безопасной работой в разработке.

Чтобы загрузить его и проверить на разработку, добавьте:

 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 , что означает, что они вводят на сторону клиента и будут работать после гидратации.

Если вам нужно больше контроля, компонент раскрывает стратегическую опору, чтобы контролировать, как загружаются сценарии:

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

Просмотр страниц

Для отслеживания просмотров страниц установите предложение 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 включена, но вы можете игнорировать хэш -изменения, предоставив объект для поддержки 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 Insure Component Component, не устанавливайте опору 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 , обратитесь к команде event в ссылке на API Google TAG.

Ссылка на API Google TAG - событие

Согласие

Вы можете использовать функцию 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 , пожалуйста, обратитесь к команде consent в ссылке на API Google TAG.

Ссылка на API Google TAG - согласие

Интернет

Чтобы отправить следующие VEBEALS в 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, вы можете импортировать NextWebVitalsMetric из next/app :

 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

Установите отладчик Google Analytics.
Включите его, щелкнув его значок справа от адресной панели.
Откройте консоль Chrome JavaScript, чтобы увидеть сообщения.
В Windows и Linux нажмите управление-сдвиг-J.
На Mac нажмите Command-Option-J.
Обновить страницу, на которой вы находитесь.

Машинопись

Модуль написан в типографии, а определения типа включены.

Внося

Взносы, проблемы и запросы на функции приветствуются!

Покажите свою поддержку

Дайте ️, если вам нравится этот проект!

ЛИЦЕНЗИЯ

Грань

Расширять

nextjs google analytics