next.js 🚀 - जीए स्क्रिप्ट टैग जोड़ना?

चेकआउट <Head>

nodegin 30 अक्तू॰ 2016

👎216 😄2

@robinvdvleuten मैं एक GoogleTagManager घटक बनाने का सुझाव करूंगा ।

dariye 31 अक्तू॰ 2016

जैसा कि लोगों ने उल्लेख किया है कि आप Head टैग या प्रतिक्रिया-अनुकूल समाधान जैसे https://github.com/react-ga/react-ga का उपयोग कर सकते हैं

impronunciable 2 नव॰ 2016

👎1

अगले-js के साथ प्रतिक्रिया-गा काम करने पर कोई सुझाव?

gtramontina 21 नव॰ 2016

👍19

@gtramontina को काम करना चाहिए। अन्यथा मैं react-ga योगदानकर्ताओं में से एक हूं इसलिए मैं इसके साथ मदद कर सकता हूं

impronunciable 22 नव॰ 2016

react-ga आवश्यकता नहीं है। विश्लेषिकी को इंजेक्ट करने के लिए <Head> घटक के साथ Google टैग प्रबंधक का उपयोग करें। अगली बार jj / प्रतिक्रिया में काम करने के लिए 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 13 दिस॰ 2016

👍180 ❤53 🎉17

मैं क्लाइंट साइड पेज दृश्य को ट्रैक करने के लिए एक बेहतर समाधान सुझाऊंगा: ऑटोट्रैक। अधिक जानकारी के लिए https://github.com/MoOx/phenomic/issues/384 देखें।

MoOx 13 दिस॰ 2016

👍1

@impronunciable यह एक उदाहरण के लिए बहुत अच्छा होगा क्योंकि कुछ

@MoOx को लगता है कि प्रतिक्रिया-गा आवश्यक नहीं है, इसके बजाय Google AutoTrack का उपयोग करना चाहिए
लेकिन ऑटोट्रैक ने कोड के साथ एक स्क्रिप्ट टैग बनाने का निर्देश दिया, जो window ऑब्जेक्ट तक पहुंचता है, ताकि सर्वर-साइड न हो
और वैसे भी यदि प्रतिक्रिया-गा जैसे प्रतिक्रिया घटक का उपयोग किया जाता है, तो इसे कहां रखा जाना चाहिए? एक render ? componentWillMount ? getInitialProps ? यह सुपर स्पष्ट नहीं है क्योंकि यह इस तरह का है कि आप प्रतिक्रिया-राउटर का उपयोग करते हैं और सभी पृष्ठों के लिए एक बार कोड लोड करते हैं।

जब पृष्ठ सर्वर-रेंडर किया जाता है और तब किसी अन्य पृष्ठ पर नेविगेट करते समय पृष्ठ ट्रैकिंग को काम करना चाहिए। यह देखना बहुत अच्छा होगा कि पूरी तरह से कैसे एक हेड, एक पेज लेआउट एचओसी, आदि के साथ एक ठेठ अगला ऐप में एकीकृत किया जाना चाहिए।

यह जानकर भी बहुत अच्छा लगेगा कि क्या आपको लगता है कि Next.js + Google Analytics ऑटोट्रैक की तुलना में बेहतर / सरल / कम बोझिल / अधिक अत्याधुनिक संयोजन है ...

sedubois 17 जन॰ 2017

👍13

मैं इसकी जांच कर सकता हूं

Tue पर, 17 जनवरी, 2017, 7:59 AM Sébastien Dubois सूचनाएं @github.com
लिखा था:

