Optimize installieren

Optimize auf Ihrer Website einfügen

Zum Installieren von Optimize müssen Sie auf Ihrer Website ein kurzes Code-Snippet einfügen, damit Besucher Tests bzw. Personalisierungen aus Optimize sehen können.

Vorbereitung

Zuerst einmal benötigen Sie ein Optimize-Konto und einen Container, der mit einer Google Analytics-Property verknüpft ist. Weitere Informationen dazu finden Sie im Hilfeartikel Optimize einrichten. Außerdem müssen Sie auf das HTML Ihrer Website zugreifen können, damit Sie es mit dem Optimize-Snippet taggen können.

Eine Methode auswählen

Je nachdem, wie Sie Google Analytics eingerichtet haben, empfehlen wir für die Installation von Optimize zwei Methoden:

  1. Methode 1 – bei Verwendung des allgemeinen Website-Tags (gtag.js)
  2. Methode 2 – bei Verwendung von Google Tag Manager

Methode 1: Optimize mit dem allgemeinen Website-Tag (gtag.js) installieren

Hinweis: Wenn Sie Google Tag Manager verwenden, folgen Sie dieser Anleitung.

Schritt 1: Allgemeines Website-Tag mit Analytics installieren

Hinweis: Wenn Sie auf Ihrer Website bereits ein allgemeines Website-Tag mit Analytics eingefügt haben, können Sie direkt mit Schritt 2 weitermachen und die Container-ID für Optimize einfügen.

Das allgemeine Website-Tag (gtag.js) mit Google Analytics muss vorhanden sein, um Optimize zu installieren. Sie können es in Google Analytics über die Admin-Konsole abrufen (Admin > Spalte "Property" > Tracking-Informationen > Tracking-Code) oder dem Beispiel unten folgen.

Beispiel: Allgemeines Website-Tag mit Google Analytics

Mit dem folgenden Tag wird die gtag.js-Bibliothek geladen, GA_TRACKING_ID als Standard-Property-ID für Google Analytics festgelegt und ein Seitenaufruftreffer an Google Analytics gesendet.

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

 

Hinweis: Sie müssen GA_TRACKING_ID durch Ihre Google Analytics-Tracking-ID ersetzen.

Weitere Informationen zum Einrichten des Trackings in Analytics finden Sie in der Google Analytics-Hilfe.

Schritt 2: Optimize zum allgemeinen Website-Tag hinzufügen

Wenn Sie das allgemeine Website-Tag (gtag.js) mit der Google Analytics-Tracking-ID eingerichtet haben, müssen Sie die Container-ID für Optimize in der Zeile gtag('config' einfügen:

   gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});

In Optimize können Sie Ihre Analytics- und Optimize-IDs automatisch in das angepasste allgemeine Website-Tag einfügen lassen. Wählen Sie hierzu "Container" > "Containerkonfiguration" > "Optimize-Plug-in installieren" aus.

Beispiel: Allgemeines Website-Tag mit Google Analytics und Optimize

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>
 

Hinweis: Ersetzen Sie GA_TRACKING_ID durch Ihre Google Analytics-Tracking-ID und OPT_CONTAINER_ID durch Ihre Optimize-Container-ID.

Schritt 3: Allgemeines Website-Tag auf der Website installieren

Fügen Sie das Code-Snippet für das allgemeine Website-Tag direkt nach dem <head>-Tag auf allen Seiten ein, die Sie optimieren möchten.

  • Wenn das allgemeine Website-Tag bereits auf Ihrer Website installiert ist, fügen Sie noch die Optimize-Container-ID ein (siehe Schritt 2 oben) und verschieben Sie das schon vorhandene Tag an den Anfang des <head>-Tags.
  • Falls sich das allgemeine Website-Tag noch nicht auf Ihrer Website befindet, fügen Sie es am Anfang des <head>-Tags aller Seiten ein, die Sie optimieren möchten.

Hinweis: Pro Seite ist nur ein allgemeines Website-Tag nötig.

Best Practices für die Platzierung von Snippets

Sie erzielen die beste Leistung, wenn Sie das allgemeine Website-Tag ganz am Anfang des <head>-Tags aller Seiten platzieren, die Sie optimieren möchten.

