next.js 🚀 - Menambahkan tag script GA?

checkout <Head>

nodegin pada 30 Okt 2016

👎216 😄2

@robinvdvleuten Saya sarankan membuat komponen GoogleTagManager dan memasukkannya ke dalam Head atau tepat setelahnya tergantung pada pilihan implementasi Anda.

dariye pada 31 Okt 2016

seperti yang disebutkan orang, Anda dapat menggunakan tag Head atau solusi ramah-reaksi seperti https://github.com/react-ga/react-ga

impronunciable pada 2 Nov 2016

👎1

Adakah tips untuk mendapatkan react-ga bekerja dengan next.js?

gtramontina pada 21 Nov 2016

👍19

@gtramontina seharusnya bekerja. Jika tidak, saya adalah salah satu kontributor react-ga sehingga saya dapat membantu

impronunciable pada 22 Nov 2016

Tidak perlu react-ga . Gunakan pengelola tag google dengan komponen <Head> untuk memasukkan analitik. Ada beberapa perubahan kecil pada kode pengelola tag google yang diperlukan untuk membuatnya bekerja di nextjs / react:

<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 pada 13 Des 2016

👍180 ❤53 🎉17

Saya akan merekomendasikan solusi yang lebih baik untuk melacak tampilan halaman sisi klien: autotrack. Lihat https://github.com/MoOx/phenomic/issues/384 untuk informasi lebih lanjut.

MoOx pada 13 Des 2016

👍1

@impronunciable akan sangat bagus untuk memiliki contoh karena setelah googling saya masih bingung 😃 Bisakah ini dibuka kembali?

@MoOx sepertinya menyiratkan bahwa react-ga tidak diperlukan, sebaiknya gunakan Google AutoTrack sebagai gantinya
tetapi Autotrack menginstruksikan untuk membuat tag skrip dengan kode yang mengakses objek window , sehingga tidak berfungsi di sisi server
dan lagi pula jika menggunakan komponen react seperti react-ga, harus diletakkan dimana? Dalam render ? componentWillMount ? getInitialProps ? Ini tidak terlalu jelas karena itu mengandaikan bahwa Anda menggunakan react-router dan memuat kode satu kali untuk semua halaman.

Pelacakan halaman harus berfungsi baik saat halaman dirender server dan saat menavigasi ke halaman lain. Akan sangat bagus untuk melihat bagaimana semuanya harus terintegrasi dalam aplikasi Next yang khas dengan Head, tata letak halaman HOC, dll.

Akan sangat menyenangkan untuk mengetahui apakah menurut Anda ada kombinasi yang lebih baik / lebih sederhana / tidak rumit / lebih canggih daripada Next.js + Google Analytics Autotrack ...

sedubois pada 17 Jan 2017

👍13

Saya bisa menyelidiki ini

Pada Sel, 17 Jan 2017, 7:59 Sébastien Dubois [email protected]
menulis:

@impronunciable https://github.com/impronunciable akan sangat menyenangkan
punya contoh karena setelah googling saya masih bingung 😃 Bisakah ini
dibuka kembali?
@MoOx https://github.com/MoOx sepertinya menyiratkan bahwa react-ga tidak
perlu, harus menggunakan Google AutoTrack
https://github.com/googleanalytics/autotrack sebagai gantinya
tetapi Autotrack menginstruksikan untuk membuat tag script dengan kode yang
mengakses objek jendela, sehingga tidak berfungsi di sisi server
dan bagaimanapun juga jika menggunakan komponen react seperti react-ga, mana harus
itu diletakkan? Dalam render? componentWillMount? getInitialProps? Ini bukan
super jelas karena Anda menganggap Anda menggunakan react-router dan memuat file
kode satu kali untuk semua halaman.
Pelacakan halaman harus berfungsi baik saat halaman dirender server dan
lalu saat menavigasi ke halaman lain. Akan sangat menyenangkan untuk melihat caranya
semuanya harus terintegrasi dalam aplikasi Next khas dengan Head, halaman
tata letak HOC, dll.
Akan sangat bagus untuk mengetahui jika menurut Anda ada yang lebih baik / sederhana / kurang
kombinasi rumit / lebih mutakhir daripada Next.js + Google
Lacak Otomatis Analytics ...
-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/zeit/next.js/issues/160#issuecomment-273108099 , atau bisukan
utasnya
https://github.com/notifications/unsubscribe-auth/AAKHp9-2bfLXj2hMGlNlkqUSRqEL7R2Cks5rTJ8kgaJpZM4KkXxa
.

