API Reference
TutorialDocsCommunityWebsite
Search
⌃K
Links
Comment on page

@frontity/google-tag-manager-analytics

Analytics package to use Google Tag Manager with Frontity

Table of Contents

Install

npm i @frontity/google-tag-manager-analytics

Settings

The namespace for this package is googleTagManagerAnalytics
Every Google Tag Manager account has a Container ID. To connect the package with a specific account (or accounts) we can set the following properties in the frontity.settings.js:
  • state.googleTagManagerAnalytics.containerId: to specify just one container ID
  • state.googleTagManagerAnalytics.containerIds: to specify a list of container ID's
export default {
packages: [
{
name: "@frontity/google-tag-manager-analytics",
state: {
googleTagManagerAnalytics: {
containerId: "GTM-BCDFGHJ",
},
},
},
],
};
export default {
packages: [
{
name: "@frontity/google-tag-manager-analytics",
state: {
googleTagManagerAnalytics: {
containerIds: ["GTM-BCDFGHJ", "GTM-HJSFDUF"],
},
},
},
],
};

Usage

This @frontity/google-tag-manager-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
Read more here about how to use Analytic packages

actions.analytics.pageview

If @frontity/google-tag-manager-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 Tag Manager.

Sending pageviews to Google Analytics via Google Tag Manager

In order to send pageviews to Google Analytics through Google Tag Manager in a Frontity project you have to create a Trigger listening to a custom event named pageview, instead of the default pageview (the default Event Type pageview, doesn't work properly in Isomorphic Apps). This custom event is automatically send by @frontity/google-tag-manager-analytics package
Trigger
Tag
In the Feature Discussion of this package you have the format sent internally just in case you need it for your own customizations​

actions.analytics.event

If @frontity/google-tag-manager-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 Tag Manager.
The actions.analytics.event() must receive an event object with the following properties.
Name
Type
Required
Description
name
string
yes
The value of this property is mapped to the event field of the object sent to GTM
payload
object
yes
Event payload.
You can add any info you want in the payload object.
These values will be transfomed (by this package) into the proper format before sending the data to Google Tag Manager
Previous
@frontity/google-analytics
Next
@frontity/comscore-analytics
Last modified 2yr ago