# FGZZH - Measurement plan | Developer Instructions | Web

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.

## [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#Table-of-Contents "Table-of-Contents")Table of Contents

<span class="toc"></span>

## [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#Basics "Basics")Basics

### [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#Data-Layer-per-page "Data-Layer-per-page")Data Layer per page

On each page it is required to implement a generic dataLayer variable which needs to be filled with relevant information form the data layer push below. If a certain value is unknown, the value can be an empty string.

The following data layer has to be filled at every page:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'init',
'user': user_object,
'page': page_object
})
</script>

* * *

### [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#User-object-per-page "User-object-per-page")User object per page

<span style="font-weight: 700;">If</span> a page loads

<span style="font-weight: 700;">Then</span> on each page the data layer has to contain a user object, which holds the data of the user.

{
'userId': 'user_id_hashed_sha256', // SHA-256 hashed unique user id from backend
'loggedIn': 'logged_in_status', // String being '1' or '0'
'Email': 'Email', // Email provided by the user
'FirstName': 'FirstName', // FirstName provided by the user
}

> <span style="font-weight: 700;">Note:</span>
> UserId and email can only be populated if the user is logged in to the website. If the user is not logged in, values should be an empty string.

## [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#Other-events "Other-events")Main events

* * *

### [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#Menu---Footer-menu-use "Menu---Footer-menu-use")Site search

<span style="font-weight: 700;">If</span> a user searches for content on the site

<span style="font-weight: 700;">Then</span> the following dataLayer has to be filled:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'search',
  'search_term': 'search_term',                    // The term that was searched for.
  'search_results_count': 'search_results_count'   // Number of search results
});
</script>

<span style="font-weight: 700;">Screenshots</span>


---
## Interaction - Video interaction

**If** a visitor interacts with a video,

**Then** the following dataLayer has to be filled, depending on the action(start, play(depending on the quarter of the video), complete).

**If** the user clicked to start the video or the video started automatically. **Then** the next level of data should be filled:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'event': 'videoInteraction',
    'video_status': 'start',
    'video_progress': '0%', // in string format       
    'video_title': 'video_title',
    'video_url': 'video_url',
    'video_provider': 'video_provider' // like Vimeo,Youtube,Server etc.    
    });
</script>

*Screenshot*

**If** the video playback percentage is 10%, 25%, 50% or 75% of the length of the video itself.
**Then** the next level of data should be filled:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'event': 'videoInteraction',
    'video_status': 'progress',
    'video_progress': 'video_%',  // video_%  - one of these values 10%, 25%, 50% or 75%  in string format    
    'video_title': 'video_title',
    'video_url': 'video_url',
    'video_provider': 'video_provider' // like Vimeo,Youtube,Server etc.    
    });
</script>

*Screenshot*

**If** the video has been played completely.
**Then** the next level of data should be filled:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'event': 'videoInteraction',
    'video_status': 'complete',
    'video_progress': '100%', // in string format
    'video_title': 'video_title',
    'video_url': 'video_url',
    'video_provider': 'video_provider' // like Vimeo,Youtube,Server etc.    
    });
</script>

---

## [<span class="octicon octicon-link" style="color: rgb(0, 0, 0); vertical-align: middle; visibility: hidden;"></span>](#Contact-for-Questions "Contact-for-Questions")Contact for Questions

<div class="alert alert-info" style="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif; font-size: 16px; letter-spacing: 0.35px; margin-bottom: 0px !important;">

<span style="font-weight: 700;">For all the questions regarding the measurement plan please reach out to:</span>
Muslim Karaiev - [[e-mail]](mailto:[e-mail])

</div>