# Haufe: Developer Instructions

## Table of Contents

[TOC]

### 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({             
   'user': user_object,
})
</script>

### User object per page
When a page loads, the data layer has to contain user object that holds the following information:

{'user_id': 'user_id_hashed_sha256',        // SHA-256 hashed unique user id from backend 
'user_email': 'email_hashed_sha256',    // SHA-256 hashed e-mail address for logged in users
'login_status': 'login_status'             // either logged in or not logged in; true or false
}

### zum_haufe_shop
All the Shop buttons on the Homepage and content pages. Also the sticky box on the lower right side and the box under the text in the main conent colomn:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'zum_haufe_shop',
  'button_position': 'button_position',  // either: main home button, home button, main content button, content button, content header, content stickey button
  'button_name': 'button_name',        // either: shop, zum shop or zum haufe shop        
  
 
</script>

Home page buttons:

Content pages buttons:

### zur_haufe_akademie
All the button clicks leading to Haufe academy:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'zur_haufe_akademie',
  'button_position': 'button_position',  // either: main home button,main content button, content header
  'button_name': 'button_name',        // either: akademie, zur haufe akademie        
  
 
</script>

Home page buttons:
Content pages buttons:

### seminar_signup
All seminar signups on successful form fill. Exemple of a page where you can sign up for a seminar https://www.haufe.de/hr/online-seminare:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'seminar_signup',
  'seminar_name': 'seminar_name',  // name of the seminar
</script>


### newsletter_signup
Successful signups to newsletters.

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'newsletter_signup',
  'newsletter_category': 'newsletter_category',  // example from screenshot:newsletter personal
    'newsletter_subcategory': 'newsletter_subcategory',  // Example from screenshot: personal or personal, wirtschaft and weiterbildung
</script>


### lead_form
Measuring of all of the lead forms on successful form send. Links:
https://www.haufe.de/hr-digitalisierung/online-seminar-anmeldung
https://www.haufe.de/hr-digitalisierung/downloads/leitfaden
https://www.haufe.de/hr-digitalisierung#informationen

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'lead_form',
  'lead_form_name': 'lead_form_name', 
</script>

### demo_form
Measuring forms that the user can navigate to through the button on the upper right side https://www.haufe.de/hr/services, or on pages like this https://www.haufe.de/hr/digitale-personalakte

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'demo_form',
  'demo_form_name': 'demo_form_name', 
</script>


### contact_form
Measuring successful contact form submits, example https://www.haufe.de/hr-digitalisierung#informationen

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'contact_form',
  'contact_form_name': 'contact_form_name', 
</script>


### produkt_starten
Button clicks on produkt starten button https://www.haufe.de/hr-digitalisierung#informationen:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'produkt_starten', 
  'button_name': 'button_name',        // produkt starten
  
</script>


### kostenloser_test
The orange button on all the pages in the string “idesk” in the URL, like the one from screenshot: https://www.haufe.de/recht/deutsches-anwalt-office-premium/bundesfernstrassenmautgesetz-anlage-7-zu-14-absatz-6-mautsaetze-im-zeitraum-vom-1-januar-2019-bis-zum-ablauf-des-27-oktober-2020_idesk_PI17574_HI14498483.html

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'kostenloser_test', 
  'button_name': 'button_name',        // produkt starten
  
</script>


### error_page
When a user reaches a 404 error page.

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({  
  'event': 'error_page', 
 
</script>