Google Analytics

De acordo com analytics.google.com:

"O Google Analytics permite que você avalie o ROI de publicidade, bem como rastreie o Flash, vídeo e mídias sociais em sites e aplicativos."

Você pode aproveitar as vantagens do contexto e dos eventos personalizados para criar um componente que envia eventos GTAG dinamicamente.

O GTAG só pode ser chamado depois de hydrate para garantir que está sendo executado no cliente.

import Nullstack from 'nullstack';

class GoogleAnalytics extends Nullstack {

  hydrate({router, page, id}) {
    window.dataLayer = window.dataLayer || [];
    function gtag(){
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', id, {
      page_title: page.title,
      page_path: router.url
    });
    window.addEventListener(page.event, () => {
      gtag('event', 'page_view', {
        page_title: page.title,
        page_path: router.url
      })
    })
  }
  
  render({id}) {
    return (
      <script 
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
      />
    )
  }

}

export default GoogleAnalytics;
import Nullstack from 'nullstack';
import GoogleAnalytics from './GoogleAnalytics';

class Application extends Nullstack {

  // ...

  render() {
    return (
      <main>
        <GoogleAnalytics id="SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS" />
      </main>
    )
  }


}

export default Application;

Usando um Wrapper

Alternativamente, você pode instalar o nullstack-google-analytics como uma dependência:

npm install nullstack-google-analytics
import Nullstack from 'nullstack';
import GoogleAnalytics from 'nullstack-google-analytics';

class Application extends Nullstack {

  // ...

  render() {
    return (
      <main>
        <GoogleAnalytics id="SUBSTITUA_COM_SEU_ID_DO_GOOGLE_ANALYTICS" />
      </main>
    )
  }


}

export default Application;

Próximo Passo

⚔ Aprenda como usar o Facebook Pixel com o Nullstack.