impronunciable pada 17 Jan 2017

Cukup yakin autotrack lebih dari cukup, hanya disuntikkan di sisi klien - tidak perlu memikirkan sisi server.

MoOx pada 17 Jan 2017

Lihat https://github.com/MoOx/react-toulouse/commit/c42045d1001ab813c5d7eae5ab2f4f8c08c0025e untuk mengetahui contohnya. Ini tidak menggunakan next, tapi saya rasa itu harus mudah beradaptasi.

MoOx pada 17 Jan 2017

Ya kami tidak ingin melacak render server, Karena itu Akan mengaburkan hal-hal seperti lokasi.

timneutkens pada 17 Jan 2017

Tidak, Anda tidak melakukannya karena itu akan ditangani oleh klien: perlu diingat bahwa halaman diminta oleh klien dan akan ditampilkan di browser klien :)

MoOx pada 17 Jan 2017

Oke, saya tidak menyadari bahwa kode itu tidak boleh dijalankan di sisi server. Jadi saya menggunakan autotrack seperti yang direkomendasikan oleh @MoOx , saya pikir ini seharusnya berfungsi: https://github.com/relatenow/relate/commit/50dc3f317eb3efa045d5bbe40d1a1a1ad1116458

Hanya belum mengonfirmasi apakah itu menghitung tampilan halaman dengan benar, ini baru bagi saya 😬 😄

sedubois pada 17 Jan 2017

Anda dapat menggunakan tampilan "waktu nyata" untuk men-debug GA dengan mudah.

MoOx pada 17 Jan 2017

@MoOx ya itu yang mengganggu saya, saya tidak melihat apa pun di panel waktu nyata ketika saya mengunjungi https://relate.now.sh secara paralel di tab lain (0 pengguna aktif)

sedubois pada 17 Jan 2017

Saya masih belum mendapatkan ini ... Saya tidak mendapatkan data apa pun dengan kode yang saya tulis.

Semua contoh yang saya lihat tampaknya membutuhkan <script href="https://www.google-analytics.com/analytics.js" async /> tetapi hal-hal di Head tampaknya tidak dijalankan di klien? (console.log saya tidak dicetak di konsol browser ...)

Contoh akan sangat dihargai 🙂

sedubois pada 18 Jan 2017

Ah, berhasil dengan beralih ke react-ga 😄

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

screen shot 2017-01-18 at 14 01 28

sedubois pada 18 Jan 2017

Bagaimana Anda membuatnya bekerja? Saya telah mencoba memanggil fungsi tampilan halaman di componentDidMount .

Pemeriksaan GA aplikasi produksi gagal.

luandro pada 7 Mar 2017

@luandro tidak ingat detailnya, tetapi Anda dapat melihat komit yang saya

sedubois pada 7 Mar 2017

Saya melakukannya dan mencobanya. Saya melakukan hal yang sama seperti Anda, memanggil configureAnalytics di atas, dan tampilan halaman di componentWillMount , tetapi masih mendapatkan negatif pada Pemeriksaan GA .

Dalam kode Anda, tampaknya Anda tidak benar-benar menghubungkan halaman ke mana pun, bukan?

luandro pada 7 Mar 2017

@luandro Cukup tambahkan ga(‘set’, ‘page’, window.location.pathname); ga(‘send’, ‘pageview’); untuk mengubah url acara tayangan laman.

durk0 pada 10 Apr 2017

👍4 ❤1

Mungkin ada lebih banyak cara 'next.js' untuk melakukan ini tetapi WRT menjalankan skrip di halaman saya menemukan bahwa jika saya membuat komponen Script seperti ini:

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

Kemudian saya bisa melakukan ini yang berhasil untuk saya:

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

