# CBRE - App Measurment - Dev. Instructions - React Native
# Measurement Plan
This measurement plan contains an overview of all data(points) to collect from CBRE app. These are supplemented with code snippet instructions. As not all data is available on the screens initially, I would like to ask you (developers) to prepare this and provide the necessary data when certain interaction events take place.
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.
The instructions are written in the following order:
1. Data to be popualted on every screen
2. Data related to specific pages with the further breakdown per screen category
* Other
* Home Screen
* Profile
* Events
* Map
* Services
* NEW - Loyalty cards
:::info
:bulb: You can add comments by highlighting <mark>some text</mark> and then clicking on 'Comment'
:::
## Table of Contents
[TOC]
# Data to be populated on every page
## User properties
On each screen it is required to set the user properties with the specific value from the website. If a certain value is unknown, the value can be an empty string.
##### If
a screen loads
##### Then
on each screen the following user properties have to be defined.
#### React Native
```javascript=
analytics()
.setUserId('id', 'user_id'| null) //assing the unique id for every loged-in user which should be preserved across all the sessions
.setUserProperty('building_choice', 'building_name'| null) // set the choice for the selected buildings
.setUserProperty('company', 'company_name'| null) // add the company name, if users added to their profile
.setUserProperty('job_title', 'job_name'| null); // add the title, if users added to their profile
```
##### Whereby
id is a hashed customer ID as provided by backend system.
## Events
On each screen the following two events has to be populated
### 1. Page view
##### If
a screen loads
##### Then
on each screen the following event with the associated parameters have to be added.
#### React Native
```javascript=
analytics().logScreenView({
screen_name: 'name_of_screen', // i.e "Dry cleaning and laundry". Screen name the user is currently viewing. that is the unqiue name for every page
screen_class: 'class_name_' // i.e Overivew, Events, Map, Services or Profile. Here I would prefer prefer to set the value of the section of the app where the user is looking at a page/ doing any actions. However, if you prefer to set-it up automatically from the backend, could you tell me which values you want to assign?
});
```
[documentation for logging in screenview fyi](https://rnfirebase.io/analytics/screen-tracking#react-native-navigation)
### 2. Scroll
##### If
a user is scrolling a page
##### Then
on each screen the following event with the associated parameters have to be added.
#### React Native
```javascript=
analytics().logEvent('scroll',{
screen_name: 'name_of_screen', // i.e "Dry cleaning and laundry". Screen name the user is currently viewing. that is the unqiue name for every page
screen_class: 'class_name_',
scroll_depth: depthValue, // 4 posssible values: 25, 50, 75 and 100. Each of them represents the scroll depth in percentages. I want to update this value every time the user reaches a new threshold and send to GA4 only one 'scroll' event with the highest scroll_dept parameter
// If it is techcially impossible to implement, then send the same event multiple time per page and sending an updated scroll_depth event every time
});
```
## Event Parameters
The following event parameters have to be added to all the events on all the pages
##### If
any event happens anywhere in the app
##### Then
add the following event parameters to all those events
#### React Native
```javascript=
// set the default event parameters
analytics().setDefaultEventParameters({
building_name: 'example_building_name', //i.e Delftse Poort - the name of the building. Can be taken from the user property
});
```
# Events to be populated on specific app sections
## 1. Other
### Sign Up
##### If
when a user sings up for the app
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logSignUp({
method: 'chosen log-in otion' //i.e Google, FB, linkedin etc. Same as for log in event above
})
```
## 2. Overview / home screen
> First,let's work with all the events that can happen on this screen
### Click to Action(CTA) for 'Services' buttons
##### If
a user clicks on one of the buttons which direct to different services
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('button_click', {
button_text: 'cta_text', // ie. Coffee; MyPUP; Shared Bikes; Dry Cleaning. popualte the text of what user clicked on
button_id: uniqueID,
button_class: 'Overivew' // constant here. Hence, analysts know that click on say 'Coffee' is from Homepage
});
```
### Refresh Updates
##### If
a user clicks on refresh the updates button
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('button_click', {
button_text: 'Refresh Updates',// constant in this case. value for this particualr button. To make sure analysts could understand it
button_id: uniqueID,
button_class: 'Overivew', // constant in this case. Hence, analysts know that click on say 'Coffee' is from Homepage
});
```
### Poll engagement
##### If
a user answers the poll
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('poll_engagemenent', {
name: 'poll_name', //i.e "Will NL win the world cup?" the unique name for each poll
poll_answer: 'the given anser', // send the answer of the user
});
```
### Updates - Update post is visible to the user
##### If
when on the user screen an update article/post appears
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('view_content',{
content_name: 'updates Title'|NULL,// popualte title shown to the user OR NULL
// If there is no title in UI, is there one assigned in backend that you can popualte?
content_category: 'This weeks lucnh special'|NULL,// not present everywhere. If not present, NULL
content_id: uniqueID, // id to identify this update. If availalbe. If not, then drop this parameter
date_added: dd-mm-yy, // the date of posting
content_order_position: 1, // shows the position of updates post. 1 - the very first visible, 2 - the second most visible etc
});
```
## 3. Profile
### Switch_buildings
##### If
a user decides to switch the buildings: 1), the user clicks on 'switch the building' and 2) after user sucesfull chooses(loads the page) with the new building
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('switch_buildings', {
old_building_name: 'example_building_name', //i.e Delftse Poort - the name of the building. Can be taken from the user property
new_building_name: 'example_building_name', // the name of the clicked building
building_change_journey:'old building to new buidling' // concatenate the names of 2 builds. I.e, If I change from Delftse port to WTC Utrecht, the string should be 'Delftse Poort to WTC Utrecht'
})
```
### Log in
##### If
when a user logs into the app
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logLogin({
method: 'chosen log-in otion' //i.e Google, FB, linkedin etc
})
```
### Delete Account
##### If
the user submits a successfull request to deleate an account after clicking 'confirm'
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent("delete_account")
```
## 4. Events
> Now,let's work with all the events that can happen under "Events" section
> 
<!-- ### View 'Events' Section
##### If
a user loads a page with events on it
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logViewItemList({
item_list_name: 'Event listing', //constnat.
item_list_id: uniqueID, // unique ID assigned from backend to all lists, itesm etc
items:[{ //
price: eventPrice, // if event is free, populate 0(zero) as a number
item_category: 'Events', // Constnat. Signifies that this event name is related to an item which is from 'event section' of the app
item_name: 'EventName', // event name as shown to the user
item_id: uniqueID, // unique identifier per event
event_location, 'shownAddress',// popualte the shown address
event_date: dd-mm-yy, // date of event as shown to users
event_time: 'hh:mm - hh:mm', // time slot of the event
item_list_name: 'events', // same as above
item_list_id: uniqueID // same as above
}] // items is an array with nested objects.Each object shoud store the info for each event. So: number of objects inside 'items' = number of events.The same info of each event should be further passed to the screens where the single event is viewed, added to a cart.
})
``` -->
### Save Event
##### If
a user clicks on this event to save the event
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('save_event', {
value: price, // same as price in this specific case!
currency: 'EUR', //constant. always euro
event_date:'dd-mm-yy', // Date of the event as shown to users
event_name: 'EventName' // Replace with the actual event name i.e 'Tour Delftse Poort'
});
```
### View Event
##### If
a user viewes/ event page is loaded on the (the screen like the one above is shown)
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('view_event', {
value: price, // same as price in this specific case!
currency: 'EUR', //constant. always euro
event_date:'dd-mm-yy', // Date of the event as shown to users
event_name: 'EventName' // Replace with the actual event name i.e 'Tour Delftse Poort'
});
```https://hackmd.io/new
### Get Ticket
##### If
a user clicks on the button 'Get ticekts' on the event page
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('button_click', {
value: price,
currency: 'EUR',
button_text: 'Get tickets',
button_class: 'Events',
event_date:'dd-mm-yy', // Date of the event as shown to users
event_name: 'EventName' // Replace with the actual event name i.e 'Tour Delftse Poort'
});
```
### Event registration
##### If
after a user registers for an event, the count of 'attending' people increases. The moment it happens when the user comes back to the app
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().log('event_registration', ({ // Purcase/GenerateLead/JoinGroup/ Custom event??//¡¡TBD!!
value: price, // same as price in this specific case!
currency: 'EUR', //constant. always euro
button_class: 'Events',
event_date:'dd-mm-yy', // Date of the event as shown to users
event_name: 'EventName', // Replace with the actual event name i.e 'Tour Delftse Poort'
event_attending: numberOfAttendees, // the number shown in UI to the user
event_spots_left: numberOfSpotsLeft // the number shown in UI to the user
});
```
## 5. Map
### View Floor info
##### If
every time a user loads a screen with the floor information on it
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('view_floor', {
floor_name: "floorName", // the selected floor area above. i.e Ground floor, Third Floor etc
floor_view: "view_option" // the value is either 'Map' or List. Depending on the way users prefer to view the section
})
```
### View of the floor location info
##### If
a user views any location name presented on floor plan / list (open the location as in the second screenshoot)
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logViewItem({
floor_name: "floorName", // same as above. Popualted with the values of the previos view_floor event
floor_view: "view_option", // same as above. Popualted with the values of the previos view_floor event
items:{
item_name: 'EventName', // the name of the selected location from the floor map.
item_id: uniqueID, // unique identifier per event
item_category: 'Map', // Constnat. Signifies that this event name is related to an item which is from 'map section' of the app
}
});
```
### Click to Action(CTA) on a button on a location page
##### If
a user clicks on a cta button on the location page (i.e buttons like 'click', 'More information', 'Order Here!' etc)
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent( 'button_click', {
floor_name: "floorName", // same as above. Popualted with the values of the previos view_floor event
floor_view: "view_option", // same as above. Popualted with the values of the previos view_floor event,
button_text: 'buttonText', // what is written on the button. I.e 'More information', 'Order here' etc.
button_id: uniqueID, //id of each button. If impossible to add, drop it.
button_class: 'Map', // constsnt here. This button belogs to the 'Map' section
button_location: 'Name of screen / viewed location' // i.e 'Restaurant', 'Meeting Rooms'.
});
```
## 6. Services
> Now,let's work with all the events that can happen under "Services" section
### Click on the page with TOS / any (coming) paid services
##### If
a user views the page with items that can be purcahsed (primarily 'Order' section)
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('button_click', {
button_text: 'buttonText', // what is written on the button. I.e 'Coffee', 'Shoe maintainance' etc.
button_id: uniqueID, //id of each button
button_class: 'Services' // constnat here. This button is located under 'Services' section.
});
```
### View of the page only with TOS / paid services
##### If
a user views the page with items that can be purcahsed (so far only 'Order' section)
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logViewItemList({
item_list_id: uniqueID,
item_list_name: 'Page Title', // i.e 'Dry cleaning & laundry' that shows where the event took place
items:[{ // arrray with nested objects for all products.
item_name: 'Service/product name', // i.e Blouse/ shirts
item_id: uniqueID, // unique identifier per event
price: price, // shown price of each service
item_category: 'category name', // the associated category of the product. If you don't popualte already one from backend, it can be then the taken from the page title
item_options: TRUE/FALSE // here it should be always FALSE. In the add_to_cart event, I explain how to popualte it further
}]
});
```
### View Details of services
##### If
a user clicks on the icon AND views extra info about the service/ product
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logViewItem({
currency:'EUR', // always EUR
value: price, // value of the product
items:{
item_list_id: uniqueID,
item_list_name: 'Page Title', // i.e 'Dry cleaning & laundry' that shows where the event took place
item_name: 'Produt Name', //
item_id: uniqueID, // unique identifier per event
price: price, // shown price of each service
item_category: 'category name', // the associated category of the product
}
});
```
### Adding a product to cart OR increasing a product quantity in the cart, including adding 'options'
##### If
a user clicks on the '+' icon first and then click on 'Add to Basket'
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logAddToCart({
currency:'EUR', // always EUR
value: price, // value of the product
items:[{ // it is an array of objects. Below is explained why
item_list_id: uniqueID,
item_list_name: 'Page Title' / 'options',// detais under WHEREBY
item_name: 'Produt Name',
item_id: uniqueID,
price: price,
item_category: 'category name', // so for 3 categories possilbe only: "coffee", "shoe maintainance","dry cleaning & laundry"
}]
});
```
##### Whereby
* IF a user doesn't add 'options' to the main product --> just capture one object with all the info under 'items' array
* IF a user adds 'options' to the main product --> 1st object: same as above i.e product info; all the following objects: info about 'options' product.
*How to populate? All the info regarding 'options' choice(s) should be popualted in the same way as the main item. I.e item_id, price, category etc
* Caveat!, we will use 'item_list_name' parameter to differentiate between the products that came from the main list and from 'options'
* item_list_name:'Page Title' --> for a regular prodcut from ViemItemList
* item_list_name:'options' --> constant value of 'options'. If the product was added as 'options'
*** ¡ The same logic will apply to all of the following e-commerce pages!**
#### Code example
##### If
a cart looks in this type of way (2 produdcts added with 1 or more options)
##### THEN
the datalayer should be populated in this way
#### React Native
```javascript=
// first, data layer push after choosing 1st product with options'
analytics().logAddToCart({
currency:'EUR',
value: 84.90, // total of product + all options
items:[{// object for the main product
item_list_id: 12334,
item_list_name: 'Shoe Maintenance',
item_name: 'Leather soles',
item_id: 12334,
price: 49.95,
item_category: 'Shoe Maintenance'
},
{// object for 'options'
item_list_id: 4321,
item_list_name: 'Options',
item_name: 'Polish shoes',
item_id: 4321,
price: 0.00,
item_category: 'Shoe Maintenance'
},
{// another object for 'options'
item_list_id: 4321,
item_list_name: 'Options',
item_name: 'Cedar shoe trees',
item_id: 4321,
price: 34.95,
item_category: 'Shoe Maintenance'
}
] // end of all items data associated with first product added to the basket
});
// second, data layer push after choosing 2d product with 'options'
analytics().logAddToCart({
currency:'EUR',
value: 21.95, // total of product + all options
items:[{// object for the main product
item_list_id: 123345,
item_list_name: 'Shoe Maintenance',
item_name: 'deep cleaning and polish',
item_id: 123345,
price: 16.95,
item_category: 'Shoe Maintenance'
},
{// object for 'options'
item_list_id: 43210,
item_list_name: 'Options',
item_name: 'New shoe laces',
item_id: 43210,
price: 5.00,
item_category: 'Shoe Maintenance'
}
] // end of all items data associated with second product added to the basket
});
```
### Remove a product from the cart
##### If
a user clicks on the '-' icon on plp OR on the 'x' sign during checkout
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logRemoveFromCart({
currency:'EUR', // always EUR
value: price, // value of the product
items:[{
item_list_id: uniqueID,
item_list_name: 'Page Title' / 'options',
item_name: 'Produt Name',
item_id: uniqueID,
price: price,
item_category: 'category name', // so for 3 categories possilbe only: "coffee", "shoe maintainance","dry cleaning & laundry"
});
```
##### Whereby
* IF prodcut deletion involved a whole product with 'options' OR only opytions OR only the main product, popualte the 'itesms' array in the following way as explained above
### Finalize your order
##### If
a user opens the screen to check out
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logBeginCheckout({
currency:'EUR', // always EUR
value: finalValue, // Value = Price*quantity - discount/coupons applied.
items:[{
item_list_id: uniqueID,
item_list_name:'Page Title'/ 'options',
item_name: 'Produt Name',
item_id: uniqueID,
price: price,
item_category: 'category name'
}]
});
```
### Add Coupon to the purchase
##### If
a user sucesfully addedd coupon to the checkout process
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('Add coupon', {
currency: 'EUR', // always EUR
coupon_value: finalValue, // Value = Price*quantity - discount/ coupons.
coupon_name:'insertedCoupon'// string
});
```
### Sucesfull purchase
##### If
a user succesfully purchases the service (regardless of whether you pay in app or not)
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logPurchase({
currency: 'EUR', // always EUR
value: finalValue, // Value = Price*quantity - discount/ coupons.
transaction_id: uniqueID,
coupon:'CouponString'|'', // if users did not add it, then add an emprty string.
coupon_value: finalValue, // add the value here. It should be used to calcucate the Value in the field above
items:[{
item_list_id: uniqueID,
item_list_name:'Page Title'/ 'options',
item_name: 'Produt Name',
item_id: uniqueID,
price: price,
item_category: 'category name'
}]
});
```
### Abandoned cart
##### If
a user closes the product listed page with of the services AND users 'discard changes' == erasing all the cart
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('Abandoned_cart',{
currency: 'EUR', // fixed since we have no other ones
value: finalValue, // Value = Price*quantity - discount/ coupons.
items:[{
item_list_id: uniqueID,
item_list_name:'Page Title'/ 'options',
item_name: 'Produt Name',
item_id: uniqueID,
price: price,
item_category: 'category name'
}]
});
```
## 7. Loyalty cards
### Option 1 - Earning a loyalty point. Preffered!
Could you tell me Mahir please whether option 1 or 2 is easier for you to implement? I suspect it is 'Option 1'
##### If
The purchase event happens AND the purhcase event involved the products with the 'stamp'
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('loyalty_point_earned',{
loyalty_card: "Name of the loyalty card", // I.e "Healthy June" or "Tea January"
//🆕 Parameters are added below❗️
card_id: idValue, // unique id assigned for each card!
current_balance: balanceValue, // shows how many points a user has AFTER the purchase. The screenshot above shows which value from UX to send.
offline_purchase: TRUE/FALSE // send TRUE value when it is offline purchaese; false otherwise!
});
```
### Option 2 - Earning a loyalty point
##### If
a user purchases the product (regular 'purchase' event from the ecommerce happens) AND that product has '+1 Stamp'badge
##### OR an altenative case:
a user scanns the QR code in-person // let'd discuss if it is possible to track!
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('loyalty_point_earned',{
loyalty_card: "Name of the loyalty card" // I.e "Healthy June" or "Tea January"
});
```
### Spending loyalty points to purchase a product
##### If
a user purchases the product AND the user used loyalty points for it.
##### Then
the following dataLayer has to be filled:
#### React Native
```javascript=
analytics().logEvent('loyalty_point_claim',{
// here push literall the same array from the corrspdoning purchase event!
loyalty_card: "Name of the loyalty card", // I.e "Healthy June" or "Tea January"
// ❗️HERE USED TO BE items array - let's try to have less elements without it
item_name: 'Produt Name',
item_id: uniqueID,
price: price,
item_category: 'category name',
item_loyalty_card, // literally the same name as under 'loyalty_card' varialbe. Due to the reporting scoped of GA4 I need to have it twice🤷♀️
//🆕 Parameters are added below❗️
card_id: idValue // same as for 'loyalty_point_earned'
});
```
Google Drive
Gist
Clipboard
Sign in with Wallet
