Mit Codesphere können Sie den Traffic ganz einfach auf verschiedene Versionen Ihrer Website verteilen, um A/B-Tests durchzuführen. Dazu erstellen wir zwei Workspaces für unser Projekt, die als Kontroll- und Variantenversion der Website in unserem Experiment dienen. Dann werden wir die in Codesphere integrierte SQLite-Unterstützung nutzen, um Besucher und Konversionsereignisse zu verfolgen. Schließlich werden wir beide Workspaces mit unserer Domain verbinden, um den Datenverkehr zwischen ihnen zu verteilen.
Einrichten unserer Varianten
Um unsere Varianten zu erstellen, müssen wir einfach identische Workspaces für unsere Produktionsumgebungen erstellen und sie alle von Codesphere aus deployen. In diesem Beispiel erstellen wir zwei Varianten einer einfachen HTML-Site, jede mit einer anderen Schriftgröße für unseren Anmeldebutton. https://github.com/codesphere-cloud/AB-Testing-DemoThen In unserem Workspace für die Variante gehen wir zur Datei index.html, um die Schriftgröße des Buttons zu ändern.
button {
font-size: 20px;
}
Stellen Sie sicher, dass alle unsere Workspaces einen kostenpflichtigen Tarif haben, damit sie auch dann aktiv sind, wenn wir nicht aktiv in dem Workspace arbeiten:
In jedem unserer Workspaces können wir unsere Abhängigkeiten installieren und unsere Anwendungen ausführen mit: yarn install && node index.js
Speicherung unserer Konvertierungsdaten
Wir werden die SQLite-Unterstützung von Codesphere nutzen, um zu verfolgen, wie viele Besucher und Konversionen wir auf jeder Website erhalten.Um dies zu tun, navigieren Sie in jedem unserer Workspaces zu Setup > DatabasesFrom dort, drücken Sie "New Database +", und nennen Sie es, was auch immer Sie wollen (Wir nennen es Verkehr).Dann drücken Sie auf unsere neue Datenbank, um die Abfrage-Editor.Wir werden die Abfrage-Editor verwenden, um eine 2x2 Tabelle, die Besuche und Anmeldungen verfolgt, mit einer Zeile mit 0 Besuche und 0 Anmeldungen initialisiert erstellen.Wir können unsere Tabelle mit erstellen:
CREATE TABLE traffic (visits int,signups int)
Und initialisieren Sie unsere Zeile mit:
INSERT INTO trafficVALUES (0, 0)
Fügen wir nun Routen hinzu, um die Spalten "Visits" und "Signups" in index.js mithilfe des Pakets sqlite3 zu erhöhen:
const sqlite3 = require('sqlite3').verbose()
const path = require('path')
const express = require('express')
const app = module.exports = express()
let db = new sqlite3.Database('./traffic.db')
const INCR_VISITS = 'UPDATE traffic SET visits = visits + 1'
const INCR_SIGNUPS = 'UPDATE traffic SET signups = signups + 1'
app.use('/', express.static('public'))
app.post('/addVisit', (req, res) => {
db.run(INCR_VISITS)
})
app.post('/addSignup', (req, res) => {
db.run(INCR_SIGNUPS)
})
app.listen(3000)
Und dann aktualisieren Sie unsere index.html, um den addVisit-Endpunkt beim Rendern und den addSignup-Endpunkt beim Anklicken des Buttons aufzurufen:
<html>
<head>
<script>
fetch('/addVisit', {method: 'POST'})
</script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
button {
font-size: 14px;
}
div {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
</style>
</head>
<body>
<div>
<h1>Welcome to my website</h1>
<button onclick = "fetch('/addSignup', {method: 'POST'})">Sign up!</button>
</div>
</body>
</html>
Verknüpfung unserer Varianten mit unserer Domäne
Jetzt müssen wir nur noch die Workspaces unserer Varianten mit unserer Domain verbinden. Um unsere Workspaces zu verbinden, klicken Sie auf den Button Bearbeiten unter Verifizierte Domains und wählen Sie unsere beiden Varianten im Dropdown-Menü Workspaces für unsere Domain aus.
A/B-Tests
Codesphere verteilt nun automatisch die Besucher gleichmäßig auf jede der beiden Versionen. Beachten Sie, dass wir diese Methode mit beliebig vielen Varianten anwenden können! Dieses Dokument zeigt das grundlegende Konzept von A/B-Tests mit Codesphere. Für ein praktisches Beispiel (z.B. wie man mit Codesphere und Posthog Analytics zwei E-Commerce Checkout-Varianten testet) besuchen Sie bitte die Tutorials.