Google Tag

1 Introduction

With the Google Tag module, you can add tags from various Google products and services like Google Ads, Campaign Manager, and Google Analytics (including version 4) in your Mendix application.

This module uses Google Tag (gtag.js) and provides an easily configurable widget that can be placed on the pages or in a layout of your Mendix app. The module also provides a JavaScript action that uses advanced features of gtag.js and can send custom tracking events from within your nanoflows.

1.2 Features

• Easy event tracking with Google using gtag.js
• Versatile widget and JavaScript action for user activity tracking
• Two Widget modes for users of all levels: Basic and Advanced
• Simple page visit tracking with single-parameter configuration in Basic mode
• Highly customizable tracking events in Advanced mode

1.3 Limitations

In Basic mode, the Google Tag widget sends a pre-configured page_view event as suggested by Google. If this does not meet your needs, please use the Advanced mode of the widget.

1.4 Compatibility

The module is compatible with Studio Pro 9.18 and above.

2 Google Tag Widget

2.1 Basic Mode

When the Widget mode is set to Basic, the widget only sends page-tracking events, which covers the majority of use cases. In this mode, only the Tag ID property needs to be filled in. Additionally, you can fill in the Parameters if you want to include specific information along with the page view events. For more information, see the Parameters section below.

Typically, the Google Tag widget in Basic mode is placed in the layout of your app. The widget automatically tracks when the end-user switches pages and sends page view events accordingly.

2.2 Advanced Mode

Switching the Widget mode to Advanced gives you full control over the interaction with gtag.js. When using this mode, it is advised to have a basic understanding of gtag.js.

2.2.1 Config Command

When the Command setting is set to Config, the widget issues the config command to gtag.js. This command requires Tag ID and accepts additional parameters configured via the Parameters property.

Typically, the Google Tag widget in Advanced mode with the Command setting set to Config is placed in a layout of your application. It is typically combined with Google Tag widgets in Advanced mode with the Command setting set to Event as well as with Google Tag Command JavaScript actions with the Command parameter set to Event.

2.2.2 Event Command

When Command is set to Config, the widget issues an event command to gtag.js. This requires Event name and accepts additional parameters configured via the Parameters property. Additionally, if the Track Page Changes property is set to Yes, the widget re-issues the event command when a page change happens.

For this scenario, a widget in the Advanced mode must be combined with either a widget in Basic mode or with a widget in Advanced mode with the Config command.

One typical use case of the widget in this scenario is custom page view tracking (when Basic mode does not cover your needs). In this use case, the widget is placed in a layout and configured to track page changes. Another use case is to place the widget on individual pages and send specific events when the page opens.

2.2.3 Parameters

The Parameters property allows for sending additional data along with the commands issued to gtag.js. Examples of parameters are Page Name and Session ID sent together with the page view event. The value of a parameter might be set as a custom value via an expression or chosen from a predefined set.

3 Google Tag Command

Google Tag Command is a JavaScript action that allows for making direct calls to gtag.js. When using this action, it is recommended to have a basic understanding of gtag.js.

The Command input can be set to Config or Event. When set to Config, only Tag ID and Parameters have to be passed. When set to Event, only Event Name and Parameters have to be passed.

The Parameters input accepts a list of GoogleTagParameter entities to represent arbitrary parameters to send along with a command to gtag.js. The entity includes two fields, Name and Value.