BrowserRouter, referral tracking, Mixpanel

[adamkendis]

Closes #609
Closes #611
Closes #626

BrowserRouter

• Swapped out HashRouter for BrowserRouter to remove the # from the url. Pretty sure this won't break any front end routing but will need to check when we push the latest dev build to S3.
• Added custom error response to Cloudfront. On 404/403, it should instead respond with our index.html and a 200 status code.

Referral link tracking

• Implemented RouteChange component. This component renders nothing but calls a list of actions passed via props whenever the pathname changes. Actions are defined and registered in routeChangeActions.js. Anything we want to check for/fire off when the route changes can be added here.
• For referral code tracking, the handleReferralCode route change action looks for the referral query parameter in the url. If referral exists, it fires a Mixpanel event with the referral code and current path as properties. The current pathname is pushed into the router history for a clean url.

/?referral=REFERRALCODE  =>   /
/comparison?referral=REFERRALCODE   =>   /comparison
/about?referral=REFERRALCODE   =>   /about
/contact?referral=REFERRALCODE   =>   /contact

• Also added the google analytics script to index.html. Left it commented out until we push to the live site.

Mixpanel

Copy to your .env file.

MIXPANEL_ENABLED=-1
MIXPANEL_TOKEN_PROD=REDACTED
MIXPANEL_TOKEN_DEV=REDACTED

• -1 to disable Mixpanel, 1 to enable. If enabled, it'll swap between dev/prod tokens based on NODE_ENV so we're not polluting production data.
• Additional mixpanel methods should be added to Mixpanel.js. This avoids having to do dev checks everywhere the methods are called.

Events:

• Referral Link Used - triggered when user navigates to our site via url with referral code.

{
  'Referral code': string,
  Path: string (/, /comparison, /about, /contact),
}

• Request Query - triggered when user Submits complete filters in Map/Data Visualization.

 {
  'Time Frame': LAST_6_MONTHS,
  'Time Frame Custom Start': false or ISOString if CUSTOM_DATE_RANGE,
  'Time Frame Custom End': false or ISOString,
  'Time Frame Custom Span': false or integer (days),
  Councils: ['Atwater Village', 'Echo Park', ...],
  'NC Count': councils.length,
  Areas: ['East', 'Central 2', ...],
  'Areas Fully Selected': ['East'],
  'Request Types': ['Bulky Items', 'Single Streetlight', ...],
  $duration: decimal (seconds from Submit to all data received)
}

• Export Request - triggered when user Exports Map, single chart, or all charts in Map/Data Visualization.

 {
  'Page Area': Map or Data Visualizations or chart name,
  Filetype: PNG or PDF or CSV,
  path: /,
  ...properties from Request Query event
}

• Comparison Query - triggered when user Submits complete filter in Comparison Tool.

{ 
  'Time Frame': LAST_6_MONTHS,
  'Time Frame Custom Start': false or ISOString if CUSTOM_DATE_RANGE,
  'Time Frame Custom End': false or ISOString,
  'Time Frame Custom Span': false or int (days),
  'Chart Type': 'frequency',
  'Set1 District Type': 'nc',
  'Set1 Councils': ['Atwater Village', 'Echo Park', ...],
  'Set1 Areas': ['East', 'Central 2', ...],
  'Set1 Areas Fully Selected': ['East'],
  'Set2 District Type': 'cc',
  'Set2 Councils': ['Council District 1', 'Council District 2', ...],
  'Set2 Areas': [],
  'Set2 Areas Fully Selected': [],
  'Request Types': ['Bulky Items', 'Single Streetlight', ...],
  $duration: decimal (seconds from Submit to all data received)
} 

• Export Comparison - triggered when user Exports a chart in Comparison Tool.

 {
  'Page Area': chart name,
  Filetype: PNG or PDF or CSV,
  path: /comparison,
  ...properties from Comparison Query event
}

• About 311 - triggered when user navigates to /about

  • Up to date with dev branch
  • Branch name follows guidelines
  • All PR Status checks are successful
  • Peer reviewed and approved

Any questions? See the getting started guide

[jmensch1]

This is all looks real solid. I like the switch between the two environments.