Integrate Google Tag Manager

Google Tag Manager is a tag management system created by Google to manage JavaScript and HTML tags used for tracking and analytics on websites without editing code. Google Tag Manager makes measurement and tracking implementation much easier and convenient for digital marketers.

Maglr has the option to implement Google Tag Manager to allow users a more advanced method of tracking certain data of publications. Data that allows you to use these insights and metrics for your (re)marketing when it comes to your audience interests.

Setting up Google Tag Manager

The video below is made by the developers of Google Tag Manager, Google. This video gives you a brief oversight of the tag manager, along with all its features. I recommend watching the video to get a better understanding of the tag manager before you want to start using GTM, especially if you have no experience.

Creating an Account and Container in GTM

First, login into your GTM account and go to your Accounts overview: https://tagmanager.google.com/?authuser=1#/home. This is the main page for Google Tag Manager.

Click the Create Account button, this will then load an account creation screen. Fill in all the required fields in Account Setup for creating an Account Name and choosing your Country. Then fill in the website URL for the Container Setup and select the Web option for creating a new container.

Copy the GTM code

After creating the new Account and Container, you will be brought to the main dashboard for Google Tag Manager. Copy the GTM Tag on the top right of the dashboard.

Connecting Google Tag Manager to Maglr

Login to your Maglr dashboard and go to Settings > Navigation Interface. Edit your current interface, go to the Analytics tab and choose for the advanced GTM implementation. Paste the GTM-code in the required field and click Save.

Next, we are moving to Google Tag Manager and connect with Maglr by setting up variables, triggers and tags.

1. Setting up variables

Maglr is constantly pushing a lot of data to the Data Layer automatically, which can be retrieved by creating a variable of the type ‘Data Layer Variable’. Name this variable according to the variables below (so maglrCategory, maglrAction, etc.):

<script>
  dataLayer = [{
    'event': 'Type of event',
    'maglrCategory': 'Event category',
    'maglrAction': 'Event action',
    'maglrLabel': 'Event label',

    'maglrIssueID': 'ID of the project',
    'maglrSpreadID': 'ID of the current page',
    'maglrLanguage': 'Language publication (example en_us)',
    'maglrPageType': 'Publication, Single page, Proposal',
    'maglrPageStatus': 'ready, started, stopped, pause',
    'maglrReferenceTag': 'unique (internal) pagename',
    'maglrPagePath': '/projectname/pagename',
    'maglrPageURL': 'https://www.domain.com/projectname/pagename',
    'maglrPageTitle': 'Title of the page',
    'maglrProjectTitle': 'Title of the project',

    'MaglrCookieConsented': undefined / true / false, 
  }];
</script>

If set up correctly, your variable in GTM will look similar to the following image:

2. Defining triggers

Next, we are going to create the triggers that should be fired when we want them to, based on the information that is being sent to the variables. Maglr defines a couple of Events that can be triggered by performing an action, and triggers should (as with variables) be named according to the Maglr event. All of these events are described below. For all possible variables per event, scroll further down this page.

2.1. Navigation Events

• maglrPageView: this is the event that triggers when the first page of a publication is loaded. This is a standard event, which doesn’t necessarily need to be set up as a trigger in GTM.
• maglrVirtualPageView: this event is being triggered by the following pages of the publication, and needs to be set up manually. GTM knows this type of trigger as a ‘History Change’, so it should be set up accordingly.
• maglrPageEvent: Maglr is, in the background, preloading the following pages of the publication. This is known as a maglrPageEvent, and can receive variables like ‘Created’, ‘Started’, ‘Paused’ and ‘Stopped’.

2.2. User Events

• maglrUserEvent: all events that can be triggered by the user in a publication. Used with the variables maglrCategory, maglrAction and maglrLabel to specifically tell which event is being triggered.
• maglrInterfaceEvent: this trigger contains all events that are being triggered in the surrounding interface of the publication. This includes the overview page, navigation menu and the side menu.

2.3. Cookie consent

• maglrCookieConsented: cookie consent is necessary to play YouTube and Vimeo videos. When the cookie consent option is enabled in the Maglr Dashboard, a call to action is triggered for the visitor of the publication. This event can then receive variables like ‘True’, ‘False’ or ‘Undefined’.

If executed correctly, your Trigger in GTM will look similar to the following image: 

3. Creating Tags

Lastly, we have to set up Tags in order to send our desired information to Google Analytics. Set up your Tag Type as a ‘Google Analytics: GA4 Event’. In case of, for example a maglrUserEvent, choose ‘Event’. Next, name the Category, Action & Label according to their names coming from Maglr (so so {{maglrCategory}}, {{maglrAction}} and {{maglrLabel}}).

If executed correctly, your Tag will look similar to the following image:

Variables per User Event

Video

Only on manual videos (no events for autoplay videos)

Form submission

Popup clicks

Link clicks

Element action

Slideshow action

Scroll depth

Variables per Interface Event

Interface overview

Interface viewer

Interface sidemenu

Updated on: 10/01/2025