The `analytics` library

Feature Card

Description

In order to implement different analytics services with Frontity, such as Google Analytics, Google Tag Manager or ComScore, we need a library to support all of them.

User Stories

As a Frontity developer
I want to send pageviews to my analytics service
so that I can track how many people are visiting my web

As a Frontity developer
I want to send events to my analytics service
so that I can track how people behave at my web

As a Frontity developer
I want to send the data to different analytics services with the same action
so that I can use more than one service in an easy way

As a Frontity developer
I want to send specific data to just one of my analytics services
so that I can organize my analytics however I want

I am a bit worried that the current beta of frontity/analytics is so coupled with Google Analytics implementation of events:

type Event = {
  category: string;
  action: string;
  label?: string;
};

I don’t think we should use that event interface.

Most analytics services use this other interface:

type Event = {
  name: string;
  payload: object;
};

For example:

  • Mixpanel:
mixpanel.track("Played song", {"genre": "hip-hop"});
  • Amplitude:
var eventProperties = {
 'color': 'blue',
 'age': 20,
 'key': 'value'
};
amplitude.getInstance().logEvent('EVENT_TYPE', eventProperties);
  • KissMetrics:
/* Records an event "Signed Up" with additional properties
 * (Plan & Amount) plus related values (Pro & 99.95)
 */
_kmq.push(['record', 'Signed Up', {'Plan':'Pro', 'Amount':99.95}]);
  • Google Tag Manager:
 window.dataLayer.push({
   'event': 'registrationComplete',
   'registrationCountry': 'United States',
   'plan': 'Premium'
 });

cc: @SantosGuillamot @David

I totally agree. It seems the standard so I guess the best option will be to follow it. Segment, which connects with most of the Analytics packages we may build, also uses that pattern. Maybe our solution should be based on it.

https://segment.com/docs/connections/sources/catalog/libraries/server/node-js/#track

Oh, checking what Segment does is quite interesting actually.

Do you know how do they map their event interface with the Google Analytics one? That’s the only thing that it’s not clear to me how to do:

// From
{
  event: "name of the event",
  payload: {
    anyProp: "..."
  }
}
// to
{
  action: "...",
  category: "...",
  label: "..."
}

Oh, here it is: https://segment.com/docs/connections/destinations/catalog/google-analytics/#track

{
  "userId": "12345",
  "action": "track",
  "event": "Logged In",
  "properties": {
    "category": "Account",
    "label": "Premium",
    "value": 50
  }
}

It looks like the category, label and value props only work when you explicitly declare them in the payload. I guess that’s ok.

Yes, I think this could be the correct approach. If each library is well documented it shouldn’t be a problem, it’s pretty clear and easy.