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;