# SCI-Arc - Measurement plan | Developer Instructions | Web | Google
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>

# Basics
## 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 data layer 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',              
       'user': user_object,
       'page': page_object,
    })
    </script>

* * *

## User object per page

**If** a page loads

**Then** 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 
    'email': 'email_hashed_sha256',        // SHA-256 hashed unique e-mail address from backend
    'loggedIn': 'logged_in_status'         // String being '1' or '0'
    }

## Page 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 page object, which holds the data of the user.

{
'pageType': 'page_type', // Type of page
'language': 'website_language', // ISO 639-1 language code
}

---

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

## Menu - Other menu use

**If** a user clicks on one of the other menu items

**Then** the following dataLayer has to be filled:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
   'event': 'apply_now',
   'button_name': '{{name of button}}'  //'barch', 'graduate', 
                                        //'did_registration', 'mm_registration'
})
</script>

**Screenshot**



* * *

## Form - Notify form submit

**If** the visitor successfully submits the notify me when available form

**Then** the following dataLayer has to be filled:

<script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
       'event': 'form_Submit',
       'content_type': 'tell_us_about_yourself',
       'userId': 'user_id_hashed_sha256',     // If available: SHA-256 hashed unique user id from backend 
       'email': 'email_hashed_sha256'         // SHA-256 hashed unique e-mail address from backend
       })      
    </script>

**Screenshot**


* * *

## Newsletter - Newsletter sign up

**If** the visitor successfully submits the notify me when available form

**Then** the following dataLayer has to be filled:

<script>
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
       'event': 'newsletter_Subscribe',
       'content_type': 'Public_Programs_Email_List',
       'userId': 'user_id_hashed_sha256',     // If available: SHA-256 hashed unique user id from backend 
       'email': 'email_hashed_sha256'         // SHA-256 hashed unique e-mail address from backend
       })      
    </script>

**Screenshot**


* * *

## Clicking the button 'Request Admissions Info'

**If** the user clicks on the "request Admissions info" button,

**Then** the following dataLayer has to be filled:

<script>
dataLayer.push({
     'event': 'click_request_Admissions',

    });             
</script> 

**Screenshot**


---

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

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
	 'event': 'videoInteraction',
     'video_interaction': 'video_start',
	 'video_progress': 'video_start',     //video_start when the video starts playing   
	 'video_title': 'video_title'
	});
</script>

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
	 'event': 'videoInteraction',
     'video_interaction': 'video_progress'.
	 'video_progress': 'video_percent',    // video_progress when the video progresses past 10%, 25%, 50%, and 75% duration time
	 'video_title': 'video_title'
	});
</script>

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
	 'event': 'videoInteraction',
     'video_interaction': 'video_complete',
	 'video_progress': 'video_complete',     // video_complete when the video ends
	 'video_title': 'video_title'
	});
</script>

*Screenshot*



---
## Interaction - Social buttons

**If** the user clicks on one of the social links in the footer,

**Then** the following dataLayer has to be filled:

<script>
dataLayer.push({
     'event': 'socialClick',
     'platform': '{{social__platform}}' // facebook, instagram, twitter
    });             
</script>    

**Screenshot**


* * *

## [<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>
Maxim Tereschenko - [[e-mail]](mailto:[e-mail])

</div>