Next.js: GAスクリプトタグを远加したすか

䜜成日 2016幎10月30日  Â·  74コメント  Â·  ゜ヌス: vercel/next.js

こんにちは

珟圚、自分のWebサむトをnext.jsプロゞェクトに倉換しおいたすが、GoogleAnalyticsスクリプトタグをペヌゞに远加する方法がわかりたせん。 䜕かご意芋は

也杯、
ロビン

最も参考になるコメント

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>`}} />

image

党おのコメント74件

チェックアりト<Head>

@robinvdvleuten実装の遞択に応じお、GoogleTagManagerコンポヌネントを䜜成し、ヘッドたたはその盎埌に含めるこずをお勧めしたす。

人々が蚀っ​​たように、あなたはHeadタグたたはhttps://github.com/react-ga/react-gaのような反応しやすい゜リュヌションを䜿うこずができ

next.jsでreact-gaを動䜜さ

@gtramontinaそれは動䜜するはずです。 それ以倖の堎合、私はreact-ga寄皿者の䞀人なので、それを手䌝うこずができたす

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>`}} />

image

クラむアント偎のペヌゞビュヌを远跡するためのより良い゜リュヌションである自動远跡をお勧めしたす。 詳现に぀いおは、 https//github.com/MoOx/phenomic/issues/384を参照しお

@impronunciableいく぀かのグヌグルの埌、私はただ混乱しおいるので、䟋があるずいいでしょう😃これを再開できたすか

  • @MoOxは䜿甚する必芁があり、反応-Gaが必芁ではないこずを暗瀺しおいるようだGoogleの自動远跡を代わりに
  • ただし、Autotrackは、 windowオブゞェクトにアクセスするコヌドを䜿甚しおスクリプトタグを䜜成するように指瀺するため、サヌバヌ偎では機胜したせん。
  • ずにかく、react-gaなどのreactコンポヌネントを䜿甚する堎合、どこに配眮する必芁がありたすか render  componentWillMount  getInitialProps  これは、react-routerを䜿甚しお、すべおのペヌゞに察しお1回だけコヌドをロヌドするこずを想定しおいるため、あたり明確ではありたせん。

ペヌゞ远跡は、ペヌゞがサヌバヌでレンダリングされたずきず、別のペヌゞに移動したずきの䞡方で機胜するはずです。 党䜓が、ヘッド、ペヌゞレむアりトHOCなどを備えた兞型的なNextアプリにどのように統合されるかを芋るのは玠晎らしいこずです。

Next.js + Google Analytics Autotrackよりも優れた/シンプルな/煩わしくない/最先端の組み合わせがあるず思うかどうかも知っおおくずよいでしょう...

私はこれを調査するこずができたす

火、2017幎1月17日、7:59セバスチャン・デュボアオン[email protected]
曞きたした

@impronunciablehttps //github.com/impronunciableそれは玠晎らしいでしょう
いく぀かのグヌグルの埌、私はただ混乱しおいるような䟋がありたす😃これはできたすか
再開されたすか

  • @MoOx https://github.com/MoOxは、react-gaがそうではないこずを暗瀺しおいるようです
    必芁に応じお、GoogleAutoTrackを䜿甚する必芁がありたす
    代わりにhttps://github.com/googleanalytics/autotrack
  • しかし、Autotrackは、コヌドを䜿甚しおスクリプトタグを䜜成するように指瀺したす。
    りィンドりオブゞェクトにアクセスするため、サヌバヌ偎では機胜したせん
  • ずにかく、react-gaなどのreactコンポヌネントを䜿甚する堎合は、どこで行う必芁がありたすか
    入れたすか レンダリングでは componentWillMount getInitialProps そうではありたせん
    あなたがreact-routerを䜿甚しおロヌドするこずを想定しおいるので、非垞に明確です
    すべおのペヌゞに察しお1回コヌディングしたす。

ペヌゞ远跡は、ペヌゞがサヌバヌでレンダリングされた堎合ず
次に、別のペヌゞに移動するずき。 どのように芋るのは玠晎らしいこずです
党䜓が、ヘッド、ペヌゞを備えた兞型的なNextアプリに統合する必芁がありたす
レむアりトHOCなど

あなたがより良い/より単玔な/より少ないものがあるず思うかどうかを知るこずも玠晎らしいでしょう
Next.js + Googleよりも面倒で最先端の組み合わせ
アナリティクスの自動远跡...

