Integrate Google Tag Manager

Integrating Google Tag Manager to Maglr

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: Universal Analytics’ and select the ‘Track Type’. 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 desired, enter the ‘IssueID’ of your publication in the ‘Value’ textbox.

TIP! For clarification, you can for example also name these parameters ‘maglr-{{maglrCategory}}’, so that you can distinguish maglr-events from your other events in Google Analytics.

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

Variables per User Event

Video

Form submission

Popup clicks

Link clicks

Element action

Slideshow action

Scroll depth

Variables per Interface Event

Interface overview

Interface viewer

Interface sidemenu