Implementierung des einzeiligen Bunchbox Snippets

DIESER ARTIKEL ZEIGT DIR:

  • Wie du eine Zeile Code zu deiner Website hinzufügst, um Bunchbox-Experimente (A/B-Tests) durchzuführen.
  • Wie du Seiten auswählst, auf denen du das Bunchbox Code-Snippet hinzufügen solltest.
  • Wie und wo du dein Bunchbox Snippet findest.
  • Wie du entscheidest, an welcher Stelle den Code in deinem HTML hinzufügen solltest.

Wenn du zum ersten Mal Bunchbox verwendest, musst du eine Codeziele (hier findest du Hintergrundinfos zum Snippet) zum <head>-Bereich des Codes deiner Website hinzufügen, um Experimente durchzuführen. Dieses Snippet enthält deine eindeutige Projekt-ID und ermöglicht es, Experimente auf deiner Website mit Bunchbox durchzuführen. Sobald das Snippet einmalig eingebaut hast, wird das Snippet automatisch mit den Daten deiner Experimente aktualisiert; du musst nichts weiter tun.

Nachdem du die Implementierung der Codezeile mit den drei folgenden Schritten abgeschlossen hast, kannst du Experimente überall auf deiner Website durchführen.

1. Entscheide, wo du das Bunchbox Snippet hinzufügen möchtest

Berücksichtige die Architektur deiner Website und deines Optimierungsprogramms, wenn du entscheidest, wo du das Snippet hinzufügen möchtest. Jeder Bunchbox-Account hat sein eigenes Snippet.

  • Stelle sicher, dass alle Teile deiner Website, auf denen du Ergebnisse messen möchtest, im selben Projekt liegen. Ein und desselbe Snippet sollte auf diesen Seiten laufen.
  • Wenn du getrennte Entwicklungs- und Produktionsumgebungen oder verschiedene Domänen und Subdomänen hast, benötigst du wahrscheinlich separate Accounts (und Snippets) für jedes Projekt.

2. Kopiere das Snippet

Als nächstes rufst du die Seite auf, auf der du dein individuelles Snippet findest. Hier findest du das Snippet das du deiner Website hinzufügen wirst. Hier ist eine exemplarische Vorgehensweise mit einer Schritt-für-Schritt-Anleitung:

Bunchbox Snippet
Finde dein Bunchbox Tracking-Snippet
  1. Navigiere zu Account > Allgemein
  2. Markiere den Text im der grauen Box
  3. Klicke die rechte Maustaste und auf „kopieren“

Du solltest niemals mehr als ein Snippet gleichzeitig auf deiner Website haben.

Tipp:

Wenn du mal deine Projekt-ID finden musst: dies ist die Nummer unmittelbar vor der „.min.js“ in der Snippet-URL.

3. Füge dein Snippet dem <head>-Tag deiner Website hinzu

Für eine optimale Leistung solltest du das Bunchbox-Snippet dem <head>-Tag des HTML für deiner Website hinzufügen. Wir empfehlen, das Snippet so hoch oben wie möglich im Head-Tag zu implementieren, in der Regel nach dem öffnenden <head>-Tag, der Zeichensatzdeklarationen und möglicherweise anderen Meta-Tags. Platziere das Bunchbox-Snippet vor dem Code aller Webanalyse-, Tag-Manager oder Heatmapping-Software.

Platziere folgende Dinge vor dem Snippet:

  • Zeichensatzdeklarationen (charset und andere Meta-Tags, wie <meta charset=’utf-8′>
  • jQuery, wenn du deine eigene Version und nicht die Version von Bunchbox verwendest.

Platziere folgende Dinge nach dem Snippet:

  • Alle anderen Elemente auf deiner Seite
  • Jeglicher Analyse- oder Heatmapping-Code
  • Andere Inhalte in einem Tag-Manager

So könnte das Bunchbox-Snippet auf einer Seite aussehen:

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Add other meta information here -->
<!-- Add stylesheets here -->
<script src="//cdn.bunchbox.co/529dd741b822cc631f000002.min.js"></script>
<!-- Add scripts and other content here -->
</head>
<body>

Warum oben im Head-Tag? Bunchbox funktioniert, indem du Änderungen an deiner Seite vornimmst, während die Seite geladen wird. Wenn das Snippet oben im Head-Tag hinzugefügt wird, nimmt Bunchbox Änderungen an der Seite vor, während sie geladen wird.

Wenn das Snippet später geladen wird, funktioniert es technisch gesehen immer noch. Wenn die Seite jedoch bereits Inhalte geladen hat, die der Besucher vor dem Laden des Optimierungs-Snippets sieht, kann die Originalversion der Seite geladen werden, bevor sie von Bunchbox in deine Variante geändert wird. Dies wird als „Flashing“ bezeichnet. In den meisten Fällen wird der Code zu schnell ausgeführt, als dass dies sichtbar wäre. Um jedoch mögliche Probleme zu vermeiden, empfehlen wir, das Snippet so früh wie möglich im Ausführungspfad hinzuzufügen.

Wichtig:

Bitte ändere das Snippet nicht. Kopiere und füge es auf deiner Website ein, genau so, wie du es in Bunchbox siehst. Andernfalls kann es sein, dass Bunchbox auf deiner Website nicht korrekt ausgeführt wird.

Du benötigest die Möglichkeit, das Snippet dem Head-Tag deiner Produktionsumgebung und deiner Entwicklungsumgebung hinzuzufügen (wenn du beides hast).
Wenn du keinen Zugriff hast, ist es auch möglich, Bunchbox über einen Tag-Manager zu implementieren.

Hinweis:

Standardmäßig wird das Snippet synchron geladen, was empfohlen wird. Wenn das Snippet jedoch asynchron laden musst, lies dir durch, um zu erfahren, wie du asynchrones Laden implementieren kannst.

Überprüfe, ob das Snippet implementiert ist

Hier ist eine Anleitung, mit der du überprüfen kannst, ob das Snippet korrekt implementiert ist.

Lade Bunchbox in einem Tag Manager oder CMS

Wir empfehlen nicht, das Bunchbox-Snippet über einen Tag-Manager zu laden.

Das Laden von Bunchbox über einen Tag-Manager kann zu Problemen führen, wie z.B. dem Flashing der Seite, bei dem die Originalversion deiner Seite den Besuchern vor dem Bunchbox-Experiment kurz angezeigt wird.
Der Google Tag Manager zum Beispiel unterstützt kein synchrones Laden. Tag-Manager können auch Probleme mit deiner Webanalyse-Integration verursachen. Um deinen Besuchern das bestmögliche Erlebnis zu bieten, empfehlen wir dringend, Bunchbox außerhalb eines Tag Managers zu implementieren.

Wenn Bunchbox über einen Tag-Manager laden musst, berücksichtige die folgenden Fallstricke und Implementierungsvorschläge und wende dich an deinen Customer Success Manager, um die Auswirkungen der Implementierung zu diskutieren.

Hier sind einige Tag-Manager, die Kunden verwendet haben:

Google Tag Manager | Ensighten | Tealium iQ | Signal

Wenn du versuchst, das Bunchbox-Snippet zu einer Website hinzuzufügen, die mit einem der folgenden Content Management Systeme (CMS) oder einer der folgenden Plattformen erstellt wurde, lies bitte den entsprechenden Artikel für weitere Informationen:

WordPress | Marketo Landing Pages | Yahoo Store | Volusion Store | Drupal | PHP Website

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