https://github.com/emilydaykin/ab-testing

🎭 A NextJS web app that displays one of two versions/designs of the landing page (A or B) to the user. Tracks page views and click activity, and stores user information in localStorage.
https://github.com/emilydaykin/ab-testing

abtesting localstorage nextjs sass vercel

Last synced: about 1 month ago
JSON representation

🎭 A NextJS web app that displays one of two versions/designs of the landing page (A or B) to the user. Tracks page views and click activity, and stores user information in localStorage.

• Host: GitHub
• URL: https://github.com/emilydaykin/ab-testing
• Owner: emilydaykin
• Created: 2023-02-02T17:07:47.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-02T19:33:13.000Z (about 2 years ago)
• Last Synced: 2024-11-09T19:35:37.237Z (3 months ago)
• Topics: abtesting, localstorage, nextjs, sass, vercel
• Language: JavaScript
• Homepage:
• Size: 3.34 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# A/B Testing Challenge

## Acceptance Criteria

Implement the following logic while keeping the broader goal in mind:

1. A visitor sees only one variation (assigned randomly) when they land on the page.

2. The assigned variation doesn’t change after page reload.

3. Track a pageview via the `analytics-api.js` methods when a visitor lands on the page.

4. Track an event via the `analytics-api.js` methods when a visitor clicks on the “Sign up” button.

5. Every single pageview and click is tracked.

6. We want to determine a winning variation by comparing CTR (click-through rate) of clicks on the “Sign up” button. The CTR of a page is "number of clicks" divided by "number of page views". As a user can only effectively convert (sign up) once, the counts for the CTR computation need to be unique per user. This means a single user clicking ten times and reloading the page 5 times should only count towards one conversion. Make sure this is possible with the data you send and explain on a high level how.

## Delivery

### A/B Design:



  

  



### Implementation:

- NextJS, Sass (BEM), and Vercel were used to create, style and host this application.

- `localStorage`, `uuidv4` were used to differentiate between visitors, site versions, and track events (page view and sign-up click).

### Deployed application:

- [Link](https://ab-testing-blinkist-edaykin.vercel.app/)

- To play around with the logic, open the developer tools

  - Use the Console tab to view the API logs whenever the page is visited or revisited (refreshed), or the sign up button is clicked

  - Use the Application tab > Storage > Local Storage to see what gets saved to Local Storage. To simulate visiting the page as a new/different user, clear the local storage (delete all entries) then refresh the page.