← Back to Plugins

Google Tag Manager

This plugin adds Google Tag Manager to your Factor app.

Install
Add this package to your Factor enabled project:
npm add @factor/plugin-google-tag-manager
Click to Copy
Overview

Overview

This Factor Plugin adds Google Tag Manager to your app. Use this to add marketing plugins and most importantly, analytics.

Installation

Just add to your application dependencies:

npm add  @factor/plugin-google-tag-manager

Once you've done this Factor will automatically load this plugin. All that is needed is to add your configuration info via settings.

Customization and Settings

Config for this plugin is public only and stored in your factor-settings.js file.

// factor-settings.js
{
  "googleTagManager": {
    "googleTagManagerId": "GTM-XXXXXXX", // Your GTM Container ID
    "developmentMode": true // Load Tags in "development" mode (npm factor dev)
  }
}
  • Development Mode - This adds the tag manager in your local development environment. This is because typically you don't want to render tags in your development environment as it could skew your data.

Using The Tag Manager Plugin

Once you've added your tag manager ID, this plugin will load the tag manager on your Factor app. From that point, most/all customization should happen inside the Google Tag Manager interface.

A Note on Tracking Route Changes

For any plugins that rely on pages to trigger an event, you'll need to add a trigger on "history change" event in the manager. This is because Factor only refreshes pages direct browser loads (for performance).

It is especially important to add this for Google Analytics to appropriately track page views and user journeys through your site.

A screenshot for how analytics should be configured:

GA History Change
Meta
Latest Version
1.8.19
Downloads
165
Updated
Oct 29, 2020
Created
Mar 27, 2020
Tags
google tag manager, google, tag, manager, gtm
Author
Fiction
Repository
View

Have A Factor Plugin or Theme?

Submit Your Extension