> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Integrate Google Tag Manager

[Google Tag Manager](https://marketingplatform.google.com/about/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.

${youtube}[Video: key features of Google Tag Manager](9A-i7EWXzjs)

|| 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](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](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.

![Image: creating an account in Google Tag Manager](https://storage.crisp.chat/users/helpdesk/website/88820981e051b000/8b0313f9-2215-46c4-aaa1-7a5abc_1u02kt.png)

### 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.

![Image: copying the GTM-code in Google Tag Manager](https://storage.crisp.chat/users/helpdesk/website/3c675a4502dbb400/4c5302b0-724f-4726-9194-4e6ed0_lmgi2j.png)

## Connecting Google Tag Manager to Maglr

To connect Google Tag Manager to a domain:

1. Go to `Settings` → `Domain names`.
2. Click the domain you want to add tracking to.
3. Scroll to `Statistics & integration` and turn on `Analytics settings`.
4. Set `Integration type` to Google Tag Manager.
5. Paste the GTM code into the code field.
6. Save the domain.

See [Statistics & integration settings for your domain](https://help.maglr.com/en/article/statistics-integration-settings-for-your-domain-1np6jfy/) for the full section.

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:

![Image: a Data Layer Variable in Google Tag Manager](https://storage.crisp.chat/users/helpdesk/website/190e1ed73c684000/9341b2f2-71a2-4a59-a40c-78d915_palgk3.png)

## 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: 

![Image: setting up a Trigger in Google Tag Manager](https://storage.crisp.chat/users/helpdesk/website/ab6dbd07644fa800/scr-20230227-n2x_g6xbbx.png)

## 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:

![Image: setting up a GA4 Event Tag in Google Tag Manager](https://storage.crisp.chat/users/helpdesk/website/ab6dbd07644fa800/scr-20230227-nag_1caoisp.png)

## Variables per User Event

### Video
Only on manual videos (no events for autoplay videos)

| **Category** | **Action** | **Label** |
| ------------ | ---------- | --------------------------------- |
| Video        | Play       | 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 | action (Action contains: next, previous, restart, play, pause) |
|              | 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     |
|                    |               | pdf       |
|  | 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            |
|                  |                      | pdf              |
|                  | 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                      |
|                    |                  | pdf                          |
|                    | 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         |