@impronunciable https://github.com/impronunciable यह बहुत अच्छा होगा
एक उदाहरण के रूप में कुछ googling के बाद मैं अभी भी उलझन में हूँ some यह कर सकता है
फिर से खोल दिया जाए?
@MoOx https://github.com/MoOx को लगता है कि प्रतिक्रिया-जी नहीं है
आवश्यक, Google AutoTrack का उपयोग करना चाहिए
इसके बजाय https://github.com/googleanalytics/autotrack
लेकिन ऑटोट्राक कोड के साथ एक स्क्रिप्ट टैग बनाने का निर्देश देता है
विंडो ऑब्जेक्ट को एक्सेस करता है, ताकि सर्वर-साइड काम न करे
और वैसे भी अगर प्रतिक्रिया-गा जैसे प्रतिक्रिया घटक का उपयोग करना चाहिए, तो कहां करना चाहिए
इसे रखा जाए? एक रेंडर में? componentWillMount? getInitialProps? यह
सुपर स्पष्ट है क्योंकि यह इस तरह का है कि आप प्रतिक्रिया-राउटर का उपयोग करते हैं और लोड करते हैं
सभी पृष्ठों के लिए एक बार कोड।
पेज ट्रैकिंग सर्वर-रेंडर और जब दोनों काम करना चाहिए
तब जब दूसरे पृष्ठ पर नेविगेट करना हो। यह देखना बहुत अच्छा होगा कि कैसे
पूरी बात एक हेड, एक पेज के साथ एक ठेठ नेक्स्ट ऐप में इंटीग्रेट होनी चाहिए
लेआउट 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 17 जन॰ 2017

बहुत यकीन है कि ऑटोट्रैक पर्याप्त से अधिक है, केवल ग्राहक पक्ष में इंजेक्ट किया जाता है - सर्वर-साइड के बारे में सोचने की आवश्यकता नहीं है।

MoOx 17 जन॰ 2017

एक उदाहरण के लिए https://github.com/MoOx/react-toulouse/commit/c42045d1001ab813c5d7eae5ab2f4f8c08c0025e देखें। यह आगे उपयोग नहीं कर रहा है, लेकिन मुझे लगता है कि इसे अनुकूलित करना आसान होना चाहिए।

MoOx 17 जन॰ 2017

हाँ, हम सर्वर रेंडर को ट्रैक नहीं करना चाहते हैं, क्योंकि यह स्थान जैसी चीजों को बाधित करेगा।

timneutkens 17 जन॰ 2017

नहीं, क्योंकि आप इसे ग्राहक द्वारा नियंत्रित नहीं करेंगे: ध्यान रखें कि ग्राहक द्वारा एक पृष्ठ अनुरोध किया गया है और ग्राहक द्वारा प्रदान किया जाएगा। :)

MoOx 17 जन॰ 2017

ठीक है मुझे एहसास नहीं हुआ कि कोड को सर्वर-साइड नहीं चलाया जाएगा। इसलिए मैंने @MoOx द्वारा अनुशंसित ऑटोट्रैक का उपयोग किया, मुझे लगता है कि यह काम करना चाहिए: https://github.com/relatenow/relate/commit/50dc3f317eb3efa045d5bbe40d1a1ad1116458

अभी तक इसकी पुष्टि नहीं की गई है यदि यह पृष्ठ के विचारों को सही ढंग से गिनता है, तो यह मेरे लिए नया है it it

sedubois 17 जन॰ 2017

आप आसानी से जीए को डीबग करने के लिए "वास्तविक समय" दृश्य का उपयोग कर सकते हैं।

MoOx 17 जन॰ 2017

@मोक्स हाँ, यह अच्छी तरह से है जो मुझे परेशान करता है, जब मैं किसी अन्य टैब में समानांतर में https://relate.now.sh पर जाता हूं तो मुझे रियलटाइम पैनल में कुछ भी दिखाई नहीं देता है (0 सक्रिय उपयोगकर्ता)

sedubois 17 जन॰ 2017

मुझे अभी भी यह नहीं मिल रहा है ... मेरे द्वारा लिखे गए कोड के साथ मुझे कोई डेटा नहीं मिला है।

मेरे द्वारा देखे जाने वाले सभी उदाहरणों में <script href="https://www.google-analytics.com/analytics.js" async /> आवश्यकता लगती है, लेकिन हेड में चीजें क्लाइंट में निष्पादित नहीं होती हैं? (मेरा कंसोल.लॉग ब्राउज़र कंसोल में मुद्रित नहीं होता है ...)

एक उदाहरण अभी भी बहुत सराहना की जाएगी very

sedubois 18 जन॰ 2017

आह, यह प्रतिक्रिया-गा it पर स्विच करके काम कर रहा है

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

screen shot 2017-01-18 at 14 01 28

sedubois 18 जन॰ 2017

