# DEPT - Avans Open - Measurement plan
This measurement plan contains an overview of all data (points) we advise to collect on your platform. These are supplemented with code snippet instructions aimed at developers who play an important role in the measurement setup. As not all data is available on the page initially, we ask developers to prepare this and provide the necessary data when certain interaction events take place. Our goal is to deploy an error-proof setup which is not prone to changes in the DOM of the website. Therefore we strive to collect as much data as possible made available through back- and frontend data streams.
Every part of the measurement plan is structured by an ‘if’, ‘then’, ‘whereby’ structure that explains the exact moment data needs to be made available.
[TOC]
## Basics
### GTM code snippet
Copy the code below and paste it onto every page of your website.
Paste this code as high in the <head> of the page as possible:
```
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PT7HS96');</script>
<!-- End Google Tag Manager -->
```
Additionally, paste this code immediately after the opening <body> tag:
```
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PT7HS96"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
```
### Data Layer on pageload
On each page load it is required to implement dataLayer variables which needs to be filled with relevant information from the data layer push below. If a certain value is unknown, you can leave the key and value out of the object. The data layer snippet should be placed **above** the Google Tag Manager script.
The following data layer has to be filled at every page:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'init',
'page_data': page_object,
'user_data': user_object
})
</script>
```
#### Page object
**If**
a page loads
**Then**
on each page load, the data layer has to contain a page object, with page information.
```
{
'page_path': document.location.pathname,
'page_title': document.title,
'language': page language, // 'english or dutch'
'original_location': document.location.href // on pageload including query string and fragment
}
```
#### User object
**If**
a page loads and the user is identified (logged in)
**Then**
on each page load, the data layer has to contain a user object.
```
{
'user_id': user id, // internal user identifier without PII
'email': user email, // user's email
'presentations_selected': number of presentations registered, // integer; amount of times to which the user has registered to an event
'city': user city, // city selected by the user when registering
'preliminary_education': vooropleiding, // preliminary education selected by the user when registering ('mbo', 'hbo'...)
'school_name': current school name, // selected by the user when registering
'area_of_interest': interessegebied // study categories from registered events (if multiple events: comma-separated values)
}
```
### Data Layer on virtual pageload
On each virtual page load, it is required to implement the page_object dataLayer variable along with the virtual_pageview event.
The following data layer has to be filled when loading a new single-page application screen:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'virtual_pageview',
'page_data': page_object
})
</script>
```
See **page_object** referenced [here](https://hackmd.io/PaoDD2ruTMmsvxWdOXbICg#Page-object).
**NOTE**: The values of **page_data.page_path** and **page_data.page_title** should uniquely identify each application screen and form step. If they are not identifying unique screens, add another variable to the page_object to identify each application screen and form step.
## Events
### Sign up
**If**
a visitor successfully submits the sign up form
**Then**
the following dataLayer variables should be pushed:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'sign_up',
'user_id': user id, // internal user identifier without PII
'email': user email // user's email
});
</script>
```
### Log in
**If**
a visitor successfully logs in to their account, previously created
**Then**
the following dataLayer variables should be pushed:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'log_in',
'user_id': user id, // internal user identifier without PII
'email': user email // user's email
});
</script>
```
### View, search and filter studies
**If**
a visitor enters the "Meld je aan open avond" screen, or sees a search results page after applying filters or entering a search query.
**Then**
Push the following dataLayer event and variables:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'view_item_list',
'filters': {
'n_filters': number of filters applied, // Formatted as integer. Sum of all filters applied. 0 when entering the screen.
'filter_type': type filter values applied, // comma-separated string
'filter_vorm': vorm filter values applied, // comma-separated string
'filter_locatie': cities filter values applied, // comma-separated string
'filter_taal': language filter values applied, // comma-separated string
'filter_interessegebied': study category filter values applied // comma-separated string
},
'search': {
'search_term': search query // in lowercase
},
'number_of_results': number of studies in search results // number of search results displayed on the list (after search and filters)
'items': [{
'item_id': study id,
'item_name': study name,
'vorm': study form, //i.e. deeltijd
'type': study level, //i.e. bachelor
'locatie': study city, //i.e. Den Haag
'interessegebied': study category //i.e. Kunst en Cultuur
},
{...}, {...}
// log the rest of studies displayed on the page
]
});
</script>
```
If any of the variable values is not applicable. For example, when filters are not applied, you can set a null value.
### Select studies
**If**
a visitor has selected studies and clicks on the button to select the presentation time.
**Then**
Push the following dataLayer event and variables:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'select_item',
'filters': {
'n_filters': number of filters applied, // Formatted as integer. Sum of all filters applied. 0 when entering the screen.
'filter_type': type filter values applied, // comma-separated string
'filter_vorm': vorm filter values applied, // comma-separated string
'filter_locatie': cities filter values applied, // comma-separated string
'filter_taal': language filter values applied, // comma-separated string
'filter_interessegebied': study category filter values applied // comma-separated string
},
'search': {
'search_term': search query // in lowercase
},
'number_of_results': number of studies in search results // number of search results displayed on the list (after search and filters)
'items': [{
'item_id': study id,
'item_name': study name,
'vorm': study form, //i.e. deeltijd
'type': study level, //i.e. bachelor
'locatie': study city, //i.e. Den Haag
'taal': study language, //i.e. 'engels' or 'nederlands'
'interessegebied': study category //i.e. Kunst en Cultuur
},
{...}, {...}
// log the selected studies
]
});
</script>
```
If any of the variable values is not applicable. For example, when filters are not applied, you can set a null value.
### Select presentations and presentation times
**If**
a visitor successfully has selected the presentation times that they want to attend and clicked the 'Naar adresgegevens' button
**Then**
the following dataLayer has to be pushed:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'add_to_cart',
'items': [{
'item_id': study id,
'item_name': study name,
'vorm': study form, //i.e. deeltijd
'type': study level, //i.e. bachelor
'locatie': study city, //i.e. den haag
'taal': study language, //i.e. 'engels' or 'nederlands'
'interessegebied': study category //i.e. kunst en cultuur
'presentation_time': presentation date and time, //The date and time of the presentation. Example ("YYYYMMDD-HHMM")
'presentation_speaker': presentation speaker
},
{...}, {...}
// log the selected studies
]
'presentations_selected': number of presentations selected, //integer
});
</script>
```
### Select city
**If**
a visitor submits their city on the Persoongegevens - Adresgegevens screen
**Then**
the following dataLayer has to be pushed:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'city_selection',
'city': user city
});
</script>
```
### Select premiliminary education
**If**
a visitor submits their education level on the Profiel screen
**Then**
the following dataLayer has to be pushed:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'preliminary_education',
'preliminary_education': preliminary education,
'school_name': school name
});
</script>
```
### Additional information
**If**
a visitor submits their preference to whether receive additional information about the studies by clicking on Aanmelden voor open avond
**Then**
the following dataLayer has to be pushed:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'additional_information',
'email_opt_in': 'true', // or false
});
</script>
```
### Event registration
**If**
a visitor views the confirmation page after finalizing the events registration
**Then**
the following dataLayer has to be pushed:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'event_registration',
'items': [{
//array of objects fot all the study presentations
'item_id': study id,
'item_name': study name,
'vorm': study form, //i.e. deeltijd
'type': study level, //i.e. bachelor
'locatie': study city, //i.e. Den Haag
'taal': study language, //i.e. 'engels' or 'nederlands',
'interessegebied': study category, //i.e. Kunst en Cultuur
'presentation_time': presentation date and time, //The date and time of the presentation. Example ("YYYYMMDD-HHMM")
'presentation_speaker': presentation speaker
},
{...}, {...}
// log the registered study presentations
]
'presentations_selected': number of presentations selected, //integer
'email_opt_in': 'true', // or false
'preliminary_education': preliminary education,
'school_name': school name,
'user_id': user id, // internal user identifier without PII
'email': user email // user's email
});
</script>
```
### Link clicks from emails
**If**
a visitor clicks on an email link directing to Avans open
**Then**
append the following URL parameters to the destination URL (email=,uid=)
```
?em_type=[email_type]&opleiding=[opleiding]&tijd=[presentation time]
```
**Whereby**
The parameter values (within []), are:
| variable| description
| -------- | -------- |
|email_type| The email where the user came from. Values can be "confirmation", or "reminder"
|opleiding |The information about the presentations (study name, study location and study type.Example: "Civiele Techniek-Tillburg-Duaal"| Pages where you find more information about the studies. When more than one presentation, separate with a comma.
|tijd | The date and time of the presentation. Example ("YYYYMMDD-HHMM"). When more than one presentation, separate with a comma
### Presentation start
**If**
a user clicks on a link directing to Microsoft Teams to access a presentation
**Then**
Push the following dataLayer:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'presentation_start',
'items': [{
// presentation started
'item_id': study id,
'item_name': study name,
'vorm': study form, //i.e. deeltijd
'type': study level, //i.e. bachelor
'locatie': study location, //i.e. den Haag
'taal': study language, //i.e. 'engels' or 'nederlands',
'interessegebied': study category, //i.e. kunst en cultuur
'presentation_time': presentation date and time, //The date and time of the presentation. Example ("YYYYMMDD-HHMM")
'presentation_speaker': presentation speaker
}]
});
</script>
```
### Presentation feedback
**If**
a user comes back, after leaving the presentation, and submits their feedback to a presentation, by clicking on the star icons.
**Then**
Push the following dataLayer:
```
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'presentation_feedback',
'items': [{
// presentation feedback
'item_id': study id,
'item_name': study name,
'vorm': study form, //i.e. deeltijd
'type': study level, //i.e. bachelor
'locatie': study location, //i.e. den Haag
'taal': study language, //i.e. 'engels' or 'nederlands',
'interessegebied': study category, //i.e. kunst en cultuur
'presentation_time': presentation date and time, //The date and time of the presentation. Example ("YYYYMMDD-HHMM")
'presentation_speaker': presentation speaker,
'presentation_score': score //as a float. stars given (i.e. 3 or 4.5)
}]
});
</script>
```
Sign in with Wallet
Connect another wallet