Peringatannya adalah Anda harus menyertakan semuanya dalam sebuah fungsi.

ryardley pada 3 Mei 2017

👍33 ❤11 🎉4

Apakah mungkin untuk melacak tayangan laman individu tanpa secara eksplisit memanggil ga ('kirim', 'tayangan laman') di setiap laman. Jika kita benar-benar harus melakukannya, dari mana kita memintanya dari kepastian bahwa ga telah dimuat?

Apakah mungkin untuk menghubungkan peristiwa perubahan rute dengan cara tertentu untuk mencatat tampilan halaman?

karthikiyengar pada 17 Mei 2017

@karthikiyengar Saya menggunakan react-ga seperti yang disarankan oleh orang lain di atas dan mencatat tampilan halaman pada componentDidMount dari setiap halaman.

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 pada 17 Mei 2017

@vinaypuppal apakah praktik umum untuk initGA untuk setiap komponen halaman?

youfoundron pada 29 Mei 2017

@rongierlach Saya menggunakan komponen Layout yang memanggil metode initialize dan pageview pada ReactGA dalam componentDidMount() .

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

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

Ini adalah cara terbersih yang pernah saya lakukan seolah-olah halaman tersebut dirender oleh server, ia perlu diinisialisasi. Saya yakin ada hook yang bisa melewati inisialisasi jika klien itu dirender.

notrab pada 31 Mei 2017

👍14

@ Notrab Tidak bisakah Anda melewatkan render dangkal? Mereka aplikasi Anda hanya akan bertransisi dan komponen tata letak Anda mungkin tidak dipasang ulang. Inilah yang harus saya tangkap.

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 pada 9 Jun 2017

👍6

Mencoba membuatnya berfungsi, tetapi masih tidak ada tanggapan dari Google Analytics. Ini adalah kode saya di 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

Dan halaman indeks saya:

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

dengan kode UA diganti dengan kode saya yang sebenarnya, tentu saja.

filostrato pada 9 Jun 2017

@filostrato Bagaimana Anda memperbaikinya? Saya juga terjebak dalam hal itu. :)

exogenesys pada 17 Jun 2017

@exogenesys Akhirnya meletakkan ini di 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

dan mengubah Layout.js untuk memperpanjang 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>
    )
  }
}

Tidak menemukan cara untuk membuatnya bekerja pada komponen yang menggunakan getInitialProps , tetapi karena Layout.js tidak bekerja dengan baik; tidak yakin apa yang harus saya lakukan jika saya ingin statistik yang lebih rinci, tetapi saya akan menyeberangi jembatan itu ketika saya sampai di sana.

filostrato pada 17 Jun 2017

👍5

@ilostrato Itu berhasil. Terima kasih banyak. :)

exogenesys pada 18 Jun 2017

Hai teman-teman

Saya baru saja menangani penerapan GA di situs saya juga dan inilah yang saya dapatkan.

Pertama saya menggunakan solusi dari @notrab yang tampak bersih dan lurus ke depan:

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

  render() {
    …
  }
}

Namun, saya perhatikan:

componentDidMount dieksekusi ketika saya beralih di antara halaman-halaman dengan tipe yang berbeda, sehingga fungsi initialize dipanggil beberapa kali
componentDidMount _only_ dieksekusi ketika saya beralih di antara halaman-halaman dari jenis yang berbeda, sehingga fungsi pageview baru dipanggil => Saya memiliki video pagetype di situs web saya dan saya melihatnya di GA Live view bahwa saat beralih di antara halaman video yang berbeda, hanya halaman video awal yang dilacak

Saya membuat komponen tingkat tinggi untuk mengatasi kedua masalah ini. Untuk yang pertama saya menggunakan solusi @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} />
      );
    }
  }
);

Dan di komponen <Layout> / <PageWrapper> / <PageScaffold> atau apa pun namanya:

import GaWrapper from './ga-wrapper';

const PageScaffold = () => (…);

export default GaWrapper(PageScaffold);

Mungkin itu membantu siapa saja.

