Demo application for quantitative UX strategies: Split testing, feature toggling, analytics and UX optimizations
This demo shows a number of strategies for doing quantitative UX in the context of a React Progressive Web Application.
- Split testing: Netlify's split-testing capability to direct traffic to 2 or more branches
- Feature toggling: Split.io for toggling features on or off dynamically based on your own criteria
- Tag manager: Google Tag Manager to do version controlled rollouts of tracking, scripts, or behaviors
- Analytics: Google Analytics to gather data; this demo used some of the Enhanced Ecommerce functionality
- UX optimizations: Google Optimize to do smaller UX experiments/tweaks without needing to deploy code changes
- You need a Google account to use any of their services
- You need a Google Tag Manager account
- You need to activate/setup Google Optimize
- You need a property set up at Google Analytics to send/retrieve analytics data
- You need a Netlify account for split-testing
- You need a Split.io account for feature toggling
- You must provide the Google Tag Manager (GTM) account ID in
src/index.html
in the variableTAG_MANAGER_ID
as well as update the X's in the iframe src - You must provide the Google Analytics account ID inside of Google Tag Manager, if you want to get analytics data
- You must provide the Split.io account ID in
src/configuration/config.js
(updateSPLIT_IO_KEY
) - In order to follow along with the Netlify Split-testing steps, you should deploy your site there (easy way: just use the "Deploy to Netlify" button)
- Clone the repo
- Run
yarn
ornpm install
- Run
yarn dev
ornpm run dev
- Run
yarn build
ornpm run build
- NOTE: I am using the
cp
command from Mac/Linux, so you may need to replace the copying of _headers and _redirects somehow, on a non-Bash Windows setup (the files should normally be copied with the CopyWebpackPlugin, but this breaks the Service Worker!)
Below I will list the most important steps in setting up the services.
Google Tag Manager, as used by me here, has a fair bit of configuration. Make sure to not forget to set the GA variable, and remember to set your GA and Optimize configs.
Google Analytics configuration
Google Optimize configuration
Tags configuration
Triggers configuration
Typical event tag configuration
Given the correct ID and setup from GTM, GA should start outputting visualizations of your data. Since we are using Enhanced Ecommerce, there is additional data available under the Conversions > E-commerce
panel.
Given the correct ID and setup from GTM, Optimize should be able to be used.
Typical variant setup
Linking to Google Analytics and setting up test objective
To activate split-testing, just go to the Split Testing
panel. The branch feature/extras
will activate the "extras" (the option to buy Fuzzy Dice on the Product page).
My demo is basically to set up a simple split (display_purchase_incentive
) with three treatments (incentive_1
, incentive_2
, and off
) in the staging environment and creating a simple "wide" user segment called window_shoppers
. Logic in the app sets your user key as WINDOW_SHOPPER
who is a user in that segment, thus sending back one of the incentives.
Environments
Treatments
Settings
Segments