In Bubble A/B Testing System selbst entwickeln

Video Transkript

Hallo, mein Name ist Chris Strobl und in diesem Video zeige ich euch, wie man einen A/B Test in Bubble selbst entwickeln kann.

Wie legen direkt los, indem wir eine Gruppe erstellen. Die Hintergrundfarbe machen wir blau, zentrieren das horizontal und machen das Ganze etwas größer. Wir geben der Gruppe eine Maximalbreite von 100% und fügen einmal einen Text hinzu in die Mitte. Darunter einen Text.

Unter loremipsum.de können wir uns einen Beispieltext einfügen lassen; kopieren das Ganze; fügen ihn ein und darunter noch ein Button. Das ist nun unsere erste Gruppe. Diese genau gleiche Gruppe kopieren wir einmal und haben jetzt Gruppe B und ändern dort den Text "Landing Page B". Wir ändern die Hintergrundfarbe in rot, um es zu erkennen. Natürlich ist in echt euer A/B Test nicht so auffällig unterschiedlich, aber um das zu ändern. Wir ändern auch den Text. Und 'twas die Größe. Und auch hier die font-color. Somit haben wir jetzt, ihr könnt das im Element Tree sehen, zwei Gruppen: einmal die Gruppe A (blau) und einmal die Gruppe B (rot). Diese beiden Gruppen nun. wollen wir in eine große Gruppe zusammenfügen. Diese große Gruppe ist nun beispielhaft die Gruppe Landingpage. Das heißt, ihr könnt eure ganze Seite, wenn ihr diesen A/B Test macht, später auf eine große Gruppe packen. Ich habe das jetzt beispielhaft nur auf diesen Bereich gemacht. Achte darauf, dass die Pixel genau übereinander liegen und jetzt sorgen wir dafür, dass beide Gruppen nicht sichtbar sind, wenn die Seite geladen wird. Und anschließend erstellen wir ein neues Datenbankobjekt.

Wir gehen in Data Tab, erstellen nun hier den Type A/B Test. Und unser erstes Data Field ist der Name, also wie identifiziert sich das Ganze. Das ist ein Type Text. Das Zweite sind die Seitenaufrufe dieses A/B Tests. Eine Zahl und der dritte ist: Wir haben ja den Button, wie viele Klicks hat dieser Call-to-Action CTA? Das ist auch eine Zahl. Wir gehen jetzt in AppData All A/B Tests und erstellen einmal den Namen. Experiment 1 und bei Klicks und bei Seitenaufruf beide jeweils Null (0) anschließend der zweite Eintrag: Experiment  2. Auch Null (0) bei Klicks, Seitenaufrufe. Als nächstes gehen wir zurück in den Design Tab und wir wählen die große Landing-Page aus: Group Landing Page. Dort ist der type of content nun ein A/B Test. Die data-source lassen wir jetzt im Moment leer. Bei Gruppe A machen wir Data source Parent group's A/B Test und legen ein conditional fest, wenn Parent groups' A/B Test, A/B Name ist "Experiment 1", dann ist dieses Element sichtbar. Wählt auch die Checkbox. Wie ihr sent, hat sich der Name geändert, wir können es noch besser umbenennen Experiment 1 und bei Gruppe B, also Experiment 2 machen wir wieder Parent group's A/B Test, lassen Bubble den Type festlegen und sagen, wenn Parent group's A/B Test A/B Name ist "Experiment 2", dann ist dieses Element sichtbar.

Anschließend gehen wir in den Workflow. Wir gehen auf General, Page is loaded, Element Action Display data in a group. Wir nehmen die Group Landing Page und data to display ist Do  search for A/B Test und wir nehmen hier das random item, also ein random item aus unserer Liste und wir klicken noch mal darauf und sagen sort by random sorting. Das heißt, jetzt wird diese übergeordnete Gruppe, also die Landing Page Gruppe, was ich auf die ganze Seite erstrecken kann, wird nun randomly, also zufällig, von einem unserer AppData (Experiment 1 oder 2) befüllt. Als nächstes wollen wir auch die Seitenaufrufe ändern.

Das heißt make changes to a thing, nämlich Group Landing Page's A/B Test und dort ändern wir Seitenaufrufe ist: This A/B Test's Seitenaufrufe +1. D.h. immer wenn ein neuer Seitenaufruf passiert, ändert sich das um einen. Das gleiche machen wir nun bei den Buttons. Wir nehmen das Experiment 1 Start/ edit Workflow, make change to a thing. Parent group's A/B Test, CTA Clicks, This A/B Test's CTA Clicks +1 und das gleiche bei Experiment 2, Data, Make changes to a thing. Plus 1. Final können wir auch den Page Title ändern. Das heißt, anstatt die Bubble App selbst können wir ein dynamic Title, nämlich Group Landing Page A/B Test's A/B Name als Titel nehmen.

Wenn wir jetzt auf Preview gehen, sehen wir einmal die Landingpage A mit dem Experiment 1. Wir klicken auf den call to action. Wir refreshen (F5) die Seite: und sehen Landing-Page 2, klicken ebenfalls und refreshen noch mal die Seite. Sehen Landing Page 1... Zufällig noch einmal Landing Page 2...

Noch mal Experiment 1, Landing Page 1, klicken noch mal drauf und wenn wir jetzt in die Daten gehen: Refresh data. Dann sehen wir jetzt wie wir unsere eigenen Analytics haben und sehen eben auch das Verhältnis aus Klicks und Seitenaufrufen bei unseren A/B Tests ist. Dieses Modell, der A/B Tests könnt ihr natürlich wunderbar noch unterschiedlich ausgestalten, ob das nun Buttons sind oder mehr Szenerarien oder mehr Experimente, aber ich denke gerade für den Anfang zeigt es euch wieder einmal, was alles mit Bubble.io möglich ist und wie ihr Bubble io bestmöglich für eure Bedürfnisse anpassen könnt.

Ich wünsche euch weiterhin viel Erfolg und auf bald.