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.
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.
Note: this URL link explains more about the Tag Manager with a list of frequently asked questions: https://support.google.com/tagmanager/answer/6102821?hl=en
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.
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.
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.
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.):
If set up correctly, your variable in GTM will look similar to the following image:
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.
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 interface of the publication. This includes the overview page, navigation menu and the side menu.
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:
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 }}).
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:
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.
Note: this URL link explains more about the Tag Manager with a list of frequently asked questions: https://support.google.com/tagmanager/answer/6102821?hl=en
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 }}).
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
| Category | Action | Label |
|---|---|---|
| Video | Play | Name element - Videotype - Source |
| Stop | Name element - Videotype - Source |
Form submission
| Category | Action | Label |
|---|---|---|
| Form | Submit | Subject form |
Popup clicks
| Category | Action | Label |
|---|---|---|
| Popup | Open | Name layer |
| Close | Name layer |
Link clicks
| Category | Action | Label |
|---|---|---|
| Link | Element/Layer | Name element |
| Scene | Name scene | |
| Internal | Name page | |
| External | URL | |
| File | Filename | |
| Reference | Reference name | |
| Element-action | Name element | |
| Scrollto | Name element | |
| Interface | Value (next\_spread, previous\_spread, home, overview, close\_level, back) |
Element action
| Category | Action | Label |
|---|---|---|
| Element | Next | Name element |
| Previous | Name element | |
| Restart | Name element | |
| Play | Name element | |
| Pause | Name element |
Slideshow action
| Category | Action | Label |
|---|---|---|
| Slideshow | Next | Name element |
| Previous | Name element | |
| Dot 2 / 3 / 4 | Name element |
Scroll depth
| Category | Action | Label |
|---|---|---|
| Scroll-depth | Position-mobile | 25% |
| Position-desktop | 50% |
Variables per Interface Event
Interface overview
| Category | Action | Label |
|---|---|---|
| Interface-overview | Open-sidemenu | direct |
| contact | ||
| search | ||
| register | ||
| share | ||
| Open-category | Name category | |
| Change-language | Name of language | |
| Open-legacy-issue | Name issue |
Interface viewer
| Category | Action | Label |
|---|---|---|
| Interface-viewer | Open-sidemenu | direct |
| contact | ||
| search | ||
| register | ||
| share | ||
| Open-overview | back-to-overview | |
| Webpushnotification | subscribe | |
| Gate-activated | Form name | |
| Gate-form-submitted | Form name | |
| Gate-closed-manually | Form name |
Interface sidemenu
| Category | Action | Label |
|---|---|---|
| Interface-sidemenu | Switch-tab | pages |
| issues | ||
| contact | ||
| info | ||
| search | ||
| register | ||
| sitemap | ||
| Search-tab | submit-query | |
| Open-search-link | Title of click search result | |
| Search-query | Value of search submit | |
| Share-tab | click-linkedin | |
| click-facebook | ||
| click-twitter | ||
| click-email | ||
| Download-tab | download-complete-pdf | |
| download-single-page | ||
| Contact-tab | submit-contact-form | |
| link-web | ||
| link-instagram | ||
| link-twitter | ||
| link-facebook | ||
| link-youtube | ||
| Register-tab | submit-register-form |
Updated on: 27/02/2023