Implementierung
<!DOCTYPE html>
<html>
<head>
<title>Bunchbox implementation sample</title>
<script src="//cdn.bunchbox.co/4aa7bb5c5616ee6459a19734.min.js"></script>
</head>
<body>
The content of the document......
</body>
</html>
Bunchbox nutzt eine JavaScript-Datei auf Ihrer Seite, um diverse Funktionen bereitzustellen. Diese Datei umfasst die gesamte Logik und zudem wichtige Informationen, die Sie über die App in ihrem Account einrichten.
Das Skript wird über ein CDN (Content-Delivery-Network) zur Verfügungen gestellt und garantiert damit die eine nahe Position zum Webseitenbesucher und somit eine Verbesserung der Konnektivität.
Das Skript-Tag zu ihrem Account finden Sie in den Einstellungen ihres Accounts.
Schnittstelle
Globale Variablen
<!DOCTYPE html>
<html>
<head>
<title>Bunchbox implementation sample</title>
<script>
window._bb = window._bb || [];
window._bb.push([command, value]);
</script>
<script src="//cdn.bunchbox.co/4aa7bb5c5616ee6459a19734.min.js"></script>
</head>
<body>
The content of the document......
<script>
window._bb = window._bb || [];
window._bb.push([another_command, value]);
</script>
</body>
</html>
Bunchbox vermeidet unnötige Variablen am globalen Namespace zu definieren. Es werden ausschließlich die Variablen _bb_helpers
und _bb
global definiert. Letzteres dient Ihnen als Schnittstelle.
Sie können diese Schnittstelle - abhängig vom Befehl - vor, während oder nach der Ausführung von Bunchbox verwenden.
Das _bb
Objekt definiert die push
Methode.
_bb.push(array_with_commands...);
Die Methode erwartet mindestens ein Array, welches den Befehl beschreibt.
Benutzerdefinierte Attribute
Besucher-Attribute
window._bb = window._bb || [];
window._bb.push(
['attribute', 'source', 'social'],
['attribute', 'hasNewsletter', true]
);
window._bb.push(['attribute', type, [value]])
Stehen Ihnen Besucher-Attribute zur Verfügung, können Sie diese Bunchbox vor der Ausführung übergeben. Die von Ihnen zur Verfügung gestellten Attribute können Sie z.B für Targeting-Bedingungen nutzen.
type
der Name des Attributesvalue
(optional) der Wert des Attributes
Ecommerce-Attribute
window._bb = window._bb || [];
window._bb.push(
['ecommerce', 'orderSize', 99.99],
['ecommerce', 'productIds', ['id1', 'id2']],
['ecommerce', 'orderId', '48b7db13-a8c9-44c1-be18-5ea46e35c01f']
);
window._bb.push(['ecommerce', [type], [value]])
Um Erfolgsmetriken wie z.B Revenue-Per-Visitor im Report einsehen zu können, müssen Sie uns auf Seiten, auf denen von ihnen definierte Ziele erreicht werden können, bestimmte Werte übergeben. Jeder Conversion kann einen Kaufwert orderSize
, die ID der Bestellung orderId
und IDs gekaufter Produkte productIds
zugeordnet werden.
type
der Name des Ecommerce-Wertesvalue
(optional) der Ecommerce-Wert
Manuelle Experiment-Aktivierung
window._bb = window._bb || [];
window._bb.push(['activate experiment', '4aa7f5d0a7a7bad33b439b9a']);
window._bb.push(['activate experiment', experimentId, [stepIndex]])
Haben Sie ein Experiment erstellt, welches keine Targeting-Bedingungen besitzt, können Sie dieses manuell aktivieren.
experimentId
die ID des Experiments, welches Sie aktivieren möchtenstepIndex
(optional) falls das Experiment mehrere Steps besitzt, können sie den Index des Steps übergeben
Tracking von Ereignis-Zielen
window._bb = window._bb || [];
window._bb.push(['track event goal', '4aa7f5d0a7a7bad33b439b9a', 'goalId']);
window._bb.push(['track event goal', [experimentId], goalId])
Besitzt ihr Experiment ein Ereignis-Ziel, können Sie dies mit diesem Befehl tracken. Die ID des Experiments ist hierbei optional. Lassen Sie diese weg, werden alle aktiven Experimente in betracht gezogen. Besitzen mehrere Experimente ein Ereignis-Ziel mit der entsprechenden goalId
, werden für alle zutreffenden Ziele eine Conversion getracked.
experimentId
(optional) die ID des ExperimentsgoalId
die ID des Ereignis-Ziels
Cross-Domain-Link
window._bb = window._bb || [];
var link = window._bb.push(['cross domain link']);
// auf einer weiteren Domain
window._bb.push(['cross domain link', link]);
window._bb.push(['cross domain link', [linkObject]])
Bunchbox bietet die Möglichkeit, bestehenden Test-Teilnahmen eines Besuchers als Link-Objekt zu serialisieren. Diesen Link können Sie anschließend auf eine weiteren Domain manuell übertragen um so beide Domains unidirektional zu verlinken. Ein Link hat eine Lebensdauer von 30 Sekunden.
Nach Empfang eines Link-Objektes auf der zweiten Domain, können Sie den Link Bunchbox übergeben.
linkObject
(optional) ein Link-Objekt
Varianten
Folgende Hilfsfunktionen stehen Ihnen innerhalb Kontextes einer Code-Variante zur Verfügung.
Weiterleitung
bb.redirect('//www.example.com/');
// oder
bb.redirect('/experiment/variante.html');
bb.redirect(url);
Diese Funktion delegiert die übergebene URL oder den Pfad an window.location
und stellt so sicher, dass keine weiteren Experimente ausgeführt werden.
url
Der Pfad oder die URL auf die weitergeleitet werden soll
Tracken von Ereignis-Zielen
bb.track('event goal', 'engagement');
bb.track(goalType, goalId);
Mit dieser Funktion können die im Experiment definierten Ereignis-Ziele getracked werden. Der zweite Parameter goalId
entspricht dabei der von Ihnen im Experiment definierten ID des Ziels.
goalType
definiert den Type des Ziels. Aktuell wird nurevent goal
unterstütztgoalId
die ID des zu trackenden Ziels
Auf Ereignisse warten
bb.waitUntil(function() {
return !!window.$;
}, function() {
$('body').css({ background: 'red' });
}, {forever: true});
bb.waitUntil(testFn, callback, [options])
Da Bunchbox unmittelbar nach dem Laden der Seite ausgeführt wird, ist es möglich, dass benötigte globale Objekte, zum Ausführungszeitpunkt noch nicht verfügbar sind. Mit bb.waitUntil
kann die nachfolgende Ausführung verzögert werden, bis die gegebene Bedingung erfüllt ist.
testFn
Funktion, die die jeweilige Bedingung prüftcallback
wird ausgeführt, sobald dietestFn
true
zurückgibtoptions
(optional)forever
DietestFn
läuft standardmäßig maximal bis der document statecomplete
eintritt. Mittels{forever: true}
kann diese Einschränkung aufgehoben werden.
Auf DOM Elemente warten
var task = bb.waitForElements('ul > li', function (li) {
li.textContent = li.textContent + " New!";
}, {
timeout: 5*1000,
onTimeout: function() { alert('Timeout!') }
});
if (maybeTrue) task.cancel();
Zum Zeitpunkt der Ausfürhung von Bunchbox ist es in den meisten Fällen nötig auf benötigte DOM-Elemente zu warten um sie verändern zu können. Mit bb.waitForElements
kann auf ein oder mehrere Elemente gewartet werden und so schnellstmöglich das Element ohne visuelle Nebeneffekte für den Webseitenbesuchern zu verändern.
bb.waitForElements(selector, callback, [options])
selector
CSS Selektorcallback
wird ausgeführt, sobald dietestFn
true
zurückgibtoptions
(optional)timeout
gibt an, nach welchem Zeitraum abgebrochen werden soll (in ms)onTimeout
eine Funktion, die bei Überschreiten des Timeouts ausgeführt wird
bb.exists('h2', function (els) {
els[0].innerHTML = 'Buy now';
});
bb.exists('ul > li', function (els) {
els.forEach(function(li, i) {
li.innerHTML = (i+1) + ". Item";
});
}, { forever: true, elements: 3});
bb.exists(selector, callback, [options])
selector
CSS Selektorcallback
Callback, dessen erstes Argument eine NodeList ist, die für denselector
matchenoptions
(optional)forever
Die Funktion läuft standardmäßig maximal bis der document statecomplete
eintritt. Mittels{forever: true}
kann diese Einschränkung aufgehoben werden.elements
Anzahl von Elementen, die mindestens gefunden werden müssen, bis der Callback ausgeführt wird
DOM Manipulation
bb.waitForElements('section', function(section) {
bb.append(section, '<h1>New category</h1>');
});
bb.append(element, htmlString)
Diese Funktion erlaubt das Hinzufügen von eigenem HTML an bestehende DOM-Elemente.
element
Das DOM-Element, dem HTML hinzugefügt werden sollhtmlString
Das HTML als String
bb.waitForElements('section', function(section) {
bb.prepend(section, '<h1>New category</h1>');
});
bb.prepend(element, htmlString)
Diese Funktion erlaubt das Hinzufügen von eigenem HTML Code an bestehende DOM-Elemente. Das HTML
wird dabei anders als bei bb.append
vor dem angegebenen Element platziert.
element
Das DOM-Element, dem HTML hinzugefügt werden sollhtmlString
Das HTML als String
bb.waitForElements('section', function(section) {
bb.replaceWith(section, '<section>New section</section>');
});
bb.replaceWith(element, htmlString)
Diese Funktion ersetzt ein bestehendes DOM-Elemente mit neuem HTML.
element
Das DOM-Element, welches mit demhtmlString
ersetzt werden sollhtmlString
Das HTML als String
bb.css('.container h2 { display: none; }');
// oder
bb.css(document.body, '.container h2 { display: none; }')
bb.css([element], styleString)
Fügt ein Stylesheet zur Seite hinzu um das DOM zu gestalten.
element
(optional) DOM-Element an welches das Stylesheet hinzugefügt wird (standardmäßighead
)styleString
String, mit Style-Angaben
DOM Events
bb.on('click', function(event) {
event.target.innerHTML += "<button>Submit</button>";
});
bb.on('mouseout', 'h2', function(event) {
event.target.innerHTML = "Category";
});
bb.waitForElements('h2', function(h2) {
bb.on('mouseover', h2, function(event) {
event.target.style.color = "red";
});
});
bb.waitForElements('body', function(body) {
bb.on('click', body, "h2", function(event) {
event.target.style.color = "blue";
});
});
bb.on(event, [elements, selector], callback)
Um auf DOM-Events lauschen zu können, bietet bb.on
die geeignete Funktionalität. Die Funktion kann benutzt werden um auf Events direkt an einem Element zu lauschen. Darüberhinaus kann die Funktion zur Event-Delegation genutzt werden.
event
Type des Eventselements
(optional) Ein oder mehrere DOM-Elemente (standardmäßigdocument
)selector
(optional) CSS Selektorcallback
Callback Funktion, die ausgeführt wird sobald das Event austritt
var ids = bb.on('click', 'header', function(event) {
bb.off(ids);
event.target.style.backgroundColor = 'red';
});
bb.off(ids)
Diese Funktion entfernt einen oder mehrere zuvor mittels bb.on
angemeldete Event-Listener.
ids
Die vonbb.on
zurückgegebenen IDs
Mousetracking
bb.mousetracking.pause();
// später
bb.mousetracking.resume();
bb.mousetracking.pause()
und bb.mousetracking.resume()
Vorausgesetzt für das Experiment wurde Mousetracking aktiviert, können über diese Funktionen das Tracking für die aktuelle Variante pausiert als auch fortgesetzt werden.
Weitere Information
{
experimentId: "4aa7e3a5a5ecf992cd77bdf9"
experimentName: "AB Checkout Experiment"
stepId: "4aa7e3a5a5ecf992cd77bdfa"
variantEvent: "ab_checkout_experiment_original"
variantId: "4aa7e3a5a5ecf992cd77bdfb"
variantName: "Original"
}
Über bb.info
können diverse Informationen abgerufen werden. Diese können beispielsweise genutzt werden, um Daten Drittanbieter-Tools zur Verfügung zu stellen.
experimentId
die ID des ExperimentexperimentName
der Name des ExperimetnsstepId
die Step-IDvariantId
die Varianten-IDvariantName
der Name der VariantevariantEvent
das definierte Event der Variante (Vorausgesetzt Webtracking ist aktiviert)