Shopify Plus A/B-Testing im Checkout mit Kameleoon

Dieser Artikel erklärt, wie Sie konforme A/B-Tests im Shopify Plus-Checkout mit Kameleoon-Web-Experimenten, Shopify Cart-Attributen und Checkout UI Extensions durchführen.

Schritt 1: Eine Variation über ein Kameleoon-Web-Experiment zuweisen

Verwenden Sie auf Ihrer Warenkorbseite Kameleoon, um eine Variation zuzuweisen (zum Beispiel Variation A oder Variation B) und die Zuweisung in einem Cart-Attribut wie kameleoon-checkout-variant zu persistieren. Diese Zuweisung stellt sicher, dass der Checkout auf die Variation reagieren kann. Verwenden Sie den folgenden JavaScript-Code, um die Variation zuzuweisen und die Cart-Attribute zu aktualisieren:

const experimentId = 12345;
Kameleoon.API.Experiments.trigger(experimentId);
const experiment = Kameleoon.API.Experiments.getById(experimentId);
const variationName = experiment?.associatedVariation?.name;

if (variationName) {
    fetch('/cart/update.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ attributes: { 'kameleoon-checkout-variant': variationName } }),
    });
}

Schritt 2: Verwenden Sie eine Shopify Checkout UI Extension

Verwenden Sie in Ihrer Shopify Plus Checkout UI Extension die React-API, um das Attribut kameleoon-checkout-variant zu lesen. Anschließend können Sie eine bedingte Komponente, wie z. B. ein Banner, nur für bestimmte Variations rendern.

const attributes = useAttributes();
const variant = attributes['kameleoon-checkout-variant'];

if (variant === 'Variation B') {
  return <Banner title="You unlocked free express shipping!" />;
}

Conversions auf der Dankeseite verfolgen

Um Conversions für Benutzer im Experiment auf der Bestellbestätigungsseite zu verfolgen, lesen Sie die Anleitung zu Shopify Checkout Conversions.

Zusammenfassung

Weisen Sie auf der Warenkorbseite eine Variation mit einem Kameleoon-Web-Experiment zu.
Aktualisieren Sie die Shopify Cart-Attribute, um die zugewiesene Variation zu persistieren.
Verwenden Sie eine Shopify Checkout UI Extension, um die Variation zu lesen und dynamische Inhalte zu rendern.
Verfolgen Sie Conversions auf der Dankeseite, indem Sie der Conversions-Anleitung folgen.

Diese Konfiguration entspricht den Richtlinien von Shopify Plus und ermöglicht valide Experimente im gesamten Checkout-Ablauf.

​Schritt 1: Eine Variation über ein Kameleoon-Web-Experiment zuweisen

​Schritt 2: Verwenden Sie eine Shopify Checkout UI Extension

​Conversions auf der Dankeseite verfolgen

​Zusammenfassung

Schritt 1: Eine Variation über ein Kameleoon-Web-Experiment zuweisen

Schritt 2: Verwenden Sie eine Shopify Checkout UI Extension

Conversions auf der Dankeseite verfolgen

Zusammenfassung