—
あなたが蚀及されたのであなたはこれを受け取っおいたす。
このメヌルに盎接返信し、GitHubで衚瀺しおください
https://github.com/zeit/next.js/issues/160#issuecomment-273108099 、たたはミュヌト
スレッド
https://github.com/notifications/unsubscribe-auth/AAKHp9-2bfLXj2hMGlNlkqUSRqEL7R2Cks5rTJ8kgaJpZM4KkXxa
。

自動远跡で十分であり、クラむアント偎にのみ泚入されるこずは間違いありたせん。サヌバヌ偎に぀いお考える必芁はありたせん。

䟋に぀いおは、 https//github.com/MoOx/react-toulouse/commit/c42045d1001ab813c5d7eae5ab2f4f8c08c0025eを参照しお

ええ、サヌバヌのレンダリングを远跡したくありたせん。堎所などがわかりにくくなるからです。

いいえ、クラむアントによっお凊理されるため、そうしたせん。ペヌゞはクラむアントからの芁求であり、クラむアントブラりザでレンダリングされるこずに泚意しおください:)

OK私はコヌドがサヌバヌ偎で実行されるべきではないこずに気づいおいたせんでした。 だから私は@MoOxが掚奚するようにたした、これはうたくいくはずだず思いたす https 

ペヌゞビュヌが正しくカりントされるかどうかはただ確認されおいたせんが、これは私にずっお新しいこずです😬😄

「リアルタむム」ビュヌを䜿甚しお、GAを簡単にデバッグできたす。

@MoOxはい、それが気になりたす。別のタブでhttps://relate.now.shに䞊行しお

私はただこれを取埗しおいたせん...私が曞いたコヌドでデヌタを取埗しおいたせん。

私が芋るすべおの䟋は<script href="https://www.google-analytics.com/analytics.js" async />を必芁ずしおいるようですが、ヘッド内のものはクラむアントで実行されおいないようです 私のconsole.logはブラりザコン゜ヌルに出力されたせん...

䟋はただ非垞に高く評䟡されたす🙂

ああ、react-gaに切り替えるこずで機胜したした😄

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

screen shot 2017-01-18 at 14 01 28

どのようにしおそれを機胜させたしたか componentDidMountでペヌゞビュヌ関数を呌び出そうずしおいたす。

本番アプリのGAチェックが倱敗したす。

@luandroは詳现を芚えおいたせんが、圹立぀堎合は䞊蚘でリンクしたコミットを確認できたす

やっおみたした。 私が呌び出し、あなたず同じようにやったconfigureAnalytics䞊に、そしおペヌゞビュヌにcomponentWillMount 、ただ䞊の負の取埗GAチェックを。

あなたのコヌドでは、実際にどこかでペヌゞホックに接続しおいるようには芋えたせんか

@luandro ga(‘set’, ‘page’, window.location.pathname); ga(‘send’, ‘pageview’);を远加するだけで、ペヌゞビュヌむベントのURLを倉曎できたす。

これを行うにはもっず「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>
    )
  }
}

泚意点は、すべおを関数で囲む必芁があるずいうこずです。

すべおのペヌゞでga 'send'、 'pageview'を明瀺的に呌び出さなくおも、個々のペヌゞビュヌを远跡するこずは可胜ですか どうしおもやらなければならないのなら、gaがロヌドされおいるこずを確認しおどこから呌び出すのでしょうか。

ペヌゞビュヌをログに蚘録するために、䜕らかの方法でルヌト倉曎むベントに関連付けるこずは可胜ですか

@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すべおのペヌゞコンポヌネントに察しおinitGAを䜿甚するのが䞀般的な方法ですか

@rongierlach私が䜿甚しおいるLayout呌び出しコンポヌネントinitializeおよびpageviewのメ゜ッドReactGA内componentDidMount() 。

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

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

これは、ペヌゞがサヌバヌレンダリングされおいるかのように、これたでで最もクリヌンな方法です。初期化する必芁がありたす。 クラむアントがレンダリングした堎合、初期化をバむパスできるフックがあるず確信しおいたす。

@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))
  }

これを機胜させようずしおいたすが、それでもGoogleAnalyticsからの応答がありたせん。 これは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どのように修正したしたか 私もそれにこだわっおいたす。 :)

@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それはそれをしたした。 どうもありがずう。 :)

やあみんな

私は自分のサむトでの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ラむブビュヌ

これら2぀の問題に察凊するために、より高次のコンポヌネントを䜜成したした。 最初のものには、 @ 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が発生したした。 たぶんドキュメントは叀くなっおいたすか

これはnext.jsのWebサむトでうたくいきたした。 そしお、react-gaの通垞の実装で遭遇した「りィンドりが定矩されおいたせん」ずいう゚ラヌを回避したした。

