Optimize und Google Tag Manager

So fügen Sie ein Optimize-Snippet auf der Website ein, wenn Sie Tag Manager verwenden

Wenn Sie Optimize-Tests durchführen möchten, müssen Sie auf Ihrer Website ein entsprechendes Snippet einfügen. Hierbei handelt es sich um eine Codezeile, die in den vorhandenen Google Analytics-Tracking-Code integriert wird. Dadurch wird der angegebene Container für den Optimize-Test als Google Analytics-Plug-in geladen. Zusätzlich können Sie das Snippet zum Ausblenden von Seiten implementieren. Dies verringert das Risiko, dass es bei langsamen Internetverbindungen zu Seitenflackern oder Zeitüberschreitungen kommt.

Auf welche Weise implementieren Sie den Analytics-Code?

Es gibt verschiedene Möglichkeiten, ein Optimize-Plug-in bereitzustellen. Die Vorgehensweise hängt davon ab, wie Sie den Analytics-Code implementieren. Sie sollten sich für die Option entscheiden, die am besten zu Ihrer Konfiguration passt:
 
Die meisten Nutzer implementieren den Analytics-Code ohne ein Tag Management System (TMS) wie Google Tag Manager. In unserem Hilfeartikel Optimize bereitstellen wird eine einfache Methode beschrieben, wie bei dieser Vorgehensweise ein Optimize-Snippet hinzugefügt wird.
 
Fortgeschrittene Nutzer, die den Analytics-Code über ein TMS implementieren, haben zwei Möglichkeiten:
 
  1. Die empfohlene Methode ist, das Optimize-Plug-in direkt auf der Seite bereitzustellen, da so eine optimale Leistung erzielt wird. Mehr zu dieser Option finden Sie weiter unten.
  2. Wenn Sie das Optimize-Plug-in über Google Tag Manager bereitstellen, haben Sie mehr Flexibilität, allerdings kann sich dadurch auch die Leistung etwas verringern. Weitere Informationen
Themen in diesem Artikel:

Einführung

Damit Sie Optimize-Tests durchführen können, müssen Sie den Google Analytics-Tracking-Code anpassen und ihn dann direkt auf der Webseite implementieren. Das Optimize-Plug-in ist eine Codezeile, die dem Analytics-Code hinzugefügt wird und den angegebenen Optimize-Container lädt.

Auch wenn Sie sonst Analytics-Tags über Tag Manager bereitstellen, sollten Sie trotzdem den Analytics-Tracking-Code mit dem Optimize-Plug-in direkt auf der Webseite einfügen (das heißt, das Plug-in nicht über einen Tag in GTM bereitstellen). Die Anpassungen im Code bewirken, dass keine Analytics-Treffer gesendet werden. Sie müssen die Analytics-Tags also nicht in Tag Manager ändern.

Obwohl Sie das Optimize-Plug-in auch direkt über Tag Manager bereitstellen können, sollten Sie das nur in Ausnahmefällen tun, da Sie mit der unten beschriebenen Methode eine bessere Leistung erzielen.

Schritt 1: Analytics-Tracking-Code ändern

Erstellen Sie zuerst die modifizierte Version des Analytics-Tracking-Codes, den Sie direkt auf Ihrer Website bereitstellen möchten. Wenn die Tracking-Einstellungen der Analytics-Tags in Tag Manager angepasst wurden, müssen Sie dieselben Veränderungen auch hier vornehmen.

So ändern Sie den Analytics-Tracking-Code:

1. Kopieren Sie den ursprünglichen Analytics-Tracking-Code mit allen Änderungen, die Sie bereits vorgenommen haben. Wenn die Tracking-Einstellungen der Analytics-Tags in Tag Manager angepasst wurden, müssen Sie diese Änderungen dem Analytics-create-Befehl hinzufügen. Der folgende "create" -Befehl aktiviert beispielsweise die automatische Konfiguration der Cookie-Domain und setzt die Variable allowLinker auf "true":

ga('create', 'UA-XXXXXX-X', 'auto', {allowLinker: true});

2. Fügen Sie das Optimize-Plug-in als neue Zeile direkt unter dem oben beschriebenen Analytics-"create"-Befehl ein:

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