तुमने इससे काम कैसे लिया? मैं एक पेजव्यू फंक्शन को कॉल करने की कोशिश कर रहा हूं कंपोनेंटडिमाउंट ।

उत्पादन एप्लिकेशन जीए चेक विफल रहता है।

luandro 7 मार्च 2017

@luandro विवरण याद नहीं है, लेकिन अगर आप मदद करता है तो आप ऊपर दिए गए लिंक पर देख सकते हैं

sedubois 7 मार्च 2017

मैंने किया और कोशिश की। मैंने आपके जैसा ही किया, शीर्ष पर कॉन्फ़िगरएनालिटिक्स को कॉल componentWillMount पर पेजव्यू , लेकिन फिर भी जीए चेक पर नकारात्मक मिलता है।

आपके कोड में ऐसा नहीं लगता है कि आप वास्तव में कहीं भी पेज से जुड़े हैं, क्या आपने?

luandro 7 मार्च 2017

@luandro बस पेजव्यू इवेंट के url को बदलने के लिए ga(‘set’, ‘page’, window.location.pathname); ga(‘send’, ‘pageview’); जोड़ें।

durk0 10 अप्रैल 2017

👍4 ❤1

हो सकता है कि ऐसा करने के लिए एक और 'नेक्स्ट' जेएस तरीका हो लेकिन पेज पर स्क्रिप्ट लिखने में 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 3 मई 2017

👍33 ❤11 🎉4

क्या प्रत्येक पृष्ठ पर स्पष्ट रूप से गा ('भेजें', 'पेजव्यू') को बुलाए बिना व्यक्तिगत पेजव्यू को ट्रैक करना संभव है। अगर हमें पूरी तरह से यह करना है, तो हम इसे कहाँ से लाते हैं कि निश्चित रूप से लोड किया गया है?

क्या पृष्ठदृश्यों को लॉग करने के लिए मार्ग परिवर्तन की घटनाओं में किसी तरह से बाँधना संभव है?

karthikiyengar 17 मई 2017

@karthiyiyengar मैं 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 17 मई 2017

@vinaypuppal हर पृष्ठ घटक के लिए initGA के लिए सामान्य अभ्यास है?

youfoundron 29 मई 2017

@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 31 मई 2017

👍14

@ नहीं आप संभावित उथले रेंडर लापता हो सकता है? वे आपका ऐप केवल संक्रमण करेंगे और आपका लेआउट घटक रीमाउंट नहीं हो सकता है। मुझे यही पकड़ना है।

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 9 जून 2017

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

यूए कोड के साथ मेरे वास्तविक कोड द्वारा प्रतिस्थापित किया गया है, बिल्कुल।

filostrato 9 जून 2017

@filostrato आपने इसे कैसे ठीक किया? मैं इस पर भी अटक रहा हूँ। :)

exogenesys 17 जून 2017

@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 17 जून 2017

👍5

@filostrato ने ऐसा किया। बहुत बहुत धन्यवाद। :)

exogenesys 18 जून 2017

हे लोगों

मैंने अभी अपनी साइट पर जीए के कार्यान्वयन से निपटा है और यही मैं साथ आया हूं।

पहले मैंने @ नोट से समाधान का उपयोग किया जो साफ और सीधे आगे लगता था:

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

  render() {
    …
  }
}

हालाँकि, मैंने देखा:

componentDidMount तब निष्पादित किया गया जब मैंने विभिन्न प्रकार के पृष्ठों के बीच स्विच किया, इसलिए initialize फ़ंक्शन को कई बार कॉल किया गया
componentDidMount _only_ को तब निष्पादित किया गया था जब मैंने विभिन्न प्रकारों के पृष्ठों के बीच स्विच किया था, इसलिए pageview फ़ंक्शन को केवल तब बुलाया गया था => मेरे पास मेरी वेबसाइट पर video पगेटाइप है और मैंने इसमें देखा जीए लाइव देखें कि विभिन्न वीडियो पेजों के बीच स्विच करते समय केवल प्रारंभिक वीडियो पेज को ट्रैक किया गया था

