https://github.com/eyyminda/ab-analytics
Initial Steps towards a custom A/B Testing platform using data from Google Analytics.
https://github.com/eyyminda/ab-analytics
ab-testing expressjs google-analytics-4 google-cloud reactjs vite
Last synced: 2 months ago
JSON representation
Initial Steps towards a custom A/B Testing platform using data from Google Analytics.
- Host: GitHub
- URL: https://github.com/eyyminda/ab-analytics
- Owner: eyyMinda
- Created: 2023-08-23T10:34:07.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-13T08:28:46.000Z (almost 2 years ago)
- Last Synced: 2024-05-13T09:44:17.670Z (almost 2 years ago)
- Topics: ab-testing, expressjs, google-analytics-4, google-cloud, reactjs, vite
- Language: JavaScript
- Homepage: https://ab-analytics.vercel.app
- Size: 813 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite + Express
Minimal setup for a custom A/B testing application using Google Cloud and data from Google Analytics.
## Preview
## Usage
- Select a start date, end date, and metric from the form.
- Click the "Fetch" button to retrieve data from Google Analytics.
- The table will display the data for the selected date range and metric, grouped by country.
- The sum total of the chosen metric is displayed in a separate box.
## Google Cloud + GA Setup
### Google Analytics Property ID:
- Select your project at https://analytics.google.com
- Go to Settings, Property Settings
- You'll see the ID there
### Create Google Cloud Credentials and Enable API (Google Analytics Data API)
- Navigate to API's & Services, Credentials
- Create Credentials (OAuth)
- Enter url's that you're using for your application server (vite uses 5173 by default)
#### Quickstart Guide - https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries#node.js
#### Generate Credentials JSON - https://developers.google.com/workspace/guides/create-credentials#create_credentials_for_a_service_account
## ENV
### Create a .env file in the project root directory and populate it with the following variables:
```
PROPERTY_ID=YOUR_GOOGLE_ANALYTICS_PROPERTY_ID
PORT=3000
VITE_PORT=3000
GOOGLE_APPLICATION_CREDENTIALS_JSON=YOUR_SERVICE_ACCOUNT_KEY_JSON
Replace YOUR_GOOGLE_ANALYTICS_PROPERTY_ID with your Google Analytics property ID, and YOUR_SERVICE_ACCOUNT_KEY_JSON with the contents of your service account key JSON file. Additional VITE_PORT is needed for frontend to contact backend.
```
#### E.g.:
```
PROPERTY_ID=12345678
PORT=3000
VITE_PORT=3000
GOOGLE_APPLICATION_CREDENTIALS_JSON={"type": "service_account", "project_id": "dashboard1-1682805546629", "private_key_id": "blablabla\n-----END PRIVATE KEY-----\n", "client_email": "client-email-here", "client_id": "1234", "auth_uri": "https://accounts.google.com/o/oauth2/auth", "token_uri": "https://oauth2.googleapis.com/token", "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", "client_x509_cert_url": "https://www.somelink.com"}
```
### Start the development server:
```
npm start
```
## Contents
#### ExpressJs (Back-end Server) file
```
/api/index.js
```
#### Dashboard (GA data fetch example)
Uses Tailwind instead
```
``Pages``
/src/pages/main/Dashboard.jsx
``Components``
/src/components/Abs/Table.jsx
```
#### AB content
Uses Style Components (Prefered)
```
``Pages``
/src/pages/main/ActiveAb.jsx
/src/pages/main/AllAb.jsx
/src/pages/main/NewAb.jsx
``Components``
/src/components/Abs/AbList.jsx
/src/components/Abs/AbItem.jsx
/src/components/Abs/NewAbForm.jsx
``Context``
/src/setup/ab-context.js
```
#### Unused utility
```
/src/setup/google-analytics.js
```