Google Analytics

According to analytics.google.com:

"Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications."

You can take advantage of the context and custom events to create a component that dynamically sends GTAG events.

GTAG can only be called after hydrate to ensure it is running in the client.

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="REPLACE_WITH_YOUR_GOOGLE_ANALYTICS_ID" />
      </main>
    )
  }


}

export default Application;

Using a Wrapper

Alternatively, you can install nullstack-google-analytics as a dependency:

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

class Application extends Nullstack {

  // ...

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


}

export default Application;

Next step

⚔ Learn how to use Facebook Pixel with Nullstack.