next.js 🚀 - GA 스크립트 태그를 추가 하시겠습니까?

체크 아웃 <Head>

nodegin 에 2016년 10월 30일

👎216 😄2

@robinvdvleuten GoogleTagManager 구성 요소를 만들고 구현 선택에 따라 Head 또는 바로 뒤에 포함하는 것이 좋습니다.

dariye 에 2016년 10월 31일

사람들이 언급했듯이 Head 태그 또는 https://github.com/react-ga/react-ga 와 같은 반응 친화적 인 솔루션을 사용할 수

impronunciable 에 2016년 11월 02일

👎1

react-ga가 next.js로 작업하는 데 대한 팁이 있습니까?

gtramontina 에 2016년 11월 21일

👍19

@gtramontina 작동합니다. 그렇지 않으면 저는 react-ga 기여자 중 하나이므로 도움을 드릴 수 있습니다.

impronunciable 에 2016년 11월 22일

react-ga 필요 없습니다. <Head> 구성 요소와 함께 Google 태그 관리자를 사용하여 분석을 삽입합니다. nextjs / react에서 작동하는 데 필요한 Google 태그 관리자 코드에 몇 가지 작은 변경 사항이 있습니다.

<Head>
      <script dangerouslySetInnerHTML={{__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXX');`}} />
    </Head>
    <noscript dangerouslySetInnerHTML={{__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden;"></iframe>`}} />

musemind 에 2016년 12월 13일

👍180 ❤53 🎉17

클라이언트 쪽 페이지보기를 추적하는 더 나은 솔루션 인 자동 추적을 권장합니다. 자세한 내용은 https://github.com/MoOx/phenomic/issues/384 를 참조

MoOx 에 2016년 12월 13일

👍1

@impronunciable 일부 인터넷 검색 후에도 여전히 혼란 스럽기 때문에 예제를 가지고 있으면 좋을 것입니다

@MoOx 는 react-ga가 필요하지 않다는 것을 암시하는 것 같습니다. 대신 Google AutoTrack을 사용해야합니다.
그러나 Autotrack은 window 개체에 액세스하는 코드로 스크립트 태그를 생성하도록 지시하므로 서버 측에서 작동하지 않습니다.
어쨌든 react-ga와 같은 반응 컴포넌트를 사용한다면 어디에 넣어야할까요? render ? componentWillMount ? getInitialProps ? react-router를 사용하고 모든 페이지에 대해 한 번에 코드를로드한다고 가정하기 때문에 명확하지 않습니다.

페이지 추적은 페이지가 서버에서 렌더링 될 때와 다른 페이지로 이동할 때 모두 작동해야합니다. 헤드, 페이지 레이아웃 HOC 등이있는 전형적인 Next 앱에서 전체가 어떻게 통합되어야하는지 보는 것은 좋을 것입니다.

Next.js + Google Analytics Autotrack보다 더 좋고 / 간단하고 / 덜 번거롭고 / 최첨단 조합이 있다고 생각하는지 알아두면 좋을 것입니다.

sedubois 에 2017년 01월 17일

👍13

나는 이것을 조사 할 수있다

2017 년 1 월 17 일 화요일 오전 7:59 Sébastien Dubois [email protected]
썼다 :

@impronunciable https://github.com/impronunciable 그것은 좋을 것입니다
인터넷 검색을 한 후에도 여전히 혼란 스럽습니다 .😃이
다시 열리나요?
@MoOx https://github.com/MoOx 는 react-ga가 그렇지 않다는 것을 암시하는 것 같습니다.
Google AutoTrack을 사용해야합니다.
대신 https://github.com/googleanalytics/autotrack
하지만 Autotrack은 다음과 같은 코드로 스크립트 태그를 생성하도록 지시합니다.
창 개체에 액세스하므로 서버 측에서 작동하지 않습니다.
어쨌든 react-ga와 같은 반응 구성 요소를 사용하는 경우 어디에서
넣어? 렌더링에서? componentWillMount? getInitialProps? 아닙니다
React-router를 사용하고
모든 페이지에 대해 한 번 코딩하십시오.
페이지 추적은 페이지가 서버에서 렌더링 될 때와
그런 다음 다른 페이지로 이동할 때. 방법을 보는 것이 좋을 것입니다.
모든 것이 헤드, 페이지가있는 일반적인 Next 앱에 통합되어야합니다.
레이아웃 HOC 등
더 나은 / 단순한 / 적은 것이 있다고 생각하는지 알면 좋을 것입니다.
Next.js + Google보다 번거롭고 최신의 조합
Analytics 자동 추적 ...
—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/zeit/next.js/issues/160#issuecomment-273108099 또는 음소거
실
https://github.com/notifications/unsubscribe-auth/AAKHp9-2bfLXj2hMGlNlkqUSRqEL7R2Cks5rTJ8kgaJpZM4KkXxa
.

impronunciable 에 2017년 01월 17일

자동 추적이 충분하며 클라이언트 측에만 주입되므로 서버 측에 대해 생각할 필요가 없습니다.

MoOx 에 2017년 01월 17일

예제는 https://github.com/MoOx/react-toulouse/commit/c42045d1001ab813c5d7eae5ab2f4f8c08c0025e 를 참조

MoOx 에 2017년 01월 17일

예, 우리는 서버 렌더링을 추적하고 싶지 않습니다. 위치와 같은 것들을 난독하게 만들 것이기 때문입니다.

timneutkens 에 2017년 01월 17일

아니요. 클라이언트가 처리하므로 페이지가 클라이언트에 의해 요청되고 클라이언트 브라우저에서 렌더링된다는 점에 유의하세요. :)

MoOx 에 2017년 01월 17일

OK 나는 코드가 서버 측에서 실행되지 않는 것을 깨닫지 못했습니다. 그래서 @MoOx 에서 권장하는 자동 추적을 사용 https://github.com/relatenow/relate/commit/50dc3f317eb3efa045d5bbe40d1a1a1ad1116458

페이지 조회수를 올바르게 계산하는지 아직 확인하지 않았습니다. 이것은 나에게 새로운 것입니다 😬 😄

sedubois 에 2017년 01월 17일

"실시간"보기를 사용하여 GA를 쉽게 디버깅 할 수 있습니다.

MoOx 에 2017년 01월 17일

@MoOx 예, 그것이 저를 괴롭히는 것입니다. 다른 탭에서 https://relate.now.sh 를 병렬로 방문 할 때 실시간 패널에 아무것도 표시되지 않습니다 (활성 사용자 0 명).

sedubois 에 2017년 01월 17일

나는 아직도 이것을 얻지 못한다. 나는 내가 작성한 코드로 어떤 데이터도 얻지 못한다.

내가 보는 모든 예제에는 <script href="https://www.google-analytics.com/analytics.js" async /> 가 필요한 것 같지만 헤드의 일이 클라이언트에서 실행되지 않는 것 같습니다. (내 console.log는 브라우저 콘솔에 인쇄되지 않습니다 ...)

예는 여전히 매우 감사하겠습니다 🙂

sedubois 에 2017년 01월 18일

아, react-ga로 전환하여 작동했습니다 😄

https://github.com/relatenow/relate/commit/a9d2bce46e5314075af7c12bbaa0266865ff25da

screen shot 2017-01-18 at 14 01 28

sedubois 에 2017년 01월 18일

어떻게 작동하게 되었습니까? componentDidMount 에서 페이지 뷰 함수를 호출하려고했습니다.

프로덕션 앱 GA 확인에 실패했습니다.

luandro 에 2017년 03월 07일

@luandro 는 세부 사항을 기억하지

sedubois 에 2017년 03월 07일

나는 그것을 시도했다. 나는 당신과 똑같이했고, 상단에 configureAnalytics 를 호출하고 componentWillMount 에 페이지 뷰 를 호출했지만 여전히 GA Check에서는 부정적입니다.

귀하의 코드에서 실제로 어디에서나 실제로 연결된 페이지 가 아닌 것

luandro 에 2017년 03월 07일

@luandro ga(‘set’, ‘page’, window.location.pathname); ga(‘send’, ‘pageview’); 를 추가하여 페이지 뷰 이벤트의 URL을 변경하십시오.

durk0 에 2017년 04월 10일

👍4 ❤1

이 작업을 수행하는 더 많은 'next.js'방법이있을 수 있지만 페이지에서 WRT 실행 스크립트는 다음과 같이 Script 구성 요소를 만든 경우 발견했습니다.

// modules/Script.js
export default ({children}) => (
  <script dangerouslySetInnerHTML={{__html: `(${children.toString()})();` }}></script>
);

그런 다음 나를 위해 일한 이것을 할 수 있습니다.

import Document, { Head, Main, NextScript } from 'next/document'
import Script from '../modules/Script';

export default class MyDocument extends Document {

  render () {
    return (
      <html>
        <body>
          <Main />
          <Script>
            {
              () => {
                console.log('foo');
              }
            }
          </Script>
          <NextScript />
        </body>
      </html>
    )
  }
}

주의 할 점은 모든 것을 함수로 묶어야한다는 것입니다.

ryardley 에 2017년 05월 03일

👍33 ❤11 🎉4

모든 페이지에서 명시 적으로 ga ( 'send', 'pageview')를 호출하지 않고도 개별 페이지 뷰를 추적 할 수 있습니까? 꼭해야한다면 ga가로드되었다는 확신을 가지고 어디에서 호출할까요?

페이지 뷰를 기록하는 방식으로 경로 변경 이벤트에 연결할 수 있습니까?

karthikiyengar 에 2017년 05월 17일

@karthikiyengar 위의 다른 사람들이 제안한대로 react-ga 을 사용하고 있으며 모든 페이지의 componentDidMount 에 페이지 뷰를 기록하고 있습니다.

import ReactGA from 'react-ga'

export const initGA = () => {
  console.log('GA init')
  ReactGA.initialize('UA-xxxxxxxx-x')
}
export const logPageView = () => {
  ReactGA.set({ page: window.location.pathname })
  ReactGA.pageview(window.location.pathname)
}

componentDidMount () {
    initGA()
    logPageView()
  }

vinaypuppal 에 2017년 05월 17일

@vinaypuppal 은 모든 페이지 구성 요소에 대해 initGA를 사용하는 것이 일반적입니까?

youfoundron 에 2017년 05월 29일

@rongierlach ReactGA 내의 componentDidMount() ReactGA 에서 componentDidMount() initialize 및 pageview 메서드를 호출하는 Layout 구성 요소를 사용하고 있습니다.

export default class extends Component {
  componentDidMount() {
    ReactGA.initialize('UA-1234567-1')
    ReactGA.pageview(document.location.pathname)
  }

  render() {
    return (
      <div>
        {this.props.children}
     </div>
    )
}

이것은 페이지가 서버 렌더링 된 것처럼 초기화해야하는 것처럼 내가 한 가장 깨끗한 방법입니다. 클라이언트가 렌더링되면 초기화를 우회 할 수있는 후크가 있다고 확신합니다.

notrab 에 2017년 05월 31일

👍14

@notrab 잠재적으로 얕은 렌더링을

componentDidMount() {
    ReactGA.initialize('xx-xxxxxxx-x')
    let trackMe = true

    if (trackMe) {
      ReactGA.pageview(document.location.pathname)
      trackMe = false
    }

    Router.onRouteChangeStart = () => {
      NProgress.start()
      this.store.dispatch(transitionPage(true))
      trackMe = true
    }
    Router.onRouteChangeComplete = () => {
      NProgress.done()
      this.store.dispatch(transitionPage(false))
      if (trackMe) { ReactGA.pageview(document.location.pathname) }
    }
    Router.onRouteChangeError = () => {
      NProgress.done()
      this.store.dispatch(transitionPage(false))
    }

    this.store.dispatch(calculateResponsiveState(window))
  }

kylewiedman 에 2017년 06월 09일

👍6

이 작업을 시도했지만 여전히 Google Analytics에서 응답이 없습니다. 이것은 react-ga.js 내 코드입니다.

import ReactGA from 'react-ga'

const dev = process.env.NODE_ENV !== 'production'

export const initGA = () => {
  ReactGA.initialize("UA-XXXXXXXXX-X", {
    debug: dev,
  })
}

export const trackPageView = (
  pageName = window.location.pathname + window.location.search
) => {
  ReactGA.set({page: pageName})
  ReactGA.pageview(pageName)
}

export const trackCustomEvent = (category, action) =>
  ReactGA.event({category, action})

export default undefined

그리고 내 색인 페이지 :

import {initGA, trackPageView} from '../modules/react-ga.js'
[...]
Index.componentDidMount = function() {
    initGA()
    trackPageView()
}

물론 UA 코드를 실제 코드로 대체했습니다.

filostrato 에 2017년 06월 09일

@filostrato 어떻게

exogenesys 에 2017년 06월 17일

@exogenesys 결국 utils/analytics.js 넣었습니다.

import ReactGA from 'react-ga'

const dev = process.env.NODE_ENV !== 'production'

export const initGA = () => {
  ReactGA.initialize("UA-xxxxxxxxx-x", {
    debug: dev,
  })
}

export const logPageView = (
  pageName = window.location.pathname + window.location.search
) => {
  ReactGA.set({page: pageName})
  ReactGA.pageview(pageName)
}

export const trackCustomEvent = (category, action) =>
  ReactGA.event({category, action})

export default undefined

Layout.js 를 연장하도록 React.Component :

export default class Layout extends React.Component {
    componentDidMount () {
      if (!window.GA_INITIALIZED) {
        initGA()
        window.GA_INITIALIZED = true
    }
    logPageView()
  }

  render () {
    return (
      <Main>
        <Header />
        {this.props.children}
      </Main>
    )
  }
}

getInitialProps 를 사용하는 구성 요소에서 작동하도록하는 방법을 찾지 못했지만 Layout.js 는 제대로 작동하지 않습니다. 더 자세한 통계를 원하면 어떻게해야할지 모르겠지만 그 다리를 건널 때 건너겠습니다.

filostrato 에 2017년 06월 17일

👍5

@filostrato 그게 해냈어. 감사합니다. :)

exogenesys 에 2017년 06월 18일

얘들 아

저는 제 사이트에서도 GA 구현을 다 뤘고 이것이 제가 생각 해낸 것입니다.

먼저 깨끗하고 직관적 인 @notrab 의 솔루션을 사용했습니다.

export default class extends Component {
  componentDidMount() {
    ReactGA.initialize('UA-XXXXXXX-X')
    ReactGA.pageview(document.location.pathname)
  }

  render() {
    …
  }
}

그러나 나는 다음을 발견했습니다.

다른 유형의 페이지간에 전환 할 때 componentDidMount 가 실행되었으므로 initialize 함수가 여러 번 호출되었습니다.
componentDidMount 는 다른 유형의 페이지간에 전환 할 때 _only_ 실행되었으므로 pageview 함수가 호출 된 이후에만 => 웹 사이트에 video 이 있는데 다른 비디오 페이지 사이를 전환하는 동안 초기 비디오 페이지 만 추적 된 GA 라이브 뷰

이 두 가지 문제를 해결하기 위해 고차 구성 요소를 만들었습니다. 처음에는 @filostrato 솔루션을 사용했습니다.

import React, { Component } from 'react';
import ReactGA from 'react-ga';
import Router from 'next/router';

const debug = process.env.NODE_ENV !== 'production';

export default (WrappedComponent) => (
  class GaWrapper extends Component {
    constructor (props) {
      super(props);
      this.trackPageview = this.trackPageview.bind(this);
    }

    componentDidMount() {
      this.initGa();
      this.trackPageview();
      Router.router.events.on('routeChangeComplete', this.trackPageview);
    }

    componentWillUnmount() {
      Router.router.events.off('routeChangeComplete', this.trackPageview);
    }

    trackPageview (path = document.location.pathname) {
      if (path !== this.lastTrackedPath) {
        ReactGA.pageview(path);
        this.lastTrackedPath = path;
      }
    }

    initGa () {
      if (!window.GA_INITIALIZED) {
        ReactGA.initialize('UA-XXXXXX-XX', { debug });
        window.GA_INITIALIZED = true;
      }
    }

    render() {
      return (
        <WrappedComponent {...this.props} />
      );
    }
  }
);

그리고 <Layout> / <PageWrapper> / <PageScaffold> 구성 요소 또는 이름을 지정합니다.

import GaWrapper from './ga-wrapper';

const PageScaffold = () => (…);

export default GaWrapper(PageScaffold);

아마도 그것은 누구에게나 도움이 될 것입니다.

하지만 Router.router.events.… 호출은 문서화 된 API의 일부가 아니기 때문에 마음에 들지 않습니다. 그러나 올바른 방법이어야 하는 Router.onRouteChangeComplete 를 호출하려고하면 onRouteChangeComplete 이 undefined 였기 때문에 ReferenceError가 발생했습니다. 문서가 구식일까요?

osartun 에 2017년 06월 26일

👍13 ❤8

이것은 next.js 웹 사이트에서 저에게 효과적이었습니다. 그리고 react-ga의 일반적인 구현과 함께 실행하던 'window not defined'오류가 발생했습니다.

toolgirl 에 2017년 07월 27일

👍3

@osartun 솔루션이 저에게

florinpop17 에 2017년 08월 14일

👍3

@osartun 의 코드 덕분에 Google의 새로운 gtag (_ universal analytics_ 스크립트를 대체 함)를 사용하여 pageview 이벤트를 실행하는 다음 솔루션을 찾을 수있었습니다.

pages/_document.js

import Document, { Head } from 'next/document';

const GA_TRACKING_ID = '..';

export default class MyDocument extends Document {
  render() {
    return (
      <html lang="en-AU">
        <Head>
          <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
          <script
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments)};
                gtag('js', new Date());
                gtag('config', '${GA_TRACKING_ID}');
              `,
            }}
          />
        </Head>
        ...
      </html>
    );
  }
}

scaffold.js / layout.js / wraper.js / 프로젝트 이름 :

import url from 'url';
import Router from 'next/router';

const GA_TRACKING_ID = '...';

const withPageViews = WrappedComponent =>
  class GaWrapper extends React.Component {
    componentDidMount() {
      // We want to do this code _once_ after the component has successfully
      // mounted in the browser only, so we use a special semiphore here.
      if (window.__NEXT_ROUTER_PAGEVIEW_REGISTERED__) {
        return;
      }

      window.__NEXT_ROUTER_PAGEVIEW_REGISTERED__ = true;
      let lastTrackedUrl = '';

      // NOTE: No corresponding `off` as we want this event listener to exist
      // for the entire lifecycle of the page
      // NOTE: This does _not_ fire on first page load. This is what we want
      // since GA already tracks a page view when the tag is first loaded.
      Router.router.events.on('routeChangeComplete', (newUrl = document.location) => {
        if (newUrl === lastTrackedUrl || !window.gtag) {
          return;
        }

        // Don't double track the same URL
        lastTrackedUrl = newUrl;

        // Believe it or not, this triggers a new pageview event!
        // https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications
        window.gtag('config', GA_TRACKING_ID, {
          page_path: url.parse(newUrl).path,
        });
      });
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

const PageScaffold = () => (…);

export default withPageViews(PageScaffold);

jesstelford 에 2017년 09월 18일

👍14

파티에 늦게 오는 사람에게 @kylewiedman 의 솔루션이 작동하지 않는 이유는 라우터 이벤트가 componentDidMount 내부에 정의되기 때문입니다. 구성 요소 외부에서 정의하면 문제가 해결되는 것 같습니다.

https://gist.github.com/trezy/e26cb7feb2349f585d2daf449411d0a4

trezy 에 2017년 09월 22일

👍9 🎉2 ❤1

@trezy를 사용할 때 gtag , import ReactGA from 'react-ga' 필요가없는 것 같습니다.

<script dangerouslySetInnerHtml={...} /> 예제를 사용하고 다음 한 줄을 주입에 추가했습니다.

window.gaTrackingId = '${gaTrackingId}';

그 후이 가벼운 트릭이 작동하기 시작했습니다.

Router.onRouteChangeComplete = () => {
  if (window.gtag) {
    window.gtag('config', window.gaTrackingId, {
      page_location: window.location.href,
      page_path: window.location.pathname,
      page_title: window.document.title,
    });
  }
};

꽤 큰 analytics.js 는 더 이상 가져 오지 않지만 모든 페이지는 여전히 추적됩니다!

kachkaev 에 2017년 10월 01일

👍11 ❤3

이것은 분명하지 않기 때문에 리포지토리에 예제가 있으면 좋을 것입니다.

nickredmark 에 2018년 03월 01일

👍11

또는 차세대 Google 분석 저장소 🕵️

timneutkens 에 2018년 03월 02일

👍21

@prichodko 이 예제를

guigrpa 에 2018년 05월 04일

👍3

공식 예제 : https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics

aequasi 에 2018년 07월 12일

👍22 ❤4

꽤 좋은 lib를 찾았고 componentDidMount ()의 기본 레이아웃 파일에 추가되었으며 올바르게 작동하는 것 같습니다. 문서화가 잘되어있어 번거롭지 않습니다.

https://www.npmjs.com/package/react-gtm-module

andylacko 에 2018년 11월 12일

@andylacko 사실, 예를 들어 HTTPS와 같은 몇 가지 사항을 수정하기 위해 분기했습니다. https://github.com/Vadorequest/react-gtm

Vadorequest 에 2018년 11월 13일

나중에 누군가에게 유용 할 경우를 대비하여 여기에 내 솔루션을 추가하십시오.

react-ga를 사용 했지만 동일한 로직이 다른 ga 도구에서도 작동합니다.

_app.js 의 getInitialProps는 사용자가 새 경로를 클릭 할 때마다 클라이언트 측에서 트리거됩니다. (처음에는 서버 측에서 실행됩니다).

componentDidMount 중 _app.js 는 클라이언트 측에서만 실행됩니다.

그래서 _app.js 에 다음 몇 줄의 코드를 추가했습니다.

static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);      
    }

    // client-side only, run on page changes, do not run on server (SSR)
    if (typeof(window) === "object") {
      ReactGA.pageview(ctx.asPath);
    }
    return { pageProps, router }
  }


  componentDidMount() {
    // client-side only, run once on mount
    ReactGA.initialize('UA-XXXXXXX-3');
    ReactGA.pageview(window.location.pathname + window.location.search);
  }

페이지가 서버에서 렌더링 될 때 typeof(window) === "object" GA 코드를 래핑했기 때문에 getInitialProps 에서는 아무 일도 일어나지 않습니다.

클라이언트 측에서 getInitialProps 는 모든 것이 서버 렌더링이기 때문에 처음으로 실행되지 않습니다. GA는 클라이언트 측의 componentDidMount 내에 설정됩니다.

후속 경로 변경 (동일한 경로에 대해서도)은 클라이언트 측에서 getInitialProps 를 트리거하고 ga 이벤트가 트리거됩니다.

williamli 에 2018년 12월 10일

👍14

나중에 누군가에게 유용 할 경우를 대비하여 여기에 내 솔루션을 추가하십시오.
react-ga를 사용 했지만 동일한 로직이 다른 ga 도구에서도 작동합니다.
_app.js 의 getInitialProps는 사용자가 새 경로를 클릭 할 때마다 클라이언트 측에서 트리거됩니다. (처음에는 서버 측에서 실행됩니다).
componentDidMount 중 _app.js 는 클라이언트 측에서만 실행됩니다.
그래서 _app.js 에 다음 몇 줄의 코드를 추가했습니다.
static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);      
    }

    // client-side only, run on page changes, do not run on server (SSR)
    if (typeof(window) === "object") {
      ReactGA.pageview(ctx.asPath);
    }
    return { pageProps, router }
  }


  componentDidMount() {
    // client-side only, run once on mount
    ReactGA.initialize('UA-XXXXXXX-3');
    ReactGA.pageview(window.location.pathname + window.location.search);
  }
페이지가 서버에서 렌더링 될 때 typeof(window) === "object" GA 코드를 래핑했기 때문에 getInitialProps 에서는 아무 일도 일어나지 않습니다.
클라이언트 측에서 getInitialProps 는 모든 것이 서버 렌더링이기 때문에 처음으로 실행되지 않습니다. GA는 클라이언트 측의 componentDidMount 내에 설정됩니다.
후속 경로 변경 (동일한 경로에 대해서도)은 클라이언트 측에서 getInitialProps 를 트리거하고 ga 이벤트가 트리거됩니다.

안녕 윌. 웹팩에 ReactGA를 포함하면 (클라이언트 측에서 실행되므로) 빌드 크기에 상당한 영향을 미칩니 까?

ChrisEdson 에 2019년 02월 28일

👍1

@ChrisEdson https://github.com/react-ga/react-ga 전체 라이브러리는 161kb 압축되어 있습니다.

williamli 에 2019년 02월 28일

흠. 솔직히 말해서 정말 엄청납니다!

2019 년 2 월 28 일 목요일 19:01에 William Li [email protected] 은 다음과 같이 썼습니다.

@ChrisEdson https://github.com/ChrisEdson
https://github.com/react-ga/react-ga 전체 라이브러리는 161kb 압축되어 있습니다.
—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/zeit/next.js/issues/160#issuecomment-468395136 또는 음소거
실
https://github.com/notifications/unsubscribe-auth/AC5okwth_o_BLLPeqIcSBmhKineAhYfgks5vSCeUgaJpZM4KkXxa
.

ChrisEdson 에 2019년 03월 01일

👍1

전체 라이브러리에 대해 GitHub에 나열된 번호입니다.
앱에서 패키징 된 실제 크기는 어떻게 확인하나요?

내 iPhone에서 보냄

2019 년 3 월 1 일 15:43에 Chris Edson [email protected] 은 다음과 같이 썼습니다.
흠. 솔직히 말해서 정말 엄청납니다!
2019 년 2 월 28 일 목요일 19:01에 William Li [email protected] 은 다음과 같이 썼습니다.
@ChrisEdson https://github.com/ChrisEdson
https://github.com/react-ga/react-ga 전체 라이브러리는 161kb 압축되어 있습니다.
—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/zeit/next.js/issues/160#issuecomment-468395136 또는 음소거
실
https://github.com/notifications/unsubscribe-auth/AC5okwth_o_BLLPeqIcSBmhKineAhYfgks5vSCeUgaJpZM4KkXxa
.
—
댓글을 달았 기 때문에 수신 한 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 스레드를 음소거하십시오.

williamli 에 2019년 03월 01일

따라서 축소 된 스크립트는 15kb입니다. 아주 작습니다.

내 웹팩을 번들로 분석하고 실제로 얼마나 추가되는지보고 할 것입니다.

ChrisEdson 에 2019년 03월 01일

~ 500kb의 총 번들 크기 내에서 ReactGA는 약 27kb를 추가합니다. 웅장한 계획에서 매우 작습니다.

ChrisEdson 에 2019년 03월 01일

👍2

나중에 누군가에게 유용 할 경우를 대비하여 여기에 내 솔루션을 추가하십시오.
react-ga를 사용 했지만 동일한 로직이 다른 ga 도구에서도 작동합니다.
_app.js 의 getInitialProps는 사용자가 새 경로를 클릭 할 때마다 클라이언트 측에서 트리거됩니다. (처음에는 서버 측에서 실행됩니다).
componentDidMount 중 _app.js 는 클라이언트 측에서만 실행됩니다.
그래서 _app.js 에 다음 몇 줄의 코드를 추가했습니다.
static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);      
    }

    // client-side only, run on page changes, do not run on server (SSR)
    if (typeof(window) === "object") {
      ReactGA.pageview(ctx.asPath);
    }
    return { pageProps, router }
  }


  componentDidMount() {
    // client-side only, run once on mount
    ReactGA.initialize('UA-XXXXXXX-3');
    ReactGA.pageview(window.location.pathname + window.location.search);
  }
페이지가 서버에서 렌더링 될 때 typeof(window) === "object" GA 코드를 래핑했기 때문에 getInitialProps 에서는 아무 일도 일어나지 않습니다.
클라이언트 측에서 getInitialProps 는 모든 것이 서버 렌더링이기 때문에 처음으로 실행되지 않습니다. GA는 클라이언트 측의 componentDidMount 내에 설정됩니다.
후속 경로 변경 (동일한 경로에 대해서도)은 클라이언트 측에서 getInitialProps 를 트리거하고 ga 이벤트가 트리거됩니다.

NextJS 9를 사용하는 경우 발생하는 문제는 자동 사전 렌더링을 비활성화하는 것입니다. 풋 좋은 곳이 있다면 궁금 ReactGA.pageview(ctx.asPath); 에서 제거, getInitialProps 우리는 제거 할 수있는 수단을 getInitialProps : 여기에 설명 된대로 옵트 아웃에 자동 사전 렌더링을 강제하지 HTTPS : //err.sh/next.js/opt-out-automatic-prerendering.

업데이트 : with-google-analytics 예제 (https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics)를 찾아서 Router.events.on('routeChangeComplete', url => ReactGA.pageview(url)) URL이 올바른지 확인하기 위해 테스트해야하지만 올바른 방식으로 보이는지 확인해야합니다. getInitialProps 메서드를 제거하고이를 클래스 선언 위에 추가했습니다.

GodOfGrandeur 에 2019년 07월 16일

❤1 👍1

@GodOfGrandeur 이것은 https://medium.com/@austintoddj/using -google-analytics-with-next-js-423ea2d16a98 _app.js에 코드를 추가하면 필요한 모든 곳에서 트리거되는 것 같습니다 나는 또한 그것이 서버에서 트리거되지 않는 것을 좋아합니다 (문제가 되더라도 없을 것입니다).

hkirsman 에 2019년 07월 18일

제 3자가 필요하지 않습니다. gtag를 사용하는 경우 내가 만든 다음 코드를 사용하십시오

<script
    async
    src="https://www.googletagmanager.com/gtag/js?id=%your code here%" >
</script>
<script dangerouslySetInnerHTML={
    { __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){window.dataLayer.push(arguments)}
        gtag("js", new Date());
        gtag("config", "<%your code here%>");
    `}
}>
</script>

elhakeem 에 2019년 08월 26일

👍23 ❤7 🎉4

또 다른 옵션은 useEffect() 입니다. Layout.js 파일에서이 작업을 수행했습니다.

useEffect(() => {
  if (process.env.NODE_ENV === 'production') {
    window.dataLayer = window.dataLayer || []
    function gtag() {
      dataLayer.push(arguments)
    }
    gtag('js', new Date())
    gtag('config', '{GOOGLE ANALYTICS CODE}', {
      page_location: window.location.href,
      page_path: window.location.pathname,
      page_title: window.document.title,
    })
  }
})

그리고 <Head> :

<Head>
  <script async src="https://www.googletagmanager.com/gtag/js?id={GOOGLE ANALYTICS CODE}"></script>
</Head>

reinink 에 2019년 10월 01일

👍15 ❤5 🎉5

@reinink 두 번째 소품으로 빈 배열을 useEffect 전달하여 초기 렌더링 후 한 번만 함수를 실행하도록 할 수 있음을 언급하고 싶습니다.

useEffect(() => {...}, [])

amorriscode 에 2019년 10월 10일

👍8

@reinink 솔루션을 확장하면 레이아웃 구성 요소 / 템플릿을 래핑하는 데 사용하는 작업 HOC가 있습니다.

import React, { useEffect } from 'react'
import Head from 'next/head'
const GoogleAnalyticsHOC = ({ children }) => {
  useEffect(() => {
    if (process.env.NODE_ENV === 'production') {
      window.dataLayer = window.dataLayer || []
      // eslint-disable-next-line
      function gtag() {
        window.dataLayer.push(arguments)
      }
      gtag('js', new Date())
      gtag('config', process.env.GOOGLE_ANALYTICS_ID, {
        page_location: window.location.href,
        page_path: window.location.pathname,
        page_title: window.document.title
      })
    }
  }, [])
  return (
    <>
      <Head>
        <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS_ID}`} />
      </Head>
      {children}
    </>
  )
}
export default GoogleAnalyticsHOC

광범위하게 테스트되지는 않았지만 로컬에서 실행되는 실시간 방문자로 작동하고 통과합니다. :)

antonmyrberg 에 2020년 02월 25일

🎉4 😕1

이 가이드를 찾았습니다-이것이 권장되는 접근 방식입니까 (react-ga 사용)?

UberVero 에 2020년 03월 04일

권장되는 방법은이 공식 예제를 사용하는 것입니다.

https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics

이미 여기에 게시되어 있습니다. 때로는 github 문제가 stackoverflow와 비슷해지기를 바라며, 질문 직후 (메시지가 너무 많고 이모티콘이 충분하지 않을 때 일부 답변을 수락하고 강조 표시합니다. 한 가지 옵션은이 게시물에 대한 댓글을 제한하는 것이므로 사람들이 새로운 문제를 만들 수 있습니다.) 대신. 그리고 생성하는 동안 비슷한 문제가 이미 만들어졌고 ( "유사한 문제"기능 덕분에) 답이 있습니다 (하지만 여전히 긴 역사의 한가운데 어딘가에서 이모 지에 대한 답을 잃어 버리기 때문에 github에서 답변을 찾는 것이 그리 편리하지 않습니다.)

JerryGreen 에 2020년 03월 05일

👍27 ❤7 🎉5

이미 여기에 게시되어 있습니다. 때로는 github 문제가 stackoverflow와 비슷하고 질문 직후에 일부 답변을 수락하고 강조 표시하기를 바랍니다 (메시지가 너무 많고 이모티콘이 충분하지 않은 경우 ....

Github는이 저장소의 토론 탭에서이를 프로토 타이핑하고 있습니다.

Screenshot 2020-04-08 at 16 59 58

janbaykara 에 2020년 04월 08일

@janbaykara 와우, 정말? 우리 모두는 같은 방식으로 생각합니다. :) 그들이 어떻게 든 문제를 토론으로 변환하는 방법을 찾거나 같은 일이되기를 바랍니다 (기능이 문제에 병합되고 기존의 모든 토론이 문제가되는 경우). 하지만 응답 해 주셔서 감사합니다!

JerryGreen 에 2020년 04월 09일

@ 3lonious 저는 일반적으로 SPA와 잘 작동하지 않기 때문에 개인적으로 Google Analytics를 버렸습니다. (특히 SSR + CSR 및 추적하기 어려운 이중 이벤트에 대한 정말 나쁜 경험)

Next.js에 관해서는 https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/components/pageLayouts/Head.tsx($# 사용)를 확인하십시오 next/Head ), 이것이 앱에 스크립트 태그를 포함하는 방법입니다.

주저하지 말고 NRN https://unlyed.github.io/next-right-now를 살펴보십시오. 이것은 Next.js를 사용하여 "X를 수행하는 방법"에 대한 좋은 예가되기위한 것이며 상당한 두통을 덜어 줄 것입니다.

Vadorequest 에 2020년 06월 18일

내가 그것을 얻는 지 확실하지 않습니다. 그 파일에 스크립트 태그가 보이지 않습니까?

3lonious 에 2020년 06월 18일

이것은 또한 작동하는 솔루션입니다. 나는 그것을 광범위하게 테스트하지 않았으므로 직접 수행하십시오.

pages/_document.js 에서 <Head> 추가하세요. 문서 파일을 재정의하는 방법에 대한 문서를 참조하십시오.

<script async src='https://www.googletagmanager.com/gtag/js?id=YOUR_GA_TRACKING_ID'></script>
<script
    dangerouslySetInnerHTML={{
        __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments)}
            gtag('js', new Date());

            gtag('config', 'YOUR_GA_TRACKING_ID');
              `
      }}>
</script>

적어도 내 GA 계정에 대한 트래픽을보고합니다.

antonmyrberg 에 2020년 06월 18일

❤5 👍4

@ 3lonious Script 태그와 스타일 태그는 같은 방식으로 작동합니다.
위의 솔루션은 경험으로도 작동합니다. (내가 GA를 작동하게 만드는 방법)

Vadorequest 에 2020년 06월 19일

네 감사합니다. 나는 당신에게 다시 연락하려고 노력할 것입니다

3lonious 에 2020년 06월 19일

알았어 내가 일할 수있는 것 같아

3lonious 에 2020년 06월 19일

감사합니다 Anton. 그래 너를위한 새 것이있어 haha

고객 서비스에 사용하는 채팅 앱이 있지만 해당 스크립트 태그도 작동하지 않습니까? 어떤 아이디어?

3lonious 에 2020년 06월 19일

이 두 번째 태그를 본문에 추가하라는 메시지? 그것으로 무엇을합니까?
Screen Shot 2020-06-19 at 6 48 22 AM

3lonious 에 2020년 06월 19일

TBT는 어떻습니까? 구글 애널리틱스를 추가하면 속도 점수가 느려집니다

ernaneluis 에 2020년 07월 15일

TBT는 어떻습니까? 구글 애널리틱스를 추가하면 속도 점수가 느려집니다

콘텐츠 앞에 스크립트를 배치하도록 권장했기 때문입니다. 콘텐츠 아래에 놓으면 점수가 내려 가지 않습니다.

개인적으로 스크립트를 먼저 배치하는 것이 실질적인 이점을 보지 못합니다. 페이지로드가 어떻게해서 든 깨져서 HTML이 완전히로드되지 않고 중단 된 경우에는 히트로 간주하지 않을 수 있습니다.

JerryGreen 에 2020년 07월 15일

👍2

나는 nextjs와 함께 일하고 있습니다. react google place 자동 완성 API를 사용하려고합니다. 그리고 API의 스크립트 태그를 삽입 하시겠습니까? 스크립트 태그는 어디에 삽입해야합니까 ??

ChaitraK2000 에 2020년 08월 19일

_app.js

```js
"react-ga"에서 ReactGA 가져 오기;

componentDidMount() {
  ReactGA.initialize("XX-XXXXXXXXX-X", { debug: false });
  ReactGA.set({ page: this.props.router.pathname });
  ReactGA.pageview(this.props.router.pathname);
  this.unlisten = this.props.router.events.on("routeChangeComplete", (router) => {
      ReactGA.set({ page: router });
      ReactGA.pageview(router);
    });
}

Poshtarenko-Dmitriy 에 2020년 08월 31일

이것은 재밌습니다. 아니, 실제로 이것은 슬프다. React, Next, 전체 생태계가 죽기를 기다릴 수 없습니다.

jfbrennan 에 2020년 09월 02일

👎2

Next.js: GA 스크립트 태그를 추가 하시겠습니까?

가장 유용한 댓글

모든 74 댓글

관련 문제