3. Entfernen Sie diese Zeile, wenn Analytics-Tags über Tag Manager ausgelöst werden:

ga('send', 'pageview');

Hinweis: Ersetzen Sie UA-XXXXXXXX-Y durch Ihre Analytics-Tracking-ID und GTM-XXXXXX durch Ihre Optimize-Container-ID.

 

Beispiel: Analytics-Tracking-Code mit dem Optimize-Plug-in

Unten sehen Sie ein Beispiel für geänderten Analytics-Tracking-Code, in den das Optimize-Plug-in eingefügt wurde:


<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-Y', 'auto');  // Update tracker settings 
  ga('require', 'GTM-XXXXXX');           // Add this line
                                         // Remove pageview call
  
</script>

Hinweis: Ersetzen Sie UA-XXXXXXXX-Y durch Ihre Analytics-Tracking-ID und GTM-XXXXXX durch Ihre Optimize-Container-ID.

Schritt 3: Snippet zum Ausblenden von Seiten hinzufügen

Wir empfehlen, auch das Snippet zum Ausblenden von Seiten auf Ihren Webseiten einzufügen. Dies ist zwar nicht erforderlich, aber es verringert das Risiko von Seitenflackern und sorgt dafür, dass die Seiten bei einer langsamen Internetverbindung schneller aufgebaut werden. Der Nutzer sieht die Testvariante nur dann, wenn der Optimize-Container innerhalb eines bestimmten Zeitlimits geladen wird. Wir haben dieses Snippet so leistungsfähig wie möglich gestaltet.

Weitere Informationen zum Snippet zum Ausblenden von Seiten

Beispiel: Snippet zum Ausblenden von Seiten

Das Optimize-Snippet gegen Seitenflackern sieht so aus:


<!-- Anti-flicker snippet -->
<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>

Note: Replace GTM-XXXXXX with your Optimize container ID.

Weitere Informationen zum Anpassen des Snippets gegen Seitenflackern und zum Konfigurieren des Werts für die Zeitüberschreitung finden Sie im Optimize-Entwicklerleitfaden.

Schritt 3: Code auf den Webseiten einfügen

Beim letzten Schritt werden der geänderte Analytics-Tracking-Code und das Snippet zum Ausblenden von Seiten direkt auf der Webseite eingefügt – und zwar so weit oben wie möglich im <HEAD>-Tag der Seite. Das Snippet zum Ausblenden von Seiten sollten Sie über dem Analytics-Tracking-Code platzieren. Sie können den Code allen Webseiten hinzufügen oder sich auf die Seiten beschränken, die Sie testen möchten.

Weitere Informationen zur Reihenfolge der Snippets finden Sie unten im Abschnitt "Best Practices für die Tag-Kennzeichnung".

Beispiel: Snippet zum Ausblenden von Seiten und angepasster Analytics-Tracking-Code

Im Folgenden sehen Sie ein Beispiel für das Snippet gegen Seitenflackern mit dem geänderten Analytics-Code, in den das Optimize-Plug-in eingefügt wurde:

<HTML>
<HEAD>
<!-- Anti-flicker snippet -->
<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 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-XXXXXXX-Y', 'auto');  // Update tracker settings 
  ga('require', 'GTM-XXXXXX');           // Add this line
                                         // Remove pageview call
  
</script>

Hinweis: Ersetzen Sie UA-XXXXXXXX-Y durch Ihre Analytics-Tracking-ID und GTM-XXXXXX durch Ihre Optimize-Container-ID.

 

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.

Alternative Methode: Optimize-Plug-in über Google Tag Manager bereitstellen

Es ist zwar möglich, das Optimize-Plug-in über Google Tag Manager bereitzustellen, allerdings führt das häufig zu einer höheren Latenz. Weitere Informationen zur Verwendung des nativen GTM-Tag-Typs

Weiteres Vorgehen

Nachdem Sie das kombinierte Optimize-Analytics-Snippet auf den Webseiten implementiert haben, können Sie den ersten A/B-, Weiterleitungs- oder MVT-Test erstellen.

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