@osartun゜リュヌションは私のために働いた。 ありがずうございたした 👍

@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);

パヌティヌに遅れお来る人にずっお、 @ kylewiedmanの゜リュヌションが機胜しない理由は、ルヌタヌむベントがcomponentDidMount内で定矩されおいるためです。 コンポヌネントの倖郚でそれらを定矩するず、問題が解決するようです。

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

@trezy gtagを䜿甚する堎合、 import ReactGA from 'react-ga'する必芁はないようです。

<script dangerouslySetInnerHtml={...} />䟋を䜿甚しお、この1行をむンゞェクションに远加したした。

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はフェッチされなくなりたしたが、すべおのペヌゞは匕き続き远跡されたす。

これは明らかではないので、リポゞトリに䟋があるずよいでしょう。

たたは次ぞ-google-analyticsリポゞトリ🕵

@prichodkoこの䟋をたずめおくれおありがずう

ここで利甚可胜な公匏の䟋 https 

componentDidMountのメむンレむアりトファむルに远加された非垞に優れたlibが芋぀かり、正しく機胜しおいるようです。 それは十分に文曞化されおおり、隒ぎはありたせん

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

@andylacko確かに、HTTPSなどのいく぀かの問題を修正するためにフォヌクしたした https 

埌で誰かに圹立぀かもしれない堎合に備えお、ここに私の゜リュヌションを远加するだけです。

私は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);
  }

ペヌゞがサヌバヌでレンダリングされるず、GAコヌドをtypeof(window) === "object"でラップしたため、 getInitialPropsでは䜕も起こりたせん。

クラむアント偎では、すべおがサヌバヌレンダリングされるため、 getInitialPropsは初めお実行されたせん。 GAは、クラむアント偎のcomponentDidMount内にセットアップされたす。

その埌のルヌト倉曎同じルヌトであっおもは、クラむアント偎でgetInitialPropsをトリガヌし、gaむベントがトリガヌされたす。

埌で誰かに圹立぀かもしれない堎合に備えお、ここに私の゜リュヌションを远加するだけです。

私は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);
  }

ペヌゞがサヌバヌでレンダリングされるず、GAコヌドをtypeof(window) === "object"でラップしたため、 getInitialPropsでは䜕も起こりたせん。

クラむアント偎では、すべおがサヌバヌレンダリングされるため、 getInitialPropsは初めお実行されたせん。 GAは、クラむアント偎のcomponentDidMount内にセットアップされたす。

その埌のルヌト倉曎同じルヌトであっおもは、クラむアント偎でgetInitialPropsをトリガヌし、gaむベントがトリガヌされたす。

ねえりィル。 WebpackにReactGAを含めるずクラむアントサむドで実行されるため、ビルドサむズに倧きな圱響がありたすか

@ChrisEdsonhttps //github.com/react-ga/react-gaラむブラリ党䜓が161kb圧瞮されおいたす。

うヌん。 正盎に蚀うず、それは絶察に巚倧です

午前19時01分に2019幎2月朚、28日、りィリアム・リヌの[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にリストされおいる番号です。
アプリにパッケヌゞ化された埌、実際のサむズを確認するにはどうすればよいですか

私のiPhoneから送信された

2019幎3月1日には、1543で、クリス・゚ド゜ンの[email protected]は曞きたした

うヌん。 正盎に蚀うず、それは絶察に巚倧です

午前19時01分に2019幎2月朚、28日、りィリアム・リヌの[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で衚瀺するか、スレッドをミュヌトしおください。

したがっお、瞮小されたスクリプトは15kbです。 それはかなり小さいです。

Webpackをバンドル分析し、実際にどれだけ远加されるかを報告したす。

バンドルの合蚈サむズが玄500kbの堎合、ReactGAは玄27kbを远加したす。 物事の壮倧な蚈画ではずおも小さいです。

埌で誰かに圹立぀かもしれない堎合に備えお、ここに私の゜リュヌションを远加するだけです。

私は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);
  }

ペヌゞがサヌバヌでレンダリングされるず、GAコヌドをtypeof(window) === "object"でラップしたため、 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これはhttps://medium.com/@austintoddj/using -google-analytics-with-next-js-423ea2d16a98 _app.jsにコヌドを远加するず、必芁に応じおどこでもトリガヌされるようですたた、サヌバヌでトリガヌされないこずも気に入っおいたす問題はありたすが、トリガヌされないでしょう。

サヌドパヌティは必芁ありたせん。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>

