Optimize bereitstellen

Optimize direkt Ihrer Website hinzufügen

Um Optimize-Tests ausführen zu können, muss das Optimize-Snippet auf Ihrer Website eingefügt werden. Das wichtigste Optimize-Snippet ist eine Codezeile, die Ihrem vorhandenen Google Analytics-Tracking-Code hinzugefügt wird. Durch sie wird der angegebene Container für den Optimize-Test als Google Analytics-Plug-in geladen. Wenn Sie eine langsame Internetverbindung nutzen, wird durch das Snippet zum Ausblenden von Seiten die Wahrscheinlichkeit von Seitenflackern und Zeitüberschreitungen verringert.

Analytics bereitstellen

Die Bereitstellung von Optimize hängt davon ab, wie Sie Analytics bereitstellen. Wählen Sie unten die Option aus, die am besten zu Ihrer Konfiguration passt:
 
Für die meisten Nutzer mit einer einfachen Analytics-Installation und ohne Tag-Management-System wie Google Tag Manager eignet sich die Anleitung in diesem Artikel.
 
Fortgeschrittene Nutzer, die Analytics mit einem Tag-Management-System bereitstellen, haben zwei Optionen:
 
  1. Die optimale Leistung wird erzielt, wenn Sie Optimize direkt auf der Seite bereitstellen. Weitere Informationen
  2. Wer mehr Wert auf Flexibilität legt und eine etwas geringere Leistung in Kauf nimmt, kann Optimize über Google Tag Manager bereitstellen. Weitere Informationen
Themen in diesem Artikel:

Voraussetzungen

  1. Durchführung der Schritte im Artikel Optimize einrichten
  2. Installation von Universal Analytics (analytics.js) auf Ihrer Website.
  3. Möglichkeit, Änderungen an Ihrer Website vorzunehmen
  4. Grundlegende Kenntnisse der HTML-Bearbeitung

Optimize-Snippet abrufen

Es wird empfohlen, Optimize direkt auf Ihrer Website zum vorhandenen Google Analytics-Tracking-Code hinzuzufügen und nicht über eine Tag-Management-Lösung bereitzustellen.

So rufen Sie das Optimize-Snippet ab:

  1. Rufen Sie Ihre "Tests"-Seite auf.
  2. Suchen Sie nach dem Infobereich des Containers. Er befindet sich rechts auf der Seite.
  3. Klicken Sie auf Optimize-Snippet installieren.
  4. Klicken Sie auf die blaue Schaltfläche SNIPPET AUFRUFEN.
  5. Folgen Sie der Anleitung auf dem Bildschirm.

Das Snippet-Dialogfeld enthält Ihren modifizierten Analytics-Tracking-Code und das optionale Snippet zum Ausblenden von Seiten, das mit Ihrer Optimize-Container-ID angepasst wurde. Beide können auf den Webseiten bereitgestellt werden, auf denen Sie testen möchten.

Schritt 1: Modifizierten Analytics-Tracking-Code bereitstellen

Sie müssen dem HTML-Code Ihrer Seite den modifizierten Analytics-Tracking-Code hinzufügen, um mit Tests auf Ihrer Website zu beginnen. Sie können den Code entweder auf allen Ihren Webseiten oder nur auf den Seiten hinzufügen, auf denen Sie testen möchten.

Kopieren Sie den modifizierten Analytics-Tracking-Code aus dem Dialogfeld und fügen Sie ihn möglich weit vorn im <HEAD>-Tag sowie vor allen anderen Tracking-Skripts ein, die nicht in Tests verwendet werden.

Unten erhalten Sie weitere Informationen zur Reihenfolge der Snippets.

Schritt 2: Snippet zum Ausblenden von Seiten bereitstellen

Neben dem modifizierten Analytics-Tracking-Code sollten Sie außerdem das Snippet zum Ausblenden von Seiten installieren, um die Wahrscheinlichkeit von Seitenflackern zu verringern. Von diesem Abschnitt des Codes profitieren Nutzer mit langsamen Internetverbindungen, da Testvarianten nur dann gezeigt werden, wenn der Optimize-Container innerhalb des vorgegebenen Zeitlimits geladen wird.