Saya tidak suka panggilan Router.router.events.… , karena ini bukan bagian dari API yang didokumentasikan. Namun, ketika saya mencoba menelepon Router.onRouteChangeComplete yang seharusnya menjadi cara yang benar , saya mendapat ReferenceError karena onRouteChangeComplete adalah undefined . Mungkin dokumentasinya sudah ketinggalan zaman?

osartun pada 26 Jun 2017

👍13 ❤8

Ini telah berhasil untuk saya di situs web next.js. Dan mengatasi kesalahan 'jendela tidak ditentukan' yang saya temui dengan penerapan biasa react-ga.

toolgirl pada 27 Jul 2017

👍3

Solusi @osartun berhasil untuk saya. Terima kasih! 👍

florinpop17 pada 14 Agu 2017

👍3

Berkat kode @osartun , saya dapat menemukan solusi berikut untuk mengaktifkan peristiwa pageview menggunakan gtag (yang menggantikan skrip _universal analytics_):

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 / apapun nama proyek Anda:

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 pada 18 Sep 2017

👍14

Bagi siapa pun yang datang terlambat ke pesta, alasan solusi @kylewiedman tidak berfungsi adalah karena peristiwa Router sedang didefinisikan di dalam componentDidMount . Mendefinisikan mereka di luar komponen tampaknya memperbaiki masalah:

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

trezy pada 22 Sep 2017

👍9 🎉2 ❤1

@trezy saat menggunakan gtag , sepertinya tidak perlu import ReactGA from 'react-ga' .

Saya menggunakan contoh <script dangerouslySetInnerHtml={...} /> dan baru saja menambahkan satu baris ini ke dalam injeksi:

window.gaTrackingId = '${gaTrackingId}';

Setelah itu, trik ringan ini mulai berhasil:

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 cukup besar tidak lagi diambil, tetapi semua halaman masih terlacak!

kachkaev pada 1 Okt 2017

👍11 ❤3

Karena ini tidak jelas, alangkah baiknya untuk memiliki contoh di repo.

nickredmark pada 1 Mar 2018

👍11

Atau repositori-google-analytics 🕵️

timneutkens pada 2 Mar 2018

👍21

@prichodko Terima kasih banyak telah mengumpulkan contoh ini !!

guigrpa pada 4 Mei 2018

👍3

Contoh resmi tersedia di sini: https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics

aequasi pada 12 Jul 2018

👍22 ❤4

menemukan lib cukup bagus, ditambahkan ke file tata letak utama di componentDidMount () dan tampaknya berfungsi dengan benar. Itu didokumentasikan dengan baik, tidak ada keramaian

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

andylacko pada 12 Nov 2018

@andylacko Memang, saya telah bercabang untuk memperbaiki beberapa hal, seperti HTTPS misalnya: https://github.com/Vadorequest/react-gtm

Vadorequest pada 13 Nov 2018

Hanya menambahkan solusi saya untuk ini di sini seandainya itu mungkin berguna untuk seseorang di kemudian hari.

Saya menggunakan react-ga tetapi logika yang sama harus bekerja dengan alat ga lain.

_app.js getInitialProps dipicu di sisi klien setiap kali pengguna mengklik pada rute baru. (Pertama kali akan berjalan di sisi server).

componentDidMount dari _app.js dijalankan hanya di sisi klien.

Jadi di _app.js saya, saya menambahkan beberapa baris kode berikut


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

Ketika halaman dirender di server, tidak ada yang akan terjadi di getInitialProps saat saya membungkus kode GA di typeof(window) === "object" .

Di sisi klien, getInitialProps tidak akan berjalan untuk pertama kalinya karena semuanya dirender server. GA disiapkan di dalam componentDidMount di sisi klien.

Perubahan rute berikutnya (bahkan untuk rute yang sama), akan memicu getInitialProps di sisi klien dan peristiwa ga dipicu.

williamli pada 10 Des 2018

👍14