Vor dem allgemeinen Website-Tag dürfen nur die folgenden Elemente stehen:

  1. Initialisierung der Datenschicht. Hinweis: Die dataLayer-Variable darf nach dem Snippet zum Ausblenden von Seiten nicht neu zugewiesen werden.
  2. Alle Skripts, in denen JavaScript-Variablen und -Funktionen deklariert oder Cookies erstellt werden, die Sie in Optimize-Tests verwenden möchten, also z. B. jQuery oder eine JavaScript-Bibliothek zur Implementierung oder für das Targeting. Hinweis: jQuery wird von Optimize nicht standardmäßig installiert.
  3. Das optionale Snippet zum Ausblenden von Seiten, um Seitenflackern zu vermeiden

Methode 2: Optimize mit Google Tag Manager installieren

Hinweis: Wenn Sie das allgemeine Website-Tag (gtag.js) verwenden, folgen Sie dieser Anleitung.

Wenn Sie Optimize mit Google Tag Manager einrichten möchten, folgen Sie der Anleitung unten. Halten Sie sich bei anderen Tag-Management-Systemen an die Anleitung des jeweiligen Anbieters, um Optimize zu Ihrem bestehenden Google Analytics-Tag hinzuzufügen.  

Hinweis:
Wenn Optimize über Tag Manager installiert wird, verwenden Sie den Seitenaufruftrigger. Seiten können nicht richtig ausgeblendet werden, wenn für das Optimize-Tag kein Seitenaufruftrigger eingerichtet ist, weil die Ereignisse "DOM ist bereit" und "Fenster geladen" zu lange dauern, um den Optimize-Container zu laden.

Benutzerdefinierte Tracker-Einstellungen

Wenn Sie benutzerdefinierte Tracker-Einstellungen verwenden, müssen Sie die freigegebene Variable Google Analytics-Einstellungen in Tag Manager und Analytics verwenden, damit die Tracker-Einstellungen der Tags zueinander passen.

Schritt 1: Notwendige Informationen erfassen

Für die Installation von Optimize benötigen Sie die folgenden Informationen:

  1. Ihre Analytics-Tracking-ID
  2. Ihre Optimize-Container-ID
  3. Bestätigung, dass in den Tracker-Einstellungen von Tag Manager und Analytics die freigegebene Variable Google Analytics-Einstellungen verwendet wird

Schritt 2: Optimize in Tag Manager konfigurieren

Sobald die oben genannten Informationen vorliegen, können Sie Optimize in Tag Manager wie unten beschrieben konfigurieren:

  1. Melden Sie sich bei Tag Manager an und wählen Sie ein Konto aus.
  2. Klicken Sie auf Tags > Neu.
  3. Klicken Sie auf Tag-Konfiguration > Google Optimize.
  4. Geben Sie Ihre Container-ID für Optimize ein.
  5. Wählen Sie eine Variable für Google Analytics-Einstellungen aus.
  6. Klicken Sie auf Speichern und speichern Sie das Tag ohne Trigger.
  7. Öffnen Sie für die mit dem Optimize-Container verknüpfte Analytics-Property das Analytics-Tag "Seitenaufruf".
  8. Klicken Sie auf Tag-Konfiguration > Erweiterte Einstellungen > Tag-Reihenfolge.
  9. Klicken Sie das Kästchen "Tag auslösen, bevor das X-Tag ausgelöst wird" an. Klicken Sie unter Setup-Tag auf das Menü und wählen Sie ein Optimize-Tag aus.
  10. Legen Sie für das Optimize-Tag fest, dass es einmal pro Seite ausgelöst werden soll, und speichern Sie es.
  11. Veröffentlichen Sie den Tag Manager-Container, damit die Änderungen wirksam werden.

Weitere Informationen finden Sie im Leitfaden zum Erstellen von Tags für Optimize in der Tag Manager-Hilfe.

Best Practices für die Platzierung von Snippets

Sie erzielen die beste Leistung, wenn Sie das Tag Manager-Tag ganz am Anfang des <head>-Tags aller Seiten platzieren, die optimiert werden sollen.

