There is a set of official Analytics Frontity packages that you can use to easily add analytics tracking in your project.

These packages are:

• ​@frontity/google-analytics for trackings using Google Analytics​

• ​@frontity/google-tag-manager-analytics for trackings using Google Tag Manager​

• ​@frontity/comscore-analytics for trackings using Comscore​

Table of Contents

• ​Installation​

• ​Settings​

  • ​state.analytics.pageviews​

  • ​state.analytics.events​

• ​How to use​

  • ​actions.analytics.pageview​

  • ​actions.analytics.event​

Installation

Install the analytics package you need for your project:

• ​Installation instructions for @frontity/google-analytics​

• ​Installation instructions for @frontity/google-tag-manager-analytics​

• ​Installation instructions for @frontity/comscore-analytics​

Settings

Each package will require some custom configuration to add things such as tracking IDs for the services behind. In the description of each package you'll find the details of each configuration:

• ​Settings for @frontity/google-analytics​

• ​Settings for @frontity/google-tag-manager-analytics​

• ​Settings for @frontity/comscore-analytics​

Once we have properly installed and configured these analytics packages, their actions will be centralized by the analytics namespace.

In frontity.settings.js we can enable/disable specific analytics packages for pageviews or events through the following properties in the state (under the analytics namespace)

• state.analytics.pageviews

• state.analytics.events

These properties can be set directly in frontity.settings.js from state.analytics...

const settings = {
  name: ...,
  state: {
    frontity: {...},
    analytics: {
      pageviews: {
        googleAnalytics: false,
        comscoreAnalytics: true,
      },
      events: {
        googleAnalytics: true,
        comscoreAnalytics: false,
      }
    },
  },
  packages: [{...}, {...}]
};
​
export default settings;

Or from each Analytics package setting...

const settings = {
  ...,
  packages: [
    {
      name: "@frontity/google-analytics",
      state: {
        analytics: {
          pageviews: { googleAnalytics: true },
          events: { googleAnalytics: true }
        },
      },
    },
    {
      name: "@frontity/comscoreAnalytics",
      state: {
        analytics: {
          pageviews: { comscoreAnalytics: false },
          events: { comscoreAnalytics: false }
        },
      },
    },
    ...
  ],
};
export default settings;

state.analytics.pageviews

Map of Analytics packages namespaces with boolean values.

This object is used by actions.analytics.pageview to know which analytics packages should send the pageview to their respective services.

If you want to disable sending pageviews for a specific analytics package, the respective namespace of that package should be set here to false.

state.analytics.events

Map of Analytics packages namespaces with boolean values.

This object is used by actions.analytics.event to know which analytics packages should send the event to their respective services.

If you want to disable sending events for a specific analytics package, the respective namespace of that package should be set here to false.

How to use

Once everything is properly configured, the following actions under the namespace analytics will be ready to be used

• actions.analytics.pageview

• actions.analytics.event

actions.analytics.pageview

Send a pageview to all active analytics packages.

This action takes all namespaces defined in state.analytics.pageviews that are true and calls the pageview action of each one with the specified Pageview object.

actions.analytics.pageview is automatically launched every time link changes (or every time action.router.set(link) is launched)

actions.analytics.pageview({
  link: "/2016/the-beauties-of-gullfoss",
  title: "The Beauties Of Gullfoss",
});

actions.analytics.event

Send an event to all enabled analytics packages.

This action takes all namespaces defined in state.analytics.events that are true and calls the event action of each one with the specified Event object.

This is the method you can call from any component of your React app to track specific events

Example:

actions.analytics.event({
  name: "click",
  payload: {
    category: "video",
    label: "featured-media",
  },
});

The actions.analytics.event() must receive an event object with the following properties.

This method will send the event tracking information to all the packages enabled in state.analytics.events

Each package will handle the information sent through this actions.analytics.event() in a different way:

• ​How @frontity/google-analytics handle this event object​

• ​How @frontity/google-tag-manager-analytics handle this event object​

• ​How @frontity/comscore-analytics handle this event object​