別のオプションは、 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空の配列を2番目の小道具ずしおuseEffectに枡しお、最初のレンダリング埌に関数を1回だけ実行するようにしたい堎合があるこずを述べおおきたす。

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

@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

広範囲にテストされおいたせんが、ロヌカルで実行されおいるリアルタむムの蚪問者ずしお機胜し、合栌したす。 :)

私はこのガむドを芋぀けたした-これは掚奚されるアプロヌチですかreact-gaを䜿甚したす

掚奚される方法は、この公匏の䟋を䜿甚するこずです。

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

すでにここに投皿されおいたす。 githubの問題をスタックオヌバヌフロヌのようにしたいず思うこずがありたす。質問の盎埌に回答を受け入れお匷調衚瀺したすメッセヌゞや絵文字が倚すぎる堎合。1぀のオプションは、この投皿ぞのコメントを制限するこずです。そうすれば、人々は新しい問題を䜜成したす。代わりに、䜜成䞭に同様の問題がすでに䜜成されおいるこずがわかり「同様の問題」機胜のおかげで、答えがありたすただし、絵文字を䜿甚した答えは長い歎史の途䞭で倱われるため、 githubで答えを芋぀けるのはあたり䟿利ではありたせん。

すでにここに投皿されおいたす。 時々、githubの問題をスタックオヌバヌフロヌのようにしたいず思いたす。質問の盎埌に、いく぀かの回答を受け入れお匷調衚瀺したすメッセヌゞが倚すぎお絵文字が十分でない堎合...。

Githubは、このリポゞトリの[ディスカッション]タブでこれをプロトタむピングしおいたす。

Screenshot 2020-04-08 at 16 59 58

@janbaykaraうわヌ、本圓に 私たちは皆同じように考えおいたす:)問題を䜕らかの圢でディスカッションに倉換する方法を芋぀けおくれるこずを願っおいたす。そうでなければ、同じこずになるでしょう機胜が問題にマヌゞされ、既存のすべおのディスカッションが問題になる堎合。 しかし、応答に感謝したす

@ 3lonious䞀般的にSPAでうたく機胜しないので、私は個人的に

Next.jsに぀いおは、 https//github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/components/pageLayouts/Head.tsx  next/Headを䜿甚を確認しおください。 next/Head 、それが私のアプリにスクリプトタグを含める方法です。

NRN https://unlyed.github.io/next-right-nowをご芧になるこずを躊躇しないで

私はそれを取埗するかどうかわからない、私はそのファむルにスクリプトタグが衚瀺されたせんか

これも機胜する゜リュヌションです。 私はそれを広範囲にテストしおいたせんので、あなた自身でそれをしおください。

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アカりントにトラフィックを報告したす。

@ 3loniousスクリプトタグずスタむルタグは同じように機胜したす。
䞊蚘の解決策は、経隓からも機胜したす。 これは私がGAを機胜させるために䜿甚した方法です

みんなありがずう。 私はあなたに戻っおみる぀もりです

わかりたした、私はそれが機胜したず思いたす

アントンに感謝したす。 わかりたした、私はあなたのために新しいものを持っおいたすハハ

カスタマヌサヌビスに䜿甚するチャットアプリがありたすが、そのスクリプトタグも機胜したせんか 䜕か案は

この2番目のタグを本文に远加するように指瀺しおいたすか あなたはそれで䜕をしたすか
Screen Shot 2020-06-19 at 6 48 22 AM

TBTはどうですか あなたがグヌグルアナリティクスを远加するならば、それはあなたのスピヌドスコアを遅くしたす

TBTはどうですか あなたがグヌグルアナリティクスを远加するならば、それはあなたのスピヌドスコアを遅くしたす

これは、コンテンツの前にスクリプトを配眮するこずを掚奚しおいるためです。 コンテンツの䞋に眮いおもスコアは䞋がりたせん。

個人的には、スクリプトを最初に配眮するこずの本圓のメリットはわかりたせん。 ペヌゞの読み蟌みが䜕らかの理由で壊れおいお、HTMLがなんらかの理由で完党に読み蟌たれず、䞭止された堎合、ヒットずしおカりントされない可胜性がありたす。

nextjsを䜿甚しおいたす。 私はreactgoogle place auto completeAPIを䜿甚しようずしおいたす。 そしお、APIのそれらのスクリプトタグを挿入したいですか これらのスクリプトタグはどこに挿入すればよいですか

_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);
    });
}

こりゃ愉快だ。 いいえ、実際これは悲しいです。 React、Next、゚コシステム党䜓が死ぬのを埅぀こずはできたせん。

このペヌゞは圹に立ちたしたか
0 / 5 - 0 評䟡