Nutze Bunchbox mit Single Page Applications (SPAs)

Single-Page-Applications nehmen im Bereich des AB-Testings eine besondere Rolle ein. Anders als bei traditionellen Seiten, gibt es nur einen initialen Page-Load. Alle Folgeseiten werden dynamisch ohne zusätzlichen Page-Load erzeugt.

Die Implementierung von Bunchbox benötigt deshalb besonders Aufmerksamkeit. Bunchbox bietet hierzu eine Schnittstelle, welche unabhängig vom Framework (z.B. ReactJS, Vue, AngularJS) erfolgreich genutzt werden kann.

Implementierung

Zunächst muss die automatische Evaluierung deaktiviert werden, da dies im Folgenden manuell gesteuert wird.

<!DOCTYPE html>
<html>
<head>
  <title>Bunchbox SPA implementation sample</title>
  <script>
    window._bb = window._bb || [];
    window._bb.push(['auto evaluation', false]);
  </script>
  <script src="//cdn.bunchbox.co/4aa7bb5c5616ee6459a19734.min.js"></script>
</head>
<body>
The content of the document......
</body>
</html>

Steuern der Evaluation

Durch dieses Vorgehen kann Bunchbox die Gültigkeit bestimmter Attribute und Einstellungen annehmen. Das Anstoßen einer Evaluation führt immer dazu, dass alle zuvor definierten Daten und Einstellungen zurückgesetzt werden. Die neu übergebenen Daten bestimmen den neuen Stand.

var routes = [
    { path: '/a-page', component: Page },
    { path: '/another-page', component: AnotherPage }
];

var router = new VueRouter({
    mode: 'history',
    routes: routes,
    base: '/'
});

_bb = window._bb || [];
router.afterEach(function(current, referrer) {
    _bb.push([
        'evaluate experiments',
        {
            attributes: {
                foo: 'bar'
            }
        }
    ]);
});

Payload

  • payload (optional) Sämtliche Daten und Einstellungen, die der Evaluation bereitgestellt werden sollen
  • attributes (optional) dieses Objekt dient der Übergabe von benutzerdefinierten Attributen. Sie werden als Key-Value-Paare angegeben. Siehe Besucher-Attribute
  • ecommerce (optional) dieses Objekt dient der Übergabe von benutzerdefinierten Kauf-Attributen. Sie werden als Key-Value-Paare angegeben. Siehe Ecommerce-Attribute
  • safeMode (optional) über diese Boolean kann das Ausführen von Varianten – unabhängig vom Targeting – unterbunden werden. Siehe Abgesicherter Modus
_bb = window._bb || [];
_bb.push([
    'evaluate experiments',
    {
        attributes: {
            foo: 'bar',
            bar: ['foo']
        },
        ecommerce: {
            orderSize: 99.99,
            orderId: '1e90384530c2',
            productIds: ['0d0cd94dfd74', 'bd79fc089b79']
        },
        safeMode: false
    }
]);

URL-Fragment basierte Apps

Nutzt die Single-Page-Application URL-Fragmente (#) zur Definition von URLs, muss dies Bunchbox mitgeteilt werden. Hierfür dient der Befehl disable history navigation.

Varianten

Varianten für Single-Page-Applications verlangen oft mehr Aufmerksamkeit als ihr Pendant auf herkömmlichen Webseiten. Bunchbox führt Varianten lediglich aus, kann Code-Ausführungen aber nicht rückgängig machen. Damit eine Variante mehrmals hintereinander ausgeführt werden kann und immer das gleiche Ergebnis zur Folge hat, kann auf ein bestimmtes Ereignis gelauscht werden. Hierzu stellt Bunchbox einen Event-Emitter bereit, welcher innerhalb des Varianten-Codes genutzt werden kann. Der Event-Emitter kann zudem genutzt werden um mit anderen Varianten zu kommunizieren.

const ee = bb.getEventEmitter();

const handler = () => console.log('React to custom event');

ee.on('custom:event', handler);

ee.emit('custom:event', 'I am the payload');
ee.off('custom:event', handler);

ee.once('custom:event:2', () => console.log('React to another custom event'));

Um innerhalb des Varianten-Codes herauszufinden, wann Bunchbox erneut evaluiert wird, können Sie auf das Ereignis reset lauschen. Dieses Ereignis wird immer vor einer nachfolgenden Bunchbox-Evaluierung ausgelöst. Das Ereignis kann somit dazu verwendet werden, Änderungen einer Variante rückgängig zu machen, bevor sie erneut ausgeführt wird.

Ereignisse können zudem von der „Außenwelt“ ausgelöst werden. Hierzu kann folgender Befehl verwendet werden.

window._bb = window._bb || [];
window._bb.push(['emit', 'custom:event', 'I am the payload', 'Me too!']);

bb.getEventEmitter();

Diese Funktion gibt einen EventEmitter zurück. Dieser EventEmitter stellt wiederum die Funktionen ononceoff und emit zur Verfügung.

ee.on(event, handler);

  • event Name des Ereignisses, an das der Listener angehängt werden soll
  • handler Eine Methode, die bei der Ausgabe des Ereignisses aufgerufen wird

ee.once(event, handler);

  • event Name des Ereignisses, an das der Listener angehängt werden soll
  • handler Eine Methode, die bei der Ausgabe des Ereignisses aufgerufen wird

ee.off(event, handler);

  • event Name des Ereignisses, aus dem der Listener entfernt werden soll
  • handler Eine Methode zum Entfernen aus dem Ereignis

ee.emit(event, handler);

  • event Name des Ereignisses, das die Listener benachrichtigt und ausführen soll
  • handler Optionale zusätzliche Argumente, die an jeden Listener übergeben werden können

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren.Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden