Connect Maglr events with Google Tag Manager
When you have linked GTM with Maglr, you are able to add code to a publication or forward data from a publication to external tools. This document explains how to forward event information from a Maglr publication, using the Google Tag Manager data layer, to a third-party application. In this example we use Google Analytics but the same concept can be applied to other systems where you want to forward events from Maglr. We are going to install:
Google Analytics listening to pageviews and virtual pageviews
Create variables from the datalayer
Create triggers based on specific events
Combine these into tags which forward events to Google Analytics
If you are not familiar with Google Tag Manager, please read this explanation first.
Everything a user does within a Maglr publication is recorded in the underlying GTM datalayer (when GTM is activated within the linked navigation environment). This is done based on events. An event can be a 'page view' or a 'click' from a user.
As soon as a user clicks on a button, Maglr sends this event along with additional information to the Datalayer. This then comes in as follows:
The first item in this list is the name of the event. An event is the key to which you respond within Google Tag Manager. "If this event happens, then…."
In addition to the event, we also send additional information about the event itself (maglrCategory, maglrAction and maglrlabel) and page information. This information gives a picture of what happened within that page at the moment when the event was fired. We will use these variables and forward them to Google Analytics.
Suppose a user clicks on a button in the publication. The publication sends an event to the data layer named "maglrUserEvent". If we have configured everything correctly, GTM will respond to this specific event. It will look up the maglrCategory, maglrAction and maglrLabel variables in the datalayer and forward it to Google Analytics.
The different events are divided into:
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’.
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 navigation environment of the publication. This includes the overview page, navigation menu and the side menu.
First you need to install the Google Analytics Tag. Chances are you already did, so Google Analytics is now activated for the Maglr publication. For only measuring pageviews this wouldn't be enough. With the default configuration, a pageview is only measured when the publication is loaded. When clicking through the pages of a publication, the browser itself is not refreshing again. We change the 'page url' and only refresh some parts of the page. This is called a 'virtual pageview' or 'History Change' in GTM.
Within the configuration of Analytics, you need to tell that it needs to respond to a pageview or a virtual pageview (History change). When this step is completed, Analytics should now measure each URL change in the publication.
Next step is listening to the different kinds of events, reading the variables and sending them to Google Analytics.
To use information from the datalayer inside GTM, we need to convert this into a variable. This needs to be done for each variable that you would like to use. In this example we would like to forward the event information (maglrCategory, maglrAction, maglrLabel).
Create a new variable in GTM and fill in the exact name of the variable. Click here to see how you can integrate Google Tag Manager and which variables are available.
Repeat this step for all variables you would like to use from the Maglr datalayer. In our example we use the 4 basic event variables we need for Google Analaytics.
Next, we are going to create the trigger. A trigger can be later used on specific tags. For example: If the event MaglrUserEvent is fired then....
Create a trigger and fill in the name of the event you would like to respond to. The name of this event should exactly match the listed event names at the top of this page. In our example we are going to listen for maglrUserEvent and maglrInterfaceEvent. We need to create two separate triggers.
If executed correctly, your Trigger in GTM will look similar to the following image. It responds to all events with the name maglrUserEvent. Repeat this step for maglrInterfaceEvent.
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 }}).
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. Create a second tag for the maglrInterfaceEvent.
You have now configured Google Analytics responding to Pageviews and History changes. When a maglrInterfaceEvent or maglrUserEvent is fired, the variables are taken from the datalayer and sent to Analytics. Preview the container and open a publication. You can now see the events coming into your Google Analytics liveview.
Google Analytics listening to pageviews and virtual pageviews
Create variables from the datalayer
Create triggers based on specific events
Combine these into tags which forward events to Google Analytics
If you are not familiar with Google Tag Manager, please read this explanation first.
Everything a user does within a Maglr publication is recorded in the underlying GTM datalayer (when GTM is activated within the linked navigation environment). This is done based on events. An event can be a 'page view' or a 'click' from a user.
As soon as a user clicks on a button, Maglr sends this event along with additional information to the Datalayer. This then comes in as follows:
<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>The first item in this list is the name of the event. An event is the key to which you respond within Google Tag Manager. "If this event happens, then…."
In addition to the event, we also send additional information about the event itself (maglrCategory, maglrAction and maglrlabel) and page information. This information gives a picture of what happened within that page at the moment when the event was fired. We will use these variables and forward them to Google Analytics.
Example
Suppose a user clicks on a button in the publication. The publication sends an event to the data layer named "maglrUserEvent". If we have configured everything correctly, GTM will respond to this specific event. It will look up the maglrCategory, maglrAction and maglrLabel variables in the datalayer and forward it to Google Analytics.
The different events are divided into:
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’.
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 navigation environment of the publication. This includes the overview page, navigation menu and the side menu.
Measuring pageviews and virtual pageviews in Analytics
First you need to install the Google Analytics Tag. Chances are you already did, so Google Analytics is now activated for the Maglr publication. For only measuring pageviews this wouldn't be enough. With the default configuration, a pageview is only measured when the publication is loaded. When clicking through the pages of a publication, the browser itself is not refreshing again. We change the 'page url' and only refresh some parts of the page. This is called a 'virtual pageview' or 'History Change' in GTM.
Within the configuration of Analytics, you need to tell that it needs to respond to a pageview or a virtual pageview (History change). When this step is completed, Analytics should now measure each URL change in the publication.
Forwarding events to Google Analytics
Next step is listening to the different kinds of events, reading the variables and sending them to Google Analytics.
1. Setting up variables
To use information from the datalayer inside GTM, we need to convert this into a variable. This needs to be done for each variable that you would like to use. In this example we would like to forward the event information (maglrCategory, maglrAction, maglrLabel).
Create a new variable in GTM and fill in the exact name of the variable. Click here to see how you can integrate Google Tag Manager and which variables are available.
Repeat this step for all variables you would like to use from the Maglr datalayer. In our example we use the 4 basic event variables we need for Google Analaytics.
2. Defining triggers
Next, we are going to create the trigger. A trigger can be later used on specific tags. For example: If the event MaglrUserEvent is fired then....
Create a trigger and fill in the name of the event you would like to respond to. The name of this event should exactly match the listed event names at the top of this page. In our example we are going to listen for maglrUserEvent and maglrInterfaceEvent. We need to create two separate triggers.
If executed correctly, your Trigger in GTM will look similar to the following image. It responds to all events with the name maglrUserEvent. Repeat this step for maglrInterfaceEvent.
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 }}).
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. Create a second tag for the maglrInterfaceEvent.
4. Test these tags
You have now configured Google Analytics responding to Pageviews and History changes. When a maglrInterfaceEvent or maglrUserEvent is fired, the variables are taken from the datalayer and sent to Analytics. Preview the container and open a publication. You can now see the events coming into your Google Analytics liveview.
Updated on: 08/02/2023