मैंने इन दोनों समस्याओं को दूर करने के लिए एक उच्च क्रम घटक बनाया। पहले एक के लिए मैंने @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 कॉल करने की कोशिश की, जो कि सही तरीका होना चाहिए , तो मुझे एक ReferenceError मिला क्योंकि onRouteChangeComplete undefined । शायद प्रलेखन पुराना है?

osartun 26 जून 2017

👍13 ❤8

यह मेरे लिए अगली .js वेबसाइट में काम करता है। और 'विंडो नॉट डिफाइंड' एरर के आसपास मिला, जिसे मैं रिएक्शन-गा के सामान्य कार्यान्वयन के साथ चला रहा था।

toolgirl 27 जुल॰ 2017

👍3

@osartun समाधान ने मेरे लिए काम किया। धन्यवाद! 👍

florinpop17 14 अग॰ 2017

👍3

@Osartun के कोड के लिए धन्यवाद, मैं Google के नए gtag का उपयोग करके pageview घटनाओं के लिए निम्नलिखित समाधान के साथ आने में सक्षम था (जो _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 / जो भी आपकी परियोजना का नाम है:

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 18 सित॰ 2017

👍14

पार्टी में देर से आने वाले किसी भी व्यक्ति के लिए, @kylewiedman का समाधान काम नहीं करता है, क्योंकि राउटर की घटनाओं को componentDidMount अंदर परिभाषित किया जा रहा है। घटक के बाहर उन्हें परिभाषित करने से समस्या ठीक होती है:

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

trezy 22 सित॰ 2017

👍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 1 अक्तू॰ 2017

👍11 ❤3

चूंकि यह स्पष्ट नहीं है, इसलिए रेपो में उदाहरण देना अच्छा होगा।

nickredmark 1 मार्च 2018

👍11

या एक अगला-गूगल-एनालिटिक्स रिपॉजिटरी-

timneutkens 2 मार्च 2018

👍21

@prichodko इस उदाहरण को एक साथ रखने के लिए बहुत बहुत धन्यवाद !!

guigrpa 4 मई 2018

👍3

आधिकारिक उदाहरण यहां उपलब्ध है: https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics

aequasi 12 जुल॰ 2018

👍22 ❤4

पाया बहुत अच्छा काम, घटक में मुख्य लेआउट फ़ाइल में जोड़ा गयानिगम () और यह सही ढंग से काम करने लगता है। यह अच्छी तरह से प्रलेखित है, कोई हलचल नहीं

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

andylacko 12 नव॰ 2018

@andylacko वास्तव में, मैंने कुछ चीजों को ठीक करने के लिए इसे फोर्क किया था, उदाहरण के लिए HTTPS: https://github.com/Vadorequest/react-gtm

Vadorequest 13 नव॰ 2018

इस मामले में मेरे समाधान को यहाँ जोड़ने से यह बाद में किसी के लिए उपयोगी हो सकता है।

मैंने प्रतिक्रिया-गण का उपयोग किया है लेकिन उसी तर्क को अन्य उपकरण के साथ काम करना चाहिए।

जब भी उपयोगकर्ता किसी नए मार्ग पर क्लिक करता है, तो _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);
  }

जब पृष्ठ को सर्वर में प्रस्तुत किया जाता है, तो getInitialProps में कुछ भी नहीं होगा क्योंकि मैंने GA कोड को typeof(window) === "object" में लिपटा था।

क्लाइंट की तरफ, getInitialProps पहली बार नहीं चलेगा क्योंकि सब कुछ सर्वर प्रदान किया गया है। GA ग्राहक पक्ष पर componentDidMount अंदर सेटअप है।

बाद में मार्ग परिवर्तन (समान मार्ग के लिए भी), ग्राहक पक्ष पर getInitialProps ट्रिगर करेगा और गा घटना ट्रिगर है।

williamli 10 दिस॰ 2018

👍14

इस मामले में मेरे समाधान को यहाँ जोड़ने से यह बाद में किसी के लिए उपयोगी हो सकता है।
मैंने प्रतिक्रिया-गण का उपयोग किया है लेकिन उसी तर्क को अन्य उपकरण के साथ काम करना चाहिए।
जब भी उपयोगकर्ता किसी नए मार्ग पर क्लिक करता है, तो _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);
  }