Vor dem allgemeinen Website-Tag dürfen nur die folgenden Elemente stehen:

  1. Initialisierung der Datenschicht. Hinweis: Die dataLayer-Variable darf nach dem Snippet zum Ausblenden von Seiten nicht neu zugewiesen werden.
  2. Alle Skripts, in denen JavaScript-Variablen und -Funktionen deklariert oder Cookies erstellt werden, die Sie in Optimize-Tests verwenden möchten, also z. B. jQuery oder eine JavaScript-Bibliothek zur Implementierung oder für das Targeting. Hinweis: jQuery wird von Optimize nicht standardmäßig installiert.
  3. Das optionale Snippet zum Ausblenden von Seiten, um Seitenflackern zu vermeiden

 

Optimize-Installation überprüfen

Erstellen Sie am besten eine kleine Testpersonalisierung, um zu sehen, ob Optimize korrekt installiert ist. Sie können dann mit der Diagnose der Installation und dem Vorschaumodus feststellen, ob alles richtig funktioniert. Die Testpersonalisierung löschen Sie später einfach wieder.

Fehlerbehebung bei Seitenflackern

Die Anleitung oben gilt für die meisten Websites. Falls Seitenflackern auftritt, wenn Sie Optimize verwenden, verschieben Sie das allgemeine Website-Tag oder die Tag Manager-Verknüpfung weiter nach oben im <head>-Tag der Seite. Sollte das Seitenflackern immer noch bemerkbar sein, installieren Sie das Snippet gegen Seitenflackern und passen Sie es an.

Weitere Implementierungsmöglichkeiten

Das allgemeine Website-Tag (gtag.js) und Google Tag Manager werden als Tagging-Methoden für neue Implementierungen empfohlen. Wenn Sie Universal Analytics verwenden, können Sie in diesem Hilfeartikel nachlesen, wie Sie Optimize auf Ihrer Website mit analytics.js installieren. In dieser Anleitung erfahren Sie, wie Sie Optimize direkt auf der Seite zusammen mit Tag Manager installieren können.

Hinweis: Optimize funktioniert nicht mit der bisherigen ga.js-Bibliothek.

Erweiterte Tagging-Methoden

Dynamische Seiten und Web-Apps

Sie können Variablen auswählen, die festgelegt werden, nachdem das Optimize-Snippet z. B. mit dynamischen Seiten und Web-Apps geladen wurde. Verwenden Sie hierzu Aktivierungsereignisse.

Mehrere Optimize- oder Tag Manager-Container

Wenn Sie mehrere gtag-Befehle auf einer Seite verwenden möchten, fügen Sie einfach auf allen Seiten bis auf einer 'send_page_view': false ein.

Beispiel: Mehrere gtag-Befehle

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());


 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_1', 'send_page_view': false});

 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_2'});

</script>

 

Hinweise: Ersetzen Sie GA_TRACKING_ID durch Ihre Google Analytics-Tracking-ID sowie OPT_CONTAINER_ID_1 und OPT_CONTAINER_ID_2 durch Ihre Optimize-Container-IDs.

Wenn Sie das optionale Snippet zum Ausblenden von Seiten verwenden, müssen Sie es so konfigurieren, dass alle Container übergeben werden. Weitere Informationen zum Laden mehrerer Container finden Sie auf der Website für Optimize-Entwickler.

Benutzerdefinierter dataLayer-Name

Wenn Sie den dataLayer-Namen anpassen möchten, müssen Sie den Parameter "l" im Skript übergeben und auch die gtag-Funktion ändern.

Beispiel: Benutzerdefinierter dataLayer-Name

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>

 

Hinweis: Ersetzen Sie GA_TRACKING_ID durch Ihre Google Analytics-Tracking-ID und OPT_CONTAINER_ID durch Ihre Optimize-Container-ID.

Im Beispiel oben sind drei Änderungen hervorgehoben:

  1. &l=myNewName wird im <script>-Tag eingefügt.
  2. window.myNewName = window.myNewName || [];
  3. function gtag(){myNewName.push(arguments);}

Wenn Sie das Snippet zum Ausblenden von Seiten verwenden, damit weniger Flackern auftritt, müssen Sie den dataLayer-Namen in der letzten Zeile ändern, falls Sie einen benutzerdefinierten dataLayer-Namen verwenden. Im Beispiel unten haben wir 'dataLayer' in 'myNewName' geändert.

Beispiel: Benutzerdefinierter dataLayer-Name mit Ausblenden von Seiten

<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','myNewName',4000,
{'OPT_CONTAINER_ID':true});</script>

Hinweis: Ersetzen Sie OPT_CONTAINER_ID durch Ihre Optimize-Container-ID.

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