API Reference
  • Introduction
  • 💻CLI Commands
    • Create commands
      • create
      • create-package
    • Run commands
      • dev
      • serve
    • Build commands
      • build
    • Extra commands
  • 🍱Packages
    • 💙Core package
      • frontity
    • ⚡Features packages
      • @frontity/wp-source
      • @frontity/tiny-router
      • @frontity/html2react
      • @frontity/head-tags
      • @frontity/yoast
      • @frontity/google-ad-manager
      • @frontity/smart-adserver
      • analytics packages
        • @frontity/google-analytics
        • @frontity/google-tag-manager-analytics
        • @frontity/comscore-analytics
      • @frontity/wp-comments
    • 📚Collections packages
      • @frontity/components
      • @frontity/hooks
        • Infinite Scroll Hooks
        • Intersection Observer Hooks
    • 🎨Themes Packages
      • @frontity/twentytwenty-theme
      • @frontity/mars-theme
  • 🔌WordPress Plugins
    • REST API - Head Tags
    • Frontity Embedded Mode
Powered by GitBook
On this page
  • Table of Contents
  • Install
  • Settings
  • Usage
  • actions.analytics.pageview
  • actions.analytics.event

Was this helpful?

  1. Packages
  2. Features packages
  3. analytics packages

@frontity/google-analytics

Previousanalytics packagesNext@frontity/google-tag-manager-analytics

Last updated 4 years ago

Was this helpful?

Analytics package to use with Frontity

Table of Contents

Install

npm i @frontity/google-analytics

Settings

The for this package is googleAnalytics

Every Google Analytics account has a . To connect the package with a specific account (or accounts) we can set the following properties in the frontity.settings.js:

  • state.googleAnalytics.trackingId: to specify just one tracking ID

  • state.googleAnalytics.trackingIds: to specify a list of tracking ID's

export default {
  packages: [
    {
      name: "@frontity/google-analytics",
      state: {
        googleAnalytics: {
          trackingId: "UA-12345678-9",
        },
      },
    },
  ],
};
export default {
  packages: [
    {
      name: "@frontity/google-analytics",
      state: {
        googleAnalytics: {
          trackingIds: ["UA-34567890-12", "UA-34567890-13"],
        },
      },
    },
  ],
};

Usage

This @frontity/google-analytics package can co-exist with some other analytics packages. Once we have properly installed and configured these analytics packages, their actions will be centralized by the analytics namespace

  • actions.analytics.pageview() will take into account settings in state.analytics.pageviews

  • actions.analytics.event() will take into account settings in state.analytics.events

actions.analytics.pageview

If @frontity/google-analytics is configured and enabled for pageviews in state.analytics.pageviews, every time a link changes (or every time action.router.set(link) is launched) a tracking for that page will be sent to Google Analytics by using internally actions.analytics.pageview()

actions.analytics.event

If @frontity/google-analytics is configured and enabled for events in state.analytics.events, every time you call the method actions.analytics.event() from any of your React components, the proper tracking info will be sent to Google Analytics.

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

Name

Type

Required

Description

name

string

yes

payload

object

yes

Event payload.

The payload object has to have the following format:

Name

Type

Required

Description

category

string

yes

label

string

no

value

number

no

[key]

any

no

These values will be transfomed (by this package) into the proper format before sending the data to Google Analytics

Read more about how to use Analytic packages

The value of this property is mapped to the field of analytics.js events.

The value of this property is mapped to the field of analytics.js events.

The value of this property is mapped to the field of analytics.js events.

The value of this property is mapped to the field of analytics.js events.

Any other property specified in .

🍱
⚡
Google Analytics
namespace
Tracking ID
Install
Settings
Usage
actions.analytics.pageview
actions.analytics.event
eventAction
eventCategory
eventLabel
eventValue
analytics.js field reference
here