जब पृष्ठ को सर्वर में प्रस्तुत किया जाता है, तो getInitialProps में कुछ भी नहीं होगा क्योंकि मैंने GA कोड को typeof(window) === "object" में लिपटा था।
क्लाइंट की तरफ, getInitialProps पहली बार नहीं चलेगा क्योंकि सब कुछ सर्वर प्रदान किया गया है। GA ग्राहक पक्ष पर componentDidMount अंदर सेटअप है।
बाद में मार्ग परिवर्तन (समान मार्ग के लिए भी), ग्राहक पक्ष पर getInitialProps ट्रिगर करेगा और गा घटना ट्रिगर है।

हे विल। आपके वेबपैक में ReactGA शामिल है (जैसा कि इसे क्लाइंटसाइड चलाया जाता है) आपके बिल्ड आकार पर महत्वपूर्ण प्रभाव डालता है?

ChrisEdson 28 फ़र॰ 2019

👍1

@ChrisEdson https://github.com/react-ga/react-ga पूरी लाइब्रेरी 161kb का है ।

williamli 28 फ़र॰ 2019

हम्म। ईमानदार होने के लिए यह बहुत बड़ा है!

Thu पर, 28 फरवरी, 2019 को 19:01 पर, विलियम ली नोटिफिकेशन @ithub.com ने लिखा:

@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 1 मार्च 2019

👍1

यह पूरी लाइब्रेरी के लिए GitHub पर सूचीबद्ध संख्या है।
मैं एक बार ऐप में पैक किए गए वास्तविक आकार की जांच कैसे करूं?

मेरे आईफोन से भेजा गया

1 मार्च 2019 को 15:43 पर, क्रिस एडसन नोटिफिकेशन @ithub.com ने लिखा:
हम्म। ईमानदार होने के लिए यह बहुत बड़ा है!
Thu पर, 28 फरवरी, 2019 को 19:01 पर, विलियम ली नोटिफिकेशन @ithub.com ने लिखा:
@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 1 मार्च 2019

तो की गई स्क्रिप्ट 15kb है। वह काफी छोटा है।

मैं अपने वेबपैक का विश्लेषण करने के लिए बंडल करने जा रहा हूं और मैं वापस रिपोर्ट करूंगा कि यह व्यवहार में कितना जोड़ता है।

ChrisEdson 1 मार्च 2019

~ 500kb के कुल बंडल आकार के भीतर, मेरा ReactGA लगभग 27kb जोड़ता है। चीजों की भव्य योजना में बहुत छोटा है।

ChrisEdson 1 मार्च 2019

👍2

इस मामले में मेरे समाधान को यहाँ जोड़ने से यह बाद में किसी के लिए उपयोगी हो सकता है।
मैंने प्रतिक्रिया-गण का उपयोग किया है लेकिन उसी तर्क को अन्य उपकरण के साथ काम करना चाहिए।
जब भी उपयोगकर्ता किसी नए मार्ग पर क्लिक करता है, तो _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);
  }
जब पृष्ठ को सर्वर में प्रस्तुत किया जाता है, तो getInitialProps में कुछ भी नहीं होगा क्योंकि मैंने GA कोड को typeof(window) === "object" में लिपटा था।
क्लाइंट की तरफ, getInitialProps पहली बार नहीं चलेगा क्योंकि सब कुछ सर्वर प्रदान किया गया है। GA ग्राहक पक्ष पर componentDidMount अंदर सेटअप है।
बाद में मार्ग परिवर्तन (समान मार्ग के लिए भी), ग्राहक पक्ष पर getInitialProps ट्रिगर करेगा और गा घटना ट्रिगर है।

यदि आप NextJS 9 का उपयोग कर रहे हैं तो एक समस्या यह है कि यह अक्षम स्वचालित प्रीरेन्डरिंग के साथ है। आश्चर्य होता है कि ReactGA.pageview(ctx.asPath); लगाने के लिए एक बेहतर जगह है, इसे getInitialProps हटाने का अर्थ है कि हम getInitialProps निकाल सकते हैं और स्वत: पूर्वेक्षण को यहाँ उल्लिखित के रूप में ऑप्ट-आउट करने के लिए बाध्य नहीं कर सकते: https :