Hanya menambahkan solusi saya untuk ini di sini seandainya itu mungkin berguna untuk seseorang di kemudian hari.
Saya menggunakan react-ga tetapi logika yang sama harus bekerja dengan alat ga lain.
_app.js getInitialProps dipicu di sisi klien setiap kali pengguna mengklik pada rute baru. (Pertama kali akan berjalan di sisi server).
componentDidMount dari _app.js dijalankan hanya di sisi klien.
Jadi di _app.js saya, saya menambahkan beberapa baris kode berikut
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);
  }
Ketika halaman dirender di server, tidak ada yang akan terjadi di getInitialProps saat saya membungkus kode GA di typeof(window) === "object" .
Di sisi klien, getInitialProps tidak akan berjalan untuk pertama kalinya karena semuanya dirender server. GA disiapkan di dalam componentDidMount di sisi klien.
Perubahan rute berikutnya (bahkan untuk rute yang sama), akan memicu getInitialProps di sisi klien dan peristiwa ga dipicu.

Hei Will. Apakah menyertakan ReactGA di webpack Anda (karena dijalankan di sisi klien) memiliki efek signifikan pada ukuran build Anda?

ChrisEdson pada 28 Feb 2019

👍1

@ChrisEdson https://github.com/react-ga/react-ga seluruh perpustakaan di-zip 161kb.

williamli pada 28 Feb 2019

Hmm. Sejujurnya, itu benar-benar luar biasa!

Pada Kamis, 28 Feb 2019 pukul 19:01, William Li [email protected] menulis:

@ChrisEdson https://gub.com/ChrisEdson
https://github.com/react-ga/react-ga seluruh perpustakaan di-zip 161kb.
-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/zeit/next.js/issues/160#issuecomment-468395136 , atau nonaktifkan
utasnya
https://github.com/notifications/unsubscribe-auth/AC5okwth_o_BLLPeqIcSBmhKineAhYfgks5vSCeUgaJpZM4KkXxa
.

ChrisEdson pada 1 Mar 2019

👍1

itulah nomor yang terdaftar di GitHub untuk seluruh perpustakaan.
Bagaimana cara memeriksa ukuran sebenarnya setelah dikemas dalam aplikasi?

dikirim dari iPhone saya

Pada 1 Mar 2019, pada 15:43, Chris Edson [email protected] menulis:
Hmm. Sejujurnya, itu benar-benar luar biasa!
Pada Kamis, 28 Feb 2019 pukul 19:01, William Li [email protected] menulis:
@ChrisEdson https://gub.com/ChrisEdson
https://github.com/react-ga/react-ga seluruh perpustakaan di-zip 161kb.
-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/zeit/next.js/issues/160#issuecomment-468395136 , atau nonaktifkan
utasnya
https://github.com/notifications/unsubscribe-auth/AC5okwth_o_BLLPeqIcSBmhKineAhYfgks5vSCeUgaJpZM4KkXxa
.
-
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub, atau nonaktifkan utasnya.

williamli pada 1 Mar 2019

Jadi skrip yang diperkecil adalah 15kb. Itu cukup kecil.

Saya akan menggabungkan analisis webpack saya dan saya akan melaporkan kembali berapa banyak yang ditambahkan dalam praktiknya.

ChrisEdson pada 1 Mar 2019

Dalam total ukuran bundel ~ 500kb, ReactGA saya menambahkan sekitar 27kb. Sangat kecil dalam skema besar.

ChrisEdson pada 1 Mar 2019

👍2

Hanya menambahkan solusi saya untuk ini di sini seandainya itu mungkin berguna untuk seseorang di kemudian hari.
Saya menggunakan react-ga tetapi logika yang sama harus bekerja dengan alat ga lain.
_app.js getInitialProps dipicu di sisi klien setiap kali pengguna mengklik pada rute baru. (Pertama kali akan berjalan di sisi server).
componentDidMount dari _app.js dijalankan hanya di sisi klien.
Jadi di _app.js saya, saya menambahkan beberapa baris kode berikut
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);
  }
Ketika halaman dirender di server, tidak ada yang akan terjadi di getInitialProps saat saya membungkus kode GA di typeof(window) === "object" .
Di sisi klien, getInitialProps tidak akan berjalan untuk pertama kalinya karena semuanya dirender server. GA disiapkan di dalam componentDidMount di sisi klien.
Perubahan rute berikutnya (bahkan untuk rute yang sama), akan memicu getInitialProps di sisi klien dan peristiwa ga dipicu.