So passen Sie das Snippet zum Ausblenden von Seiten an und erfahren außerdem, wie der Wert für das Zeitlimit geändert wird.

Best Practices für die Tag-Kennzeichnung

Die Platzierung der Optimize-Code-Snippets ist sehr wichtig. Im Allgemeinen sollte die Reihenfolge der Tags wie folgt aussehen:

  1. JavaScript-Code (z. B. jQuery), der in Optimize-Tests verwendet werden soll. Wir empfehlen, ihn so kurz wie möglich zu halten.
  2. Initialisierung von Variablen, die für die Ausrichtung erforderlich sind (Datenschicht, JavaScript, Cookies usw.).
  3. Snippet zum Ausblenden von Seiten.
  4. Modifizierter Analytics-Tracking-Code mit Optimize-Plug-in.
  5. Tag Manager-Container-Snippet.
  6. Sonstiger JavaScript-Code, Tracker und Anzeigen-Tags.

Best Practices für das Hinzufügen von Code zu Webseiten:

  1. Das Snippet zum Ausblenden von Seiten sollte direkt vor dem modifizierten Analytics-Tracking-Code platziert werden (nach den <meta charset>-Deklarationen).
  2. Verschieben Sie den Google Analytics-Tracking-Code direkt vor das <HEAD>-Tag, falls er sich nicht dort befindet. Er sollte möglichst direkt auf das Snippet zum Ausblenden von Seiten folgen.
  3. Diese Elemente sollten vor dem modifizierten Analytics-Tracking-Code stehen:
    • <meta charset>
    • Datenschichtinitialisierung
    • Festlegung der Cookies
    • Alle Skripte, die Sie nutzen möchten oder die JavaScript-Variablen für Optimize-Tests festlegen. Beispiel: jQuery- und JavaScript-Skripts für die Ausrichtung auf eine Optimize-Variante
    • Snippet zum Ausblenden von Seiten
  4. Diese Elemente sollten nach dem modifizierten Analytics-Tracking-Code stehen:
    • Sonstige Tracker, Analytics-Tags, Anzeigen-Tags und/oder Tags, die von einem Tag-Management-System bereitgestellt wurden
    • Weitere Skripts, auf die keine Optimize-Tests ausgerichtet werden

Sie können sich auch auf Variablen konzentrieren, die nach dem Laden des Optimize-Plug-ins mit dynamischen Seiten oder Web-Apps festgelegt werden. Verwenden Sie hierzu Aktivierungsereignisse.

Example: Modified Analytics tracking code

The Optimize plugin is a single line of code, containing your Optimize container ID, that looks like this:

ga('require', 'GTM-XXXXXX');

When added to your Analytics tracking code the modified code looks like this:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-X', 'auto');
  ga('require', 'GTM-XXXXXX');
  ga('send', 'pageview');

</script>

Note: Replace GTM-XXXXXXX with your Optimize container ID, and UA-XXXXXXX-X with your Analytics tracking ID.

Example: Modified Analytics tracking code with anti-flicker

The following is an example of an HTML page with anti-flicker snippet and the modified Analytics tracking code:

<HTML>
<HEAD>
<!-- Anti-flicker snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-XXXXXX':true});</script>
<!-- Modified Analytics tracking code with Optimize plugin -->
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXXXXX-X', 'auto');
    ga('require', 'GTM-XXXXXX');
    ga('send', 'pageview');
    </script>

Note: Replace GTM-XXXXXX with your Optimize container ID and replace UA-XXXXXXXX-X with your Analytics tracking ID.

Nächste Schritte

Nachdem Sie den modifizierten Analytics-Tracking-Code auf Ihrer Webseite oder Ihren Webseiten bereitgestellt haben, können Sie den ersten A/B-Test, Weiterleitungstest oder MVT-Test durchführen. 

War das hilfreich?
Wie können wir die Seite verbessern?