A practical tutorial of using React Hooks, Custom Hooks and Context to add a new feature *"keyboard shortcuts"* to the classic Todo App teaching exercise.

### New Feature
- **Product Brief:** Keyboard shortcut keys to change filter display of todolist results ("a" -> Show All, "d" -> Show Done, "n" -> Show Not Doing)
- **How?** Use React Custom Hooks to listen for key presses and dispatch changes to state

### Gotchas
- **Product Brief:** Disable shortcut keys when user is typing inside input text fields (e.g. when creating or editing todo names)
- **How?** Use React Context to track global state of whenever a user has focus in an input text field

[See live demo](https://mannhowietodoapp2.surge.sh/) and [previous blog](https://mannhowie.com/react-and-redux-a-visual-explanation) for a visual explanation of React.

## 1. What are Hooks
Hooks are reusuable functions for your React app when you want to share logic that fetches and updates state, listens for changes in user and window events or handles authentication. The two built-in hooks that most custom hooks will build atop are `useState` and `useEffect`.

### useState
useState built-in hook is used to read and write values to component state. It takes an initial default value and returns an array with two elements. The first is the current value of the state and the second is a state setter function that updates the current value. 

```javascript
// useState example of a simple counter component
import React from 'react'

export default function Counter() {
  let initialState = 0
  let [count, setCount] = React.useState(initialState);

  let handleIncrement = () => setCount(count + 1)

  let handleReset = () => setCount(0);

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}
```

### useEffect
useEffect built-in hook manages the component lifecycle and side-effects of components. It is used to fetch and update data, listen for changes to state, register and deregister event listeners and clean up components.

It takes two arguments, the first a callback function and the second an array of state values it will listen for changes before executing the callback function.

```javascript
// useEffect example to fetch and persist between UI state and localStorage
import React from 'react'

export default function Counter() {
  // initial value last saved localstorage if exists else 0
  let initialState = JSON.parse(localStorage.getItem('count') || 0)

  let [count, setCount] = React.useState(initialState);

  let handleIncrement = () => setCount(count + 1)

  let handleReset = () => setCount(0);

  // useEffect listen for changes to count and persist state change to localStorage
  React.useEffect(() => {
    localStorage.setItem('count', JSON.stringify(count))
  },[count])

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}
```

## 2. Our First Custom Hook
To implement our new shortcut key feature we will create two custom hooks:
1. `useKeyPress`: to register and deregister window event listeners for `keydown` and `keyup` of target keys
2. `useFilterKeyPress`: will use our useKeyPress custom hook to register specific keys and dispatch filter events to update our filter view

### useKeyPress
Our first custom hook useKeyPress takes a single argument `targetKey` (e.g. keyboard letter "a") and returns an updated useState current value (a boolean) whenever a window keydown or keyup event is triggered.

We use the built-in useState hook to keep track of whether the targetKey has been pressed `keyPressed` which returns a boolean.

Our simple handlers check whether the pressed key matches the targetKey and returns either true or false.

We use the built-in useEffect hook to to register our window event listeners for the keydown and keyup events and register our handler callbacks. We also tidy up our event listeners by returning a function which removes the event listeners upon component tear down.

```javascript
// hooks/useKeyPress.js
import  React  from 'react';

export const useKeyPress = (targetKey) => {  
  const [keyPressed, setPressedKey] = React.useState(false)

  let handleKeyDown = (e) => {    
    if (e.key === targetKey) {
      setPressedKey(true)
    }
  }

  let handleKeyUp = (e) => {
    if (e.key === targetKey) {
      setPressedKey(false)
    }
  }

  React.useEffect(() => {
    window.addEventListener('keydown', handleKeyDown)
    window.addEventListener('keyup', handleKeyUp)

    return () => {
      window.removeEventListener('keydown', handleKeyDown)
      window.removeEventListener('keyup', handleKeyUp)
    }
  }, [])

  return keyPressed
}
```
### useFilterKeyPress
Our second custom hook useFilterKeyPress will use our previous custom hook `useKeyPress` to listen for key presses and will then dispatch events to update our parent component state. It takes a dispatch function as an argument from the parent app to dispatch changes to our parent reducer.

We first register our shortcut key presses ("a", "d", "n"). This will return a state boolean for each value and will update whenever a keydown or keyup event is triggered.

We use the useEffect hook to dispatch the relevant filter actions based on which key is pressed. It takes an array of values `[pressA, pressD, pressN]` which will trigger the functions inside the hook whenever those values change.

```javascript
// hooks/useFilterKeyPress.js

import React from 'react'
import {useKeyPress} from './useKeyPress'

export const useFilterKeyPress = (dispatch) => {
  const pressA = useKeyPress("a")
  const pressD = useKeyPress('d')
  const pressN = useKeyPress('n')

  // useEffect hook detect changes when input not in focus in keys above, if true dispatch filter change
  React.useEffect(() => {
    if (pressA) {
      dispatch({type: 'SHOW_ALL'})
    }
    if (pressD) {
      dispatch({type: 'SHOW_DONE'})
    }
    if (pressN) {
      dispatch({type:'SHOW_NOT_DONE'})
    }
  },[pressA, pressD, pressN])
}
```

## 3. React Context API
The React Context API allows us to share global state amongst parent and children components without passing them through intermediaries (known as prop drilling).

In our product brief we are made aware of a gotcha with our shortcut keys. We need to disable the shortcut keys if a user is entering text inside an input text field. This is to prevent the user from unintentionally triggering the filter updates when simply entering text.

As our application scales there is likely to be future input text fields which may be nested deeply as children components.

This is a great use case of the React Context API for us to keep track of whenever a user has `focus` inside an input text field.

### Create our new context
First we create our context object which we will import across parent and children components. We will use this context as a way to track global state of whether an input text field is in focus or not.
```javascript
//context/contextInput.js
import React from 'react'

const ContextInput = React.createContext()

export default ContextInput
```

### Update useFilterKeyPress
Next we must update our custom hook `useFilterKeyPress` to not trigger the filter actions if an input text field is in focus.

We create a new boolean state `isInputFocused` and a setter `setIsInputFocused` which will be based on our `ContextInput` to track whether an input text field is in focus.

We udate our useEffect code to ensure the actions are only dispatched if input is not in focus. And we return the value of `[isInputFocused, setIsInputFocused]` to allow the state to be read and updated. 

```javascript
// hooks/useFilterKeyPress.js

import React from 'react'
import {useKeyPress} from './useKeyPress'

export const useFilterKeyPress = (dispatch) => {
  const pressA = useKeyPress("a")
  const pressD = useKeyPress('d')
  const pressN = useKeyPress('n')
  // global state to detect if text input is in focus
  // within input we will set as true if input onFocus and false when input onBlur (e.g. toggles when input out of focus)
  const [isInputFocused, setIsInputFocused] = React.useState(false)

  // useEffect hook detect changes when input not in focus in keys above, if true dispatch filter change
  React.useEffect(() => {
    if (!isInputFocused) {
      if (pressA) {
        dispatch({type: 'SHOW_ALL'})
      }
      if (pressD) {
        dispatch({type: 'SHOW_DONE'})
      }
      if (pressN) {
        dispatch({type:'SHOW_NOT_DONE'})
      }
    }
  },[pressA, pressD, pressN, isInputFocused])

  return [isInputFocused, setIsInputFocused]
}
```
### Use context and custom hook in our main App
We first use our custom hook `useFilterKeyPress` which returns a value and setter to determine whether any input field is in focus. We pass it our dispatch handler which will allow the hook to update the App's parent state to change filter display options.
```javascript
  import {useFilterKeyPress} from '../hooks/useFilterKeyPress'
  // Custom hook to filter shortcut keypress
  const [isInputFocused, setIsInputFocused] = useFilterKeyPress(dispatch)
```
We then use our `ContextInput` and apply its Provider model which wraps it as a parent component and gives all children component within it access to its context values. We pass it a value property being our state values and setters `isInputFocused` and `setIsInputFocused` which will allow children components to update the state.

The two children components that will use it now include the `<NewTodoForm>` and the `<EditTodoForm>` which is a deeply nested child of the `<TodoList>`. This is the primary benefit of using React Context API, we no longer have to pass handler functions to multiple intermediaries which exposes us to code duplication and error.

```javascript
import {useFilterKeyPress} from '../hooks/useFilterKeyPress'
import ContextInput from '../context/contextInput'

const [isInputFocused, setIsInputFocused] = useFilterKeyPress(dispatch)
return (
    <div>
      <h1>TODOAPP</h1>

      {/* Using React Context for sharing global isInputFocused variable to detect if any text input is focus */}
      <ContextInput.Provider value={[isInputFocused, setIsInputFocused]}>
        <NewTodoForm handleNewTodo={handleNewTodo} />

        <Filter filter={filter} handleFilter={handleFilter}/>

        <TodoList 
          todos={todos}
          editing={editing}
          handleMarkDone={handleMarkDone}
          handleMarkEdit={handleMarkEdit}
          handleDeleteTodo={handleDeleteTodo}
          handleEditTodo={handleEditTodo}
          handleMarkEditUndo={handleMarkEditUndo}
          filter={filter}
        />

      </ContextInput.Provider>
    </div>
```

Final App.js altogether
```javascript
//src/components/App.js

import React from 'react';
import {useLocalStorage} from '../hooks/useLocalStorage'
import {useFilterKeyPress} from '../hooks/useFilterKeyPress'
import ContextInput from '../context/contextInput'

import reducer from '../reducers/index'
import NewTodoForm from './NewTodoForm'
import TodoList from './TodoList'
import Filter from './Filter'

function App() {
  let initialState = reducer(undefined, {})

  // custom hook useLocalStorage
  const [state, setState] = useLocalStorage(initialState, 'state')

  // reducer implementation of dispatch
  const dispatch = (action) => {
    setState(prevState => reducer(prevState, action))
  }

  // State handlers
  let handleMarkDone = (id) => {
    dispatch({type: 'MARK_DONE_TODO', id})
  }
  let handleMarkEdit = (id) => {
    dispatch({type: 'MARK_EDIT_TODO', id})
  }
  let handleMarkEditUndo = (id) => {
    dispatch({type: 'MARK_EDIT_UNDO_TODO', id})
  }
  let handleNewTodo = (content) => {
    dispatch({type: 'ADD_TODO', content})
    dispatch({type: 'SHOW_ALL'})
  }
  let handleEditTodo = ({id, content, done}) => {
    dispatch({type: 'EDIT_TODO', id, content, done})
  }
  let handleDeleteTodo = (id) => {
    dispatch({type: 'DELETE_TODO', id})
  }
  let handleFilter = (e) => {
    let filter = e.target.value 
    dispatch({type: filter})
  }

  // State values from reducers
  let {todo, visibility} = state
  let {todos, editing} = todo
  let {filter} = visibility

  // Custom hook to filter shortcut keypress
  const [isInputFocused, setIsInputFocused] = useFilterKeyPress(dispatch)

  return (
    <div>
      <h1>TODOAPP</h1>

      {/* Using React Context for sharing global isInputFocused variable to detect if any text input is focus */}
      <ContextInput.Provider value={[isInputFocused, setIsInputFocused]}>
        <NewTodoForm handleNewTodo={handleNewTodo} />

        <Filter filter={filter} handleFilter={handleFilter}/>

        <TodoList 
          todos={todos}
          editing={editing}
          handleMarkDone={handleMarkDone}
          handleMarkEdit={handleMarkEdit}
          handleDeleteTodo={handleDeleteTodo}
          handleEditTodo={handleEditTodo}
          handleMarkEditUndo={handleMarkEditUndo}
          filter={filter}
        />

      </ContextInput.Provider>
    </div>
  );

}

export default App;
```

### Use and update context
Finally with our children components we can now access our `ContextInput` and update its state based on whether an input field is in `focus` or not.

To do this we import the context and use React's context hook `useContext` which takes the `ContextInput` object as an argument and returns the values of the parent Provider, in this case our setter function `setIsInputFocused`. In our example we don't require the current value as we are only interested in updating the value.

Then we add two event callback functions on our input text field `onFocus` and `onBlur` to update our `IsInputFocused`value. We set it as true when `onFocus` and  false when `onBlur` to reset it.

As this value is now shared inside the global `ContextInput` object, the parent App component can now access the latest value of `IsInputFocused` and not trigger any filter actions if this value is true.

```javascript
// src/components/NewTodoForm.js
import React from 'react'
import ContextInput from '../context/contextInput'

const NewTodoForm = (props) => {
  const [content, setContent] = React.useState('')
  const [,setIsInputFocused] = React.useContext(ContextInput)

  let handleChange = (e) => {
    setContent(e.target.value)
  }
  let handleSubmit = (e) => {
    e.preventDefault()
    if (content.trim() === '') return
    props.handleNewTodo(content)
    setContent('')
  }

  return (
    <form onSubmit={handleSubmit} style={{border: '1px solid rebeccapurple'}}>
      <p><i style={{color: 'rebeccapurple'}}>NewTodoForm</i></p>
      <input type="text" name="content" value={content} onChange={handleChange} placeholder="Add new todo" onBlur={() => setIsInputFocused(false)} onFocus={() => setIsInputFocused(true)}/>
    </form>
  )
}

export default NewTodoForm
```

Similarly we follow the same pattern for the `EditTodoForm` which is nested multiple levels deep within `TodoList` component without needing to prop drill across multiple components.

```javascript
// src/components/EditTodoForm
import React from 'react'
import ContextInput from '../context/contextInput'

const EditTodoForm = (props) => {
  const [content, setContent] = React.useState(props.content)
  const [done, setDone] = React.useState(props.done)
  // ContextAPI
  const [,setIsInputFocused] = React.useContext(ContextInput)

  let handleChange = (e) => {
    setContent(e.target.value)
  }
  let handleChecked = (e) => {
    setDone(!done)
  }
  let handleSubmit = (e) => {
    e.preventDefault()

    props.handleEditTodo({
      id: props.id,
      content: content,
      done: done
    })
  }
  return (
    <div style={{border: '1px solid blue'}}>
      <i style={{color: 'blue'}}>EditTodoForm</i>
      <form onSubmit={handleSubmit}>
        <input type="text" name="content" value={content} onChange={handleChange} onBlur={() => setIsInputFocused(false)} onFocus={() => setIsInputFocused(true)} />
        <input type="checkbox" name="done" checked={done} onChange={handleChecked}/>
        <input type="submit" value="Update"/>
      </form>
      <button onClick={() => props.handleMarkEditUndo(props.id)}>Undo Edit</button>
    </div>

  )
}

export default EditTodoForm
```

[Click here to see the full github repo](https://github.com/howardmann/react-projects/tree/master/todoapp)

Practical tutorial of using React Hooks, Custom Hooks and Context API when adding new features to your web app. Adding keyboard shortcut features to the classic Todo App teaching exercise.


Learn React - Hooks and Context

Exchange Traded Funds (ETFs) are listed funds that commonly track a basket of securities linked to major indices. Most ETFs are passive equity index funds that track major stock market indices. The world’s top 5 ETFs represent over USD1.5 trillion in assets under management:

| ETF Fund | Assets USDbn | Index |
| ---------- | ----- | ---------- |
| 1. State Street  SPDR S&P 500 ETF | 416 | S&P 500 |
| 2. Blackrock  iShares Core S&P 500 ETF | 335 | S&P 500 |
| 3. Vanguard S&P 500 ETF | 293 | S&P 500 |
| 4. Vanguard Total Stock Market ETF | 292 | CRSP US Total Market Index |
| 5. Invesco QQQ Trust | 197 | NASDAQ 100 |

Source: [ETF Database](https://etfdb.com/compare/market-cap/) 

This article explains why people invest in ETFs, how they work, why they trade close to Net Asset Value and how they differ vs actively managed mutual funds.
1. [Why Invest in ETFs](#why)
2. [How do ETFs work](#how)
3. [ETF Price vs NAV](#nav)
4. [ETFs vs Managed Funds](#vs)

## <a name="why"></a>1. Why Invest in ETFs?
People are attracted to investing in ETFs as a low cost way of gaining exposure to the entire market economy vs picking individual stocks.

For long term investors, individual stock picking is a bet that a company will remain great over the long run. This is not an easy task, as famous value investor Mohnish Pabrai says “Capitalism is Brutal”. 

Consider that today, 2/3rds of companies in the Dow Jones Industrial Average were not represented 30 years ago, and only one company still remains when looking back 45 years (Procter and Gamble) [source](https://en.m.wikipedia.org/wiki/Historical_components_of_the_Dow_Jones_Industrial_Average). 

A passive investment in an index such as the S&P 500 is a bet that the top 500 companies listed on US exchanges combined will be more valuable in the future than they are today. 

Over the past 10 years, the S&P 500 index combined market cap has grown from ~US$12 trillion to +US$40 trillion achieving an annualised return of +12%. This period has been characterized by major disruption with the technology sector displacing the financial and commodity sector as the key drivers of growth.

__S&P 500 Index 10 Year Performance__
![S&P500](//images.ctfassets.net/vwq10xzbe6iz/2BjqItN0HZGQ7fGNgmxkq6/393c0e11cc4c484c15e9a411038a6bb3/sp500.png)
Source: [SPGlobal](https://www.spglobal.com/spdji/en/indices/equity/sp-500/#overview)

Whether the next 10-20 years is driven by AI, robotics or even the agriculture sector should not matter for passive index investors, so long as the overall economy and company earnings grow.

## <a name="how"></a>2. How do ETFs work?
To understand how ETFs are created imagine we are establishing an equity index ETF which will track the performance of the top 5 largest US listed companies (a fictional S&P Big 5 Index).

The creation of an ETF involves 3 parties:
1. ETF Sponsor (eg Vanguard)
2. Participating Dealer (eg Citigroup)
3. Individual Investors (eg retail investors)

__ETF Creation and Redemption Process__
![etf_creation](//images.ctfassets.net/vwq10xzbe6iz/3OTJ4z6jbGk1Qoc8cGSo50/68e14fe987b5a5f34c61b98919ea5c4d/etf_process.png)
Source: [Vanguard](https://www.vanguard.com.hk/documents/etf-how-etfs-work-en.pdf)

__Stage 1__

We start with our ETF Sponsor Vanguard who begins marketing the idea of an S&P Big 5 ETF. They engage Citigroup as a Participating Dealer to go out to their investors to gauge interest for this new ETF.

Investors express strong demand in the fund and Citigroup sees a business opportunity to act as a broker and trade these ETFs for their investor clients to earn a commission.

__Stage 2__

Citigroup goes into the stock market and starts buying up parcels of shares of the S&P Big 5 constituents in the same weight as the index on behalf of their investor clients.

They then take these newly acquired shares to the ETF Sponsor Vanguard and exchange them for a parcel of ETF shares. Vanguard having received these physical shares creates new parcels of ETF shares to give to Citigroup. This is known as the creation process in the primary market for ETFs.

__Stage 3__

Citigroup now sells these newly created ETF shares to their investor clients via the stock exchange who want the convenience of a single ETF share that has the underlying holding of the index shares. This happens in the secondary market for ETFs (being the listed exchange).

Investors can then buy and sell these newly created ETFs on the secondary market. As demand outstrips supply, Citigroup can once again buy the underlying shares and go into the primary market and request more ETF shares be created in exchange for the acquired shares.

In this way, ETF shares on issue can continue growing without the need for the fund to engage in costly capital raising activities like other managed/ mutual funds or listed investment companies.

## <a name="nav"></a>3. ETF Share Price vs NAV
ETF share prices trade very closely to their underlying Net Asset Value (NAV). The NAV is the value of the underlying shares less the fund’s expenses. This occurs because of arbitrage in the primary and secondary market.

Imagine if the ETF share price were to trade at a 50% discount to its NAV. A participating dealer could buy up the ETF shares and take them to the fund and ask for them to be redeemed for their underlying shares. The ETF Sponsor would accept and then cancel the ETF shares and then transfer the underlying shares to the Participating Dealer. The dealer would then sell these shares at market value and pocket the 50 % profit. This would continue bidding up the ETF share price until it reached close to NAV.

Similarly if the ETF share price was trading at a 20% premium to NAV. The Participating Dealer would buy the underlying shares in the market, exchange them for newly created ETF shares in the primary market and then sell them in the secondary market to pocket a 20% profit. They would continue doing this and selling ETF shares until the price fell close to NAV.

## <a name="vs"></a>3. ETF vs Managed Funds?
The primary difference between ETFs and Managed Funds are that ETFs are typically a low cost passive index play with high liquidity vs Managed Funds being higher cost active stock picking play with lower liquidity.

ETF fee structures can be as low as a fixed annual management fee of 0.2% vs Managed Funds being 1.0% annual management fee plus 20% performance fee above market returns.

ETFs are able to achieve a lower fee structure as they have no active internal or third party headcount focused on investment analysis and there is no active trading or capital raising function (that is done via Participating Dealer). 

Managed Funds are also often close-ended and unlisted meaning during downturns investor redemptions can negatively impact returns as they are forced to sell underlying shares to realise losses. This also puts upward pressure on expense ratios as assets under management decline.


1) Why Invest in ETFs; 2) How ETFs work; 3) ETF Share Price vs NAV; 4) ETF vs Actively Managed Funds

Why Invest in Exchange Traded Funds (ETFs)? 

Product, marketing and sales teams can learn to run growth experiments to validate new strategies in the real world before incurring significant resource investment.
![guess_vs_experiment](//images.ctfassets.net/vwq10xzbe6iz/40uy9hD2VDsloevHEODX5m/7231e7f18856fa8c00e0f9eaef7347ec/guess_vs_experiment.png)

[Confirmation bias](https://mannhowie.com/cognitive-bias#confirmation) is a psychological tendency where we seek information that validates our existing beliefs as well as avoiding contradictory information. This bias often causes teams to waste resources on initiatives that validate existing views but are ineffective in the real world.

This article explains the 4 key steps of a growth experiment and a practical example of how you can run your own growth experiment quickly and cost effectively:
1. [Hypothesis](#hypothesis)
2. [Trigger](#trigger)
3. [Action](#action)
4. [Measure](#measure)

Imagine we are in the product marketing team of a B2B software startup that provides a tool for capturing customer complaints called Capturo.

## <a name="hypothesis"></a>1. Hypothesis
Set a hypothesis early. Start by identifying a customer struggle and business outcome of what you are trying to achieve. Form your own explanation as to what is causing the customer struggle and come up with a solution as to what could ease that struggle. [User interviews](https://mannhowie.com/user-interviews) are an effective tool at this stage if you have the time.

It is important at this stage to avoid the pitfall of falling in love with your explanation and solution. Focusing on the struggle will allow you to run a new growth experiment if the current one fails.

### __Example Hypothesis__
__Struggle:__ Our new users are observed to create a lower number of customer complaint forms on the platform than our existing users which is leading to lower product engagement and complaints captured.

__Explanation:__ We suspect two core reasons: 1) New users are unfamiliar with the types of questions to ask to gather complaints; 2) New users lack the time or know-how to digitise their existing questions into our platform.

__Solution:__ Our proposed solution will address the first explanation of new users not knowing what questions to ask. We will research and propose the most frequently asked questions to address customer complaints by service type (e.g. contact centre, restaurant, consultation).

__Hypothesis:__
> “Teaching new users the most commonly asked customer complaint questions relevant to their business will help them create more forms on the platform and gather more customer complaints”

## <a name="trigger"></a>2. Trigger
Establish a trigger point to communicate with your customer around their struggle and your proposed solution. The most effective mediums are email and calling customers directly. In-app banners, notifications and user flows are expensive if you do not already have the infrastructure in place. As this is a growth experiment we do not need to worry about solutions that don’t scale yet. 

The three most important components of a trigger:
1. __Audience:__ identify your target audience. Start with bigger groups, segmenting at this stage will be time consuming and take longer to gather results
2. __Message:__ keep consistent with your original hypothesis. There is no need to A/B test on a small scale but avoid message variation overkill
3. __Timing:__ identify the best time to contact your users to get their attention. Be sparing for when you trigger again due to lack of response

### __Example Trigger__
__Audience:__ our growth experiment will be to email new users who have created two forms or less in the platform from their first three months of joining

__Message:__ “Real examples of customer survey questions [Dental Practices] are using in Capturo” or “Top 6 customer survey questions [Dental Practices] ask in Capturo”

__Timing:__ Send when admin users are most active on the platform (for example mid-week mornings)

## <a name="action"></a>3. Action
Establish an action that you can measure based on the trigger. This can include opening a link to an article, registering interest via a form, logging in to the platform to perform an activity, emailing or calling back to respond.

Without creating an action it will be difficult to measure the success of your growth experiment.

### __Example Action__
Create a webpage link in the email which takes a user to the top customer survey questions.
E.g email link.
“View top 6 customer survey question examples”

## <a name="measure"></a>4. Measure
Measure and track the performance of the trigger and action stages. Start simple and use a spreadsheet to track key results. Free or cheap email tracking plug-ins are an effective way of tracking email open and click-through rates.

Once you feel you have gathered enough insight (can take a few weeks) assess the results and determine if your hypothesis was correct. Within the same experiment you can go back and modify the trigger and action to gather more data if needed.

### Example Measure
Create a spreadsheet with columns to track the following:
User contact email and id
- Email message sent
- Date and time sent
- Date and time opened email (use email tracking tools)
- Date and time opened link (use email tracking tools)
- Already sent (Y/N)
- Created a new template (Y/N) (check manually each week)

After measuring the performance assess engagement metrics for example:
- Total users contacted
- Average contact count per user
- % email open rate
- % click through rate
- % users creating new template

__Happy case__
If the % click through rate and % users creating a new template is good we have quickly validated that knowing the right questions to ask can help boost form creation. We now have an improved business case for investing more resources in-app to build onboarding tours in the form creation stage.

__Sad case__
If the % open rate is poor after adjusting for message and timing then the solution of our hypothesis is likely incorrect. We can go back to our original hypothesis and form a solution for our second explanation (e.g. already know what questions to ask but don’t have the time to create a new form). 


4 steps to a successful growth experiment: 1) Hypothesis; 2) Trigger; 3) Action; 4) Measure. Practical example for how teams can run growth experiments quickly and cheaply.

Howie Mann
Startup & Investing Advice
About Articles Stocks

About me

Recent Articles

Learn React - Hooks and Context

Why Invest in Exchange Traded Funds (ETFs)?

How to Run a Growth Experiment - Learn the 4 Steps

Howie MannStartup & Investing AdviceAboutArticlesStocks

About me

Recent Articles

Learn React - Hooks and Context

Why Invest in Exchange Traded Funds (ETFs)?

How to Run a Growth Experiment - Learn the 4 Steps

Howie Mann
Startup & Investing Advice
About Articles Stocks