Masalah yang muncul jika Anda menggunakan NextJS 9 adalah dengan menonaktifkan Prapenguraian Otomatis. Ingin tahu apakah ada tempat yang lebih baik untuk meletakkan ReactGA.pageview(ctx.asPath); , menghapusnya dari getInitialProps berarti kita dapat menghapus getInitialProps dan tidak memaksa Prapenguraian Otomatis untuk menyisih seperti yang diuraikan di sini: https : //err.sh/next.js/opt-out-automatic-prerendering.

Pembaruan: Saya menemukan contoh with-google-analytics (https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics) dan meminjam sedikit tentang: Router.events.on('routeChangeComplete', url => ReactGA.pageview(url)) Saya perlu menguji ini untuk memastikan url benar tetapi terlihat seperti cara yang benar. Saya telah menghapus metode getInitialProps dan menambahkan ini di atas deklarasi kelas.

GodOfGrandeur pada 16 Jul 2019

❤1 👍1

@GodOfGrandeur Kedengarannya https://medium.com/@austintoddj/using -google-analytics-with-next-js-423ea2d16a98 Menambahkan kode Anda di _app.js tampaknya memicu di mana saja seperti yang diperlukan dan saya juga suka itu tidak dipicu di server (tidak akan mengalami masalah).

hkirsman pada 18 Jul 2019

Tidak perlu pihak ketiga mana pun, Jika Anda menggunakan gtag, gunakan kode berikut yang saya buat: -

<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 pada 26 Agu 2019

👍23 ❤7 🎉4

Pilihan lainnya adalah menggunakan useEffect() . Saya telah melakukan ini dalam file 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,
    })
  }
})

Dan di <Head> :

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

reinink pada 1 Okt 2019

👍15 ❤5 🎉5

@reinink Hanya ingin menyebutkan bahwa Anda mungkin ingin meneruskan array kosong sebagai prop kedua ke useEffect sehingga hanya menjalankan fungsi satu kali setelah render awal.

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

amorriscode pada 10 Okt 2019

👍8

Memperluas solusi @reinink s, berikut adalah HOC yang berfungsi yang saya gunakan untuk membungkus komponen / template tata letak saya.

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

Ini tidak diuji secara ekstensif tetapi berfungsi dan menganggap diri saya sebagai pengunjung waktu nyata yang berjalan secara lokal. :)

antonmyrberg pada 25 Feb 2020

🎉4 😕1

Saya menemukan panduan ini - apakah ini pendekatan yang direkomendasikan (menggunakan react-ga)?

UberVero pada 4 Mar 2020

Saya akan mengatakan cara yang disarankan adalah dengan menggunakan contoh resmi ini:

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

