Einen A/B-Test in einem Shopify-Store durchführen

• Content-Swap-Test: Jede Variante Ihres Experiments lebt auf einem anderen Shopify-Template, das über eine dedizierte Seiten-URL zugänglich ist (z. B. www.mystore.com/products/products/produc-name?view=version-b). Mit dem A/B-Testing-Tool können Sie Ihren Inhalt mit der Variante (z. B. Seiten B, C usw.) austauschen.
• Einen visuellen Editor verwenden: Erstellen Sie Varianten direkt auf Ihrer Produktseite mit unserem Graphic Editor oder passen Sie sie durch Einspeisen von JS/CSS an.
• Shopifys Liquid und ein JS SDK nutzen: Fügen Sie in Ihrem Liquid-Template Logik hinzu, um bestimmte Varianten für eine Teilmenge der Benutzer zu aktivieren oder zu deaktivieren.

• Wenn Sie Web-Experimente ausführen, empfehlen wir die Verwendung unserer Shopify x Kameleoon-App, die die Einrichtung vereinfacht. Lesen Sie unbedingt unsere Dokumentation für eine Schritt-für-Schritt-Anleitung.
• Wenn Sie Feature Flags oder Feature Experiments ausführen, befolgen Sie bitte die Richtlinien in unserer Feature-Experimentation-Dokumentation.

​

Content-Swapping-Tests

• https://kameleoon-segment-test.myshopify.com/products/vans-sh-8-hi
• https://kameleoon-segment-test.myshopify.com/products/vans-sh-8-hi?view=version-b

• product-template — enthält den Quellcode der Produktseite.
• product-recommendations — enthält den Code für den Empfehlungsblock „You may also like”.

1. Klicken Sie in Ihrem Shopify-Theme-Editor auf Add a new template.
2. Wählen Sie den Template-Typ Product und benennen Sie ihn (wir haben version-b verwendet, aber Sie können jeden Namen verwenden).

3. Klicken Sie auf Add a new section; nennen Sie ihn product-template-version-b und kopieren Sie den Code aus Ihrer ursprünglichen product-template.liquid-Datei und fügen Sie ihn in diesen neuen Abschnitt ein.

4. Entfernen Sie den Code der Add to cart-Schaltfläche aus dem Abschnitt product-template-version-b.liquid.

5. Rufen Sie Ihren geänderten Abschnitt (product-template-version-b) aus dem alternativen Produkt-Template auf, das Sie erstellt haben (product.version-b.liquid).

1. Gehen Sie zur Kameleoon-App.
2. Klicken Sie auf New experiment > With the code editor.
3. Geben Sie die erforderlichen Informationen ein und klicken Sie auf Create.

4. Klicken Sie auf den Chevron neben Add variation > Add code variation.

5. Fügen Sie den folgenden Code hinzu und passen Sie die Variablen VIEW und SELECTOR an Ihren Anwendungsfall an

var VIEW = 'version-b';        // Alternate template handle, e.g. 'version-b'
var SELECTOR = '#MainContent'; // Main container selector

Kameleoon.API.Core.runWhenElementPresent(
  SELECTOR,
  function () {
    fetch(window.location.pathname + '?view=' + encodeURIComponent(VIEW), {
      credentials: 'same-origin'
    })
      .then(function (r) { return r.text(); })
      .then(function (html) {
        var doc = new DOMParser().parseFromString(html, 'text/html');
        var newContent = doc.querySelector(SELECTOR) || doc.body;

		var main = document.querySelector(SELECTOR);
        main.replaceWith(newContent);
      })
      .catch(function (err) {
        console.error('[Kameleoon] Swap failed:', err);
      });
  }
);

• Targeting: Legen Sie fest, wer das Experiment sehen soll (alle Benutzer, bestimmte Benutzersegmente).
• Traffic allocation: Wählen Sie, wie Besucher zwischen dem Original und Variation B aufgeteilt werden sollen.
• Goals: Legen Sie fest, wie Sie den Erfolg messen (Klick, Conversions, Bestellungen).

• Einschließen von URLs, die /products/ enthalten.
• Ausschließen von URLs mit dem Parameter view=version-b, um eine endlose Weiterleitungsschleife zu verhindern.

​

Varianten mit einem grafischen oder Code-Editor erstellen

1. Öffnen Sie die Kameleoon-App.
2. Klicken Sie auf New experiment > With the graphic editor.
3. Geben Sie die erforderlichen Informationen ein und klicken Sie auf Create.

4. Wählen Sie die Add to Cart-Schaltfläche aus.
5. Um die Schaltfläche auszublenden:
   • Klicken Sie auf das Drei-Punkte-Menü in der linken Seitenleiste > Hide;
   • Oder klicken Sie auf das Hide-Symbol in der Symbolleiste, die unter dem ausgewählten Element erscheint.

• Weisen Sie 50 % des Traffics zu.
• Zielen Sie auf alle Seiten mit URLs, die /products/ enthalten.
• Legen Sie Shopify Orders als Ihren primären KPI fest.

​

JS SDK in Liquid verwenden, um Features ein- und auszuschalten

1. Gehen Sie zur Kameleoon-App
2. Navigieren Sie zum Menü Feature flags.
3. Klicken Sie auf New feature flag und folgen Sie den Schritten in dieser Anleitung.

• Wenn sich der Besucher in Variation B befindet, blenden wir den CTA aus.
• Wenn sich der Besucher in Variation A (der Kontrolle) befindet, zeigen wir den CTA an.

• Stellt sicher, dass das Kameleoon JS SDK geladen und initialisiert ist.
• Überprüft, ob das Feature Flag aktiv ist und in welche Variation der Besucher gebucketed wird.
• Wendet die Logik an, um den CTA entsprechend auszublenden oder anzuzeigen.

1. Gehen Sie in Ihrem Shopify-Admin zu Online Store > Themes > Actions > Edit Code.
2. Öffnen Sie die Datei product-template.liquid (oder äquivalent).
3. Fügen Sie die Kameleoon-Feature-Flag-Logik ein.

4. Klicken Sie auf Save, um die Änderungen auf Ihr Theme anzuwenden.