quave:analytics

v1.0.1Published 3 years ago

quave:analytics

quave:analytics is a Meteor package that allows you to send your page views and more to Google Analytics

Why

Every application needs to have some analytics data sent somewhere.

We use Google Analytics via a React Hook that can be used in every React app.

We believe we are not reinventing the wheel in this package but what we are doing is like putting together the wheels in the vehicle :).

Installation

meteor add quave:analytics
meteor add server-render

Usage

You need to configure this package using your settings.

You need to set

  • googleAnalyticsTrackingId: define which property (sub-level of account) of Google Analytics you want to assign.
{
  "public": {
    "packages": {
      "quave:analytics": {
        "googleAnalyticsTrackingId": "UA-39171111-11"
      }
    }
  }
}

Now you need to set up your server to return the tracking ID in your initial HTML. We do this using sink object from Meteor server-render package

On server you can use addGoogleAnalyticsScript

1import { onPageLoad } from 'meteor/server-render';
2
3import { addGoogleAnalyticsScript } from 'meteor/quave:analytics';
4
5onPageLoad(sink => {
6  addGoogleAnalyticsScript(sink);
7});

On client you can add the tags using initializeGoogleAnalytics

1import { initializeGoogleAnalytics } from 'meteor/quave:analytics';
2
3Meteor.startup(() => {
4  initializeGoogleAnalytics();
5});

And send the page views using useGoogleAnalyticsPageView React hook

1import { useGoogleAnalyticsPageView } from 'meteor/quave:analytics';
2
3const Routes = () => {
4  useGoogleAnalyticsPageView();
5}

Debugging

Add debug: true to package settings to see page view logs in the client.

License

MIT