Ini sudah diposting di sini. Kadang-kadang saya ingin masalah github menjadi lebih seperti stackoverflow, memiliki beberapa jawaban yang diterima dan disorot, tepat setelah pertanyaan (ketika ada terlalu banyak pesan dan emoji tidak cukup. Salah satu pilihan adalah membatasi mengomentari posting ini, sehingga orang akan membuat masalah baru sebagai gantinya. Dan saat membuat mereka akan menemukan masalah serupa telah dibuat (berkat fitur "masalah serupa"), dan ada jawabannya (tapi tetap saja, jawaban dengan emoji hilang di suatu tempat di tengah sejarah yang panjang, jadi ini sangat tidak nyaman untuk menemukan jawaban di github).

JerryGreen pada 5 Mar 2020

👍27 ❤7 🎉5

Ini sudah diposting di sini. Terkadang saya ingin masalah github lebih seperti stackoverflow, memiliki beberapa jawaban yang diterima dan disorot, tepat setelah pertanyaan (ketika ada terlalu banyak pesan dan emoji tidak cukup ....

Github membuat prototipe ini di tab Diskusi repo ini.

Screenshot 2020-04-08 at 16 59 58

janbaykara pada 8 Apr 2020

@janbaykara wow benarkah? Kita semua berpikir dengan cara yang sama :) Saya berharap mereka akan menemukan cara untuk menerjemahkan suatu masalah menjadi diskusi, atau itu akan menjadi hal yang sama (jika fungsionalitas akan digabungkan ke masalah, dan semua diskusi yang ada akan menjadi masalah). Tapi terima kasih atas tanggapannya!

JerryGreen pada 9 Apr 2020

@ 3lonious Saya pribadi telah berfungsi dengan baik pada SPA secara umum. (pengalaman yang sangat buruk, terutama dengan SSR + CSR dan peristiwa ganda yang sulit dilacak)

Mengenai Next.js, lihat https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/components/pageLayouts/Head.tsx (menggunakan next/Head ), begitulah cara saya menyertakan tag skrip di aplikasi saya.

Jangan ragu untuk melihat NRN https://unlyed.github.io/next-right-now , ini dimaksudkan untuk menjadi contoh yang baik tentang "bagaimana melakukan X" dengan Next.js dan akan menghemat banyak sakit kepala.

Vadorequest pada 18 Jun 2020

im tidak yakin saya mendapatkannya, saya tidak melihat tag script di file itu?

3lonious pada 18 Jun 2020

Ini juga merupakan solusi yang berhasil. Saya belum mengujinya secara ekstensif jadi tolong lakukan itu sendiri.

Di pages/_document.js , tambahkan ini ke <Head> . Lihat dokumen tentang cara menimpa file dokumen .

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

Ini melaporkan lalu lintas ke akun GA saya setidaknya.

antonmyrberg pada 18 Jun 2020

❤5 👍4

@ 3lonious Tag skrip dan tag gaya bekerja dengan cara yang sama.
Solusi di atas juga berfungsi, dari pengalaman. (begitulah cara saya dulu membuat GA berfungsi)

Vadorequest pada 19 Jun 2020

ok terima kasih teman-teman. Saya akan mencoba dan kembali kepada Anda

3lonious pada 19 Jun 2020

ok saya pikir saya mendapatkannya untuk bekerja

3lonious pada 19 Jun 2020

terima kasih anton. ok saya punya yang baru untuk Anda haha

Saya memiliki aplikasi obrolan yang saya gunakan untuk layanan pelanggan tetapi tag skrip itu juga tidak berfungsi? ada ide?

3lonious pada 19 Jun 2020

itu menyuruh saya untuk menambahkan tag kedua ini ke dalam tubuh? apa yang kamu lakukan dengan itu?
Screen Shot 2020-06-19 at 6 48 22 AM

3lonious pada 19 Jun 2020

Bagaimana dengan TBT? Jika Anda menambahkan google analytics, itu akan memperlambat skor kecepatan Anda

ernaneluis pada 15 Jul 2020

Bagaimana dengan TBT? Jika Anda menambahkan google analytics, itu akan memperlambat skor kecepatan Anda

Itu karena rekomendasi mereka untuk menempatkan skrip sebelum konten. Jika Anda meletakkannya di bawah konten, skor tidak akan turun.

Saya pribadi tidak melihat manfaat nyata dari menempatkan skrip terlebih dahulu. Jika pemuatan halaman rusak, dan HTML tidak dimuat sepenuhnya dan dibatalkan, saya mungkin tidak akan menghitungnya sebagai hit, jadi terserah.

JerryGreen pada 15 Jul 2020

👍2

Saya sedang bekerja dengan nextjs. Saya mencoba untuk menggunakan API Google Place Auto Complete React. Dan ingin memasukkan tag skrip API tersebut? Di mana saya harus memasukkan tag skrip tersebut ??

ChaitraK2000 pada 19 Agu 2020

_app.js

`` js
impor ReactGA dari "react-ga";

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 pada 31 Agu 2020

Ini sangat lucu. Tidak, sebenarnya ini menyedihkan. Tidak sabar menunggu React, Selanjutnya, seluruh ekosistem akan mati.

jfbrennan pada 2 Sep 2020

👎2

Next.js: Menambahkan tag script GA?

Komentar yang paling membantu

Semua 74 komentar

Masalah terkait