अपडेट: मुझे Google-एनालिटिक्स उदाहरण (https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics) मिला है और इस बारे में कुछ उधार लिया है: Router.events.on('routeChangeComplete', url => ReactGA.pageview(url)) मुझे यह सुनिश्चित करने के लिए परीक्षण करने की आवश्यकता है कि url सही है लेकिन सही तरीके से दिखता है। मैंने getInitialProps पद्धति को निकाल दिया है और इसे वर्ग घोषणा से ऊपर जोड़ा है।

GodOfGrandeur 16 जुल॰ 2019

❤1 👍1

@GodOfGrandeur यह https://medium.com/@austintoddj/use -google-analytics-with-next-js-423ea2d16a98 _app.js में अपना कोड जोड़ना हर जगह जैसे ट्रिगर करना लगता है और मुझे यह भी पसंद है कि यह सर्वर पर चालू नहीं है (हालांकि यह एक समस्या नहीं है)।

hkirsman 18 जुल॰ 2019

किसी भी तीसरे पक्ष के लिए कोई ज़रूरत नहीं है, अगर आप 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 26 अग॰ 2019

👍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 1 अक्तू॰ 2019

👍15 ❤5 🎉5

@reinink बस यह उल्लेख करना चाहते हैं कि आप useEffect लिए दूसरे प्रस्ताव के रूप में एक खाली सरणी पास करना चाहते हैं ताकि यह प्रारंभिक रेंडर के बाद केवल एक बार फ़ंक्शन चलाए।

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

amorriscode 10 अक्तू॰ 2019

👍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 25 फ़र॰ 2020

🎉4 😕1

मुझे यह मार्गदर्शिका मिली - क्या यह एक अनुशंसित दृष्टिकोण है (प्रतिक्रिया-गा का उपयोग करता है)?

UberVero 4 मार्च 2020

मैं कहता हूँ कि अनुशंसित तरीका इस आधिकारिक उदाहरण का उपयोग करना है:

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

यह पहले से ही यहां पोस्ट किया गया है। कभी-कभी मैं चाहता हूं कि गितुब के मुद्दे स्टैकओवरफ्लो की तरह अधिक हों, कुछ उत्तर स्वीकार किए जाते हैं और हाइलाइट किए जाते हैं, सवाल के ठीक बाद (जब बहुत सारे संदेश और इमोजीज़ पर्याप्त नहीं हैं। एक विकल्प इस पोस्ट को टिप्पणी करने तक सीमित करना है, इसलिए लोग एक नया मुद्दा बनाएंगे। इसके बजाय। और बनाते समय वे एक समान मुद्दा पहले ही बना लेंगे ("समान मुद्दों" सुविधा के लिए धन्यवाद), और इसका उत्तर है (लेकिन फिर भी, इमोजीस वाला उत्तर लंबे इतिहास के बीच में कहीं खो जाता है, इसलिए यह है) जीथब पर जवाब खोजने के लिए बहुत सुविधाजनक नहीं)।

JerryGreen 5 मार्च 2020

👍27 ❤7 🎉5

यह पहले से ही यहां पोस्ट किया गया है। कभी-कभी मैं चाहता हूं कि गितुब के मुद्दे स्टैकओवरफ्लो की तरह अधिक हों, कुछ उत्तर स्वीकार किए जाते हैं और हाइलाइट किए जाते हैं, सवाल के ठीक बाद (जब बहुत सारे संदेश और इमोजीज पर्याप्त नहीं हैं ...)।

गितुब इस रेपो की चर्चा टैब पर इस पर प्रोटोटाइप बना रहा है।

Screenshot 2020-04-08 at 16 59 58

janbaykara 8 अप्रैल 2020

@janbaykara वाह, सच में? हम सभी एक ही तरह से सोचते हैं :) मुझे आशा है कि वे किसी भी तरह से किसी मुद्दे को एक चर्चा में तब्दील करने का एक तरीका पाएंगे, या यह एक ही बात होगी (यदि कार्यक्षमता को मुद्दों में मिला दिया जाएगा, और सभी मौजूदा चर्चाएं मुद्दे बन जाएंगी)। लेकिन प्रतिक्रिया के लिए धन्यवाद!

JerryGreen 9 अप्रैल 2020

@ 3lonious मैंने व्यक्तिगत रूप से Google Analytics को

Next.js के बारे में, https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/compenders/pageLayouts/Head.tsx ( next/Head का उपयोग करके देखें ) next/Head ), यही कारण है कि मैं अपने ऐप्स में स्क्रिप्ट टैग शामिल करता हूं।

NRN https://unlyed.github.io/next-right-now पर एक नज़र डालने में संकोच न

Vadorequest 18 जून 2020

मुझे यकीन नहीं है कि मुझे यह मिल गया है, मुझे उस फाइल में कोई स्क्रिप्ट टैग नहीं दिख रहा है?

3lonious 18 जून 2020

यह भी एक समाधान है जो काम करता है। मैंने इसे बड़े पैमाने पर परीक्षण नहीं किया है इसलिए कृपया इसे स्वयं करें।

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 18 जून 2020

❤5 👍4

@ 3 विलक्षण स्क्रिप्ट टैग और स्टाइल टैग उसी तरह काम करते हैं।
उपरोक्त समाधान भी, अनुभव से काम करता है। (यह है कि मैं कैसे जीए काम करने के लिए इस्तेमाल किया)

Vadorequest 19 जून 2020

ठीक है धन्यवाद दोस्तों im कोशिश करो और तुम पर वापस जाओ

3lonious 19 जून 2020

ठीक है, मुझे लगता है कि मैं इसे काम करने के लिए मिला

3lonious 19 जून 2020

धन्यवाद एंटोन। ठीक है मैं तुम्हारे लिए एक नया है haha

मेरे पास ग्राहक सेवा के लिए एक चैट ऐप है, लेकिन वह स्क्रिप्ट टैग dosnt काम करता है? कोई विचार?

3lonious 19 जून 2020

यह मुझे शरीर में इस दूसरे टैग को जोड़ने के लिए कह रहा है? आप इसके साथ क्या करते हैं?
Screen Shot 2020-06-19 at 6 48 22 AM

3lonious 19 जून 2020

टीबीटी के बारे में कैसे? यदि आप Google विश्लेषिकी जोड़ते हैं तो यह आपके गति स्कोर को धीमा कर देगा

ernaneluis 15 जुल॰ 2020

टीबीटी के बारे में कैसे? यदि आप Google विश्लेषिकी जोड़ते हैं तो यह आपके गति स्कोर को धीमा कर देगा

इसकी वजह है कि सामग्री से पहले स्क्रिप्ट को रखने की उनकी सिफारिश। यदि आप इसे सामग्री के तहत रखते हैं, तो स्कोर नीचे नहीं जाएगा।

मैं व्यक्तिगत रूप से पहले स्क्रिप्ट रखने के वास्तविक लाभ नहीं देखता। यदि पृष्ठ लोड किसी तरह टूट गया था, और HTML किसी तरह पूरी तरह से लोड नहीं हुआ था और इसे निरस्त कर दिया गया था, तो मैं इसे हिट के रूप में नहीं गिन सकता, इसलिए जो भी हो।

JerryGreen 15 जुल॰ 2020

👍2

मैं नेक्स्ट के साथ काम कर रहा हूं। मैं प्रतिक्रिया देने के लिए Google स्थान ऑटो पूर्ण API का उपयोग करने का प्रयास कर रहा हूं। और एपीआई के उन स्क्रिप्ट टैग सम्मिलित करना चाहते हैं? मुझे उन स्क्रिप्ट टैग को कहाँ सम्मिलित करना चाहिए ??

ChaitraK2000 19 अग॰ 2020

_app.js

`` `Js
"रिएक्ट-गा" से रिएक्ट्टा को आयात करें;

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 31 अग॰ 2020

यह उल्लासपूर्ण है। नहीं, वास्तव में यह दुखद है। प्रतिक्रिया के लिए इंतजार नहीं कर सकते, अगले, पूरे पारिस्थितिकी तंत्र मरने के लिए।

jfbrennan 2 सित॰ 2020

👎2

Next.js: जीए स्क्रिप्ट टैग जोड़ना?

सबसे उपयोगी टिप्पणी

सभी 74 टिप्पणियाँ

संबंधित मुद्दों