Best Practices für Tags und Tag-Manager

Tags und Tag-Manager für Core Web Vitals optimieren

Katie Hempenius
Katie Hempenius

Tags sind Snippets. von Drittanbietercode, der in eine Website eingefügt wird, in der Regel über einen Tag Manager. Tags werden am häufigsten für Marketing- und Analysezwecke verwendet.

Die Auswirkungen von Tags und Tag-Managern auf die Leistung variieren von Website zu Website stark. Tag Manager können mit einem Umschlag verglichen werden: Der Tag Manager stellt eine Was Sie damit füllen und wie Sie es nutzen, bleibt größtenteils Ihnen überlassen.

In diesem Artikel werden Verfahren zur Optimierung von Tags und Tag-Managern für und Web Vitals. Dieser Artikel bezieht sich zwar auf Google Tag Manager, viele der besprochenen Ideen sind auch auf andere Tag-Manager anwendbar.

Auswirkungen auf Core Web Vitals

Tag Manager können Ihre Core Web Vitals oft indirekt beeinträchtigen, da sie Ressourcen verbrauchen, die erforderlich sind, um Ihre Seite schnell zu laden und responsiv zu bleiben. Die Bandbreite kann dazu verwendet werden, den JavaScript-Code des Tag Managers für Ihre Websites herunterzuladen oder damit die nachfolgenden Aufrufe zu generieren. Die CPU-Zeit im Hauptthread kann für die Bewertung und Ausführung des im Tag Manager und in den Tags enthaltenen JavaScript-Codes aufgewendet werden.

Der Largest Contentful Paint (LCP) ist während der kritischen Seitenladezeit anfällig für Bandbreitenkonflikte. Außerdem kann das Blockieren des Hauptthreads die LCP-Renderingzeit verzögern.

Cumulative Layout Shift (CLS) kann durch Verzögerungen beim Laden wichtiger Ressourcen vor dem ersten Rendering oder durch Tag-Manager beeinträchtigt werden, die Inhalte in die Seite einfügen.

Interaction to Next Paint (INP) ist anfällig für CPU-Konflikte im Hauptthread. Wir haben einen Zusammenhang zwischen der Größe von Tag Managern und niedrigeren INP-Werten festgestellt.

Tag-Typen

Die Auswirkungen von Tags auf die Leistung variieren je nach Tag-Typ. Grundsätzlich gilt: Tags ("Pixel") sind am leistungsstärksten, gefolgt von benutzerdefinierten Vorlagen. und schließlich benutzerdefinierte HTML-Tags. Anbieter-Tags variieren je nach der Funktionalität, Zulassen.

Die Leistung eines Tags wird jedoch stark durch die Art und Weise beeinflusst, wie Sie es verwenden. die Auswirkungen. „Pixel“ sind sehr leistungsfähig, da die Art dieses Tags gibt es strenge Einschränkungen für die Verwendung. benutzerdefinierte HTML-Tags nicht nicht unbedingt leistungsschwach, aber aufgrund des Maßes an Freiheit, können sie leicht missbraucht werden, was sich negativ auf die Leistung auswirkt.

Denken Sie bei der Verwendung von Tags an den Maßstab: kann vernachlässigbar sein, kann jedoch signifikant werden, wenn Dutzende oder Hunderte -Tags auf derselben Seite verwendet werden.

Nicht alle Skripts sollten mit einem Tag-Manager geladen werden.

Tag Manager eignen sich nicht zum Laden von Ressourcen, unmittelbare visuelle oder funktionale Aspekte der User Experience zu implementieren, z. B. Cookie-Hinweise, Hero-Images oder Websitefunktionen. Mit einem Tag-Manager dass diese Ressourcen geladen werden, verzögert sich jedoch die Bereitstellung. Das ist schlecht für den Nutzer und Messwerte wie LCP und CLS steigern können. Halten Sie außerdem dass einige Nutzer Tag-Manager blockieren. UX mit einem Tag Manager implementieren kann dies bei einigen Nutzern dazu führen, dass die Website nicht mehr funktioniert.

Vorsicht bei benutzerdefinierten HTML-Tags

Benutzerdefiniertes HTML Tags gibt es schon seit vielen Jahren und sie werden auf den meisten Websites sehr häufig verwendet. Benutzerdefinierter HTML-Code können Sie Ihren eigenen Code mit wenigen Einschränkungen eingeben. Dieses Tag wird hauptsächlich dazu verwendet, einer Seite benutzerdefinierte <script>-Elemente hinzuzufügen.

Benutzerdefinierte HTML-Tags können auf vielfältige Weise verwendet werden und haben Auswirkungen auf die Leistung stark variieren. Wenn Sie die Leistung Ihrer Website messen, Bei den meisten Tools werden die Auswirkungen eines benutzerdefinierten HTML-Tags auf die Leistung dem Tag zugeordnet. der es eingefügt hat, und nicht das Tag selbst.

Screenshot zum Erstellen eines benutzerdefinierten Tags in Google Tag Manager

Mit benutzerdefinierten HTML-Tags kann ein Element in die umgebende Seite eingefügt werden. Die Handlung Das Einfügen von Elementen in die Seite kann zu Leistungsproblemen führen. führen in einigen Fällen auch zu Layout Shifts.

  • Wenn ein Element in die Seite eingefügt wird, die Größe und Position jedes Elements auf der Seite neu berechnen. ist bekannt als Layout. Die Auswirkungen eines einzelnen Layouts auf die Leistung sind minimal. kann dies zu Leistungsproblemen führen. Die Auswirkungen dieses dieses Phänomen ist bei Low-End-Geräten und auf Seiten mit vielen DOM-Elemente.
  • Wenn ein sichtbares Seitenelement nach dem umgebenden Element in das DOM eingefügt wird bereits gerendert wurde, kann dies zu einer Layoutverschiebung führen. Dieses Phänomen ist nicht einzigartig für Tag-Manager, da Tags normalerweise später geladen werden. als andere Teile der Seite, werden diese üblicherweise DOM, nachdem die umgebende Seite bereits gerendert wurde.

Benutzerdefinierte Vorlagen verwenden

Unterstützung für benutzerdefinierte Vorlagen einige der gleichen Vorgänge wie bei benutzerdefinierten HTML-Tags, basieren aber auf einer Sandbox Version von JavaScript mit APIs für die allgemeine Verwendung wie Script- und Pixel-Injection. Wie der Name schon sagt, ermöglichen sie eine Vorlage, die von einem Poweruser erstellt wird, der die Leistung denken. Weniger technisch orientierte Nutzer können die Vorlage dann verwenden. Das ist oft sicherer als vollständigen Zugriff auf benutzerdefinierten HTML-Code.

Aufgrund der größeren Einschränkungen für benutzerdefinierte Vorlagen sind diese Tags weniger Leistungs- oder Sicherheitsprobleme auftreten; für dieselben funktionieren benutzerdefinierte Vorlagen nicht bei allen Anwendungsfällen.

Screenshot zur Verwendung einer benutzerdefinierten Vorlage in Google Tag Manager

Skripts korrekt einfügen

Die Verwendung eines Tag Managers zum Einfügen eines Skripts ist ein sehr häufiger Anwendungsfall. Die ist die Verwendung einer benutzerdefinierten Vorlage und der injectScript der API erstellen.

Informationen zur Verwendung der Injektions-API zum Konvertieren eines vorhandenen benutzerdefinierten HTML-Codes Konvertieren eines vorhandenen -Tag.

Wenn Sie ein benutzerdefiniertes HTML-Tag verwenden müssen, beachten Sie Folgendes:

  • Bibliotheken und große Skripts von Drittanbietern sollten über ein Skript-Tag geladen werden. die eine externe Datei (z. B. <script src="external-scripts.js">) herunterlädt, anstatt das Skript in das Tag einfügen. Obwohl auf die Verwendung des <script>-Tags verzichtet wurde einen separaten Round-Trip zum Herunterladen des Skriptinhalts eliminiert, Durch Übung wird der Container vergrößert und das Skript wird nicht im Cache gespeichert. vom Browser separat verwalten.
  • Viele Anbieter empfehlen, das <script>-Tag oben im <head>. Für Skripts, die über Tag Manager geladen werden, ist normalerweise nicht erforderlich: In den meisten Fällen ist der Browser bereits fertig Sie parsen <head> bis zu dem Zeitpunkt, zu dem der Tag Manager ausgeführt wird.

Pixel verwenden

In einigen Fällen können Drittanbieterskripts durch Bilder oder iFrames ersetzt werden „pixels“. Im Vergleich zu skriptbasierten Lösungen unterstützen Pixel weniger Funktionen und werden daher oft als weniger bevorzugte Implementierung angesehen, weil davon. Wenn sie innerhalb von Tag-Managern verwendet werden, können Pixel jedoch dynamischer da sie auf Triggern ausgelöst und verschiedene Variablen übergeben werden können. Sie sind am leistungsstarke und sichere Tag-Typen zu erstellen, da nach der Ausführung dass es ausgelöst wird. Pixel haben eine sehr kleine Ressourcengröße (weniger als 1 KB) und keine Layoutverschiebungen verursachen.

Wenden Sie sich an den Drittanbieter, um zu erfahren, wie der Drittanbieter die Pixel. Sie können außerdem versuchen, den Code auf ein <noscript>-Tag zu prüfen. Wenn ein Anbieter Pixel unterstützt, werden diese häufig im <noscript>-Tag.

Screenshot des benutzerdefinierten Bild-Tags in Google Tag Manager

Alternativen zu Pixeln

Pixel wurden vor allem deshalb beliebt, weil sie früher zu den günstigsten gehörten. und die zuverlässigsten Methoden für HTTP-Anfragen in Situationen, in denen der Server Antwort ist nicht relevant ( z. B. beim Senden von Daten an Analytics Anbieter). Die navigator.sendBeacon() und fetch() keepalive APIs wurden für denselben Anwendungsfall entwickelt, sind aber deutlich zuverlässiger. als Pixel.

Es ist nichts auszusetzen, wenn Sie weiterhin Pixel verwenden. Sie werden gut unterstützt und nur minimale Auswirkungen auf die Leistung haben. Wenn Sie jedoch eigene Beacons erstellen, sollten Sie die Verwendung einer dieser APIs in Betracht ziehen.

sendBeacon()

Die navigator.sendBeacon() Das API wurde zum Senden kleiner Datenmengen an Webserver entwickelt. bei denen die Serverantwort keine Rolle spielt.

const url = "https://example.com/analytics";
const data = JSON.stringify({
    event: "checkout",
    time: performance.now()
});

navigator.sendBeacon(url, data);

sendBeacon() hat eine eingeschränkte API: Es unterstützt nur das Senden von POST-Anfragen und tut Folgendes: das Festlegen benutzerdefinierter Header nicht unterstützt. Es ist von allen modernen Browsern unterstützt werden.

fetch() keepalive

keepalive ist ein Flag, das das Abrufprogramm über die API werden für nicht blockierende Anfragen verwendet, z. B. Berichte zu Ereignissen und Analysen. Es ist wird verwendet, indem keepalive: true in die Parameter aufgenommen wird, die an fetch() übergeben werden.

const url = "https://example.com/analytics";
const data = JSON.stringify({
  event: "checkout",
  time: performance.now()
});

fetch(url, {
    method: 'POST',
    body: data,
    keepalive: true
});

Wenn fetch() keepalive und sendBeacon() sehr ähnlich sind, liegt das daran, dass sie sind. In Chromium-Browsern basiert sendBeacon() jetzt sogar auf fetch() keepalive.

Bei der Auswahl zwischen fetch() keepalive und sendBeacon() ist es wichtig, die Funktionen und die Browserunterstützung, die Sie benötigen. Die fetch()-API ist erheblich flexibler keepalive hat jedoch weniger Browser Unterstützung als sendBeacon().

Klarstellung

Tags werden häufig anhand der Anleitung eines Drittanbieters erstellt. Wenn nicht klar ist, was der Code eines Anbieters genau bewirkt, sollten Sie jemanden fragen, der sich damit auskennt. Mit einer zweiten Meinung können Sie feststellen, ob ein Tag Leistungs- oder Sicherheitsprobleme auftreten.

Wir empfehlen außerdem, Tags im Tag Manager mit einem Inhaber zu kennzeichnen. Es ist weit weg Zu leicht vergessen Sie, wem ein Tag gehört, und haben Angst davor, es sicherheitshalber zu entfernen.

Trigger

Auf übergeordneter Ebene wird das Tag Trigger im Allgemeinen dafür sorgt, dass Tags nicht häufiger als nötig ausgelöst werden, und einen Trigger auswählen, der Geschäftsanforderungen und Leistungskosten in Einklang bringt.

Die Trigger selbst sind JavaScript-Code, der die Größe und Ausführung der Tag Manager-Kosten. Obwohl die meisten Auslöser klein sind, kann der kumulative Effekt addieren. Viele Click-Events oder Timer-Trigger können die Arbeitslast des Tag Managers erhöhen.

Geeignetes Triggerereignis auswählen

Die Auswirkungen auf die Leistung eines Tags sind nicht behoben. Grundsätzlich gilt: Je früher die ein Tag ausgelöst wird, desto größer ist sein Einfluss auf die Leistung. Ressourcen sind in der Regel Seitenaufbau und beim Laden oder Ausführen einer einer bestimmten Ressource (oder einem Tag) werden Ressourcen von etwas anderem weggenommen.

Auch wenn es wichtig ist, geeignete Trigger für alle Tags auszuwählen, Besonders wichtig bei Tags, die große Ressourcen laden oder lange Skripts erstellt.

Tags können ausgelöst werden auf Seitenaufrufe (normalerweise Page load, am DOM Ready, am Window Loaded) oder basierend auf einem benutzerdefiniertes Ereignis. Wir empfehlen, die Benachrichtigung auszulösen, um einen Einfluss auf den Seitenaufbau zu vermeiden. nicht notwendige Tags nach Window Loaded.

Benutzerdefinierte Ereignisse verwenden

Benutzerdefinierte Ereignisse können Sie Trigger als Reaktion auf Seitenereignisse auslösen, die nicht durch den integrierten Triggern von Google Tag Manager. Viele Tags nutzen z. B. Seitenaufrufe Trigger Allerdings kann der Zeitraum zwischen DOM Ready und Window Loaded auf vielen Seiten. Das kann die Feinabstimmung des Auslösens eines Tags erschweren. Benutzerdefiniert -Ereignisse bieten eine Lösung für dieses Problem.

Wenn Sie benutzerdefinierte Ereignisse verwenden möchten, erstellen Sie zuerst einen Trigger für ein benutzerdefiniertes Ereignis und aktualisieren Sie Ihre Tags um diesen Trigger zu verwenden.

Screenshot eines Triggers für ein benutzerdefiniertes Ereignis in Google Tag Manager

Übertragen Sie das entsprechende Ereignis an die Datenschicht, um den Trigger auszulösen.

// Custom event trigger that fires after 2 seconds
setTimeout(() => {
  dataLayer.push({
    'event' : 'my-custom-event'
  });
}, 2000);

Bestimmte Triggerbedingungen verwenden

Mit bestimmten Triggerbedingungen lässt sich verhindern, dass Tags unnötigerweise ausgelöst werden. Es gibt viele Möglichkeiten, dieses Konzept anzuwenden, aber es ist eine der einfachsten, dass ein Tag nur auf Seiten ausgelöst wird, auf denen es tatsächlich verwendet wird.

Screenshot mit Triggerbedingungen in Google Tag Manager

Integrierte Variablen in Triggerbedingungen eingebunden werden, um die Tag-Auslösung zu begrenzen.

Beachten Sie jedoch, dass komplexe Triggerbedingungen oder die Verarbeitungszeit an sich, also machen Sie sie nicht zu komplex.

Laden Sie den Tag Manager zu einem geeigneten Zeitpunkt.

Die Anpassung des Ladevorgangs im Tag Manager kann erhebliche Auswirkungen die Leistung. Trigger können unabhängig von ihrer Konfiguration erst ausgelöst werden, nachdem ein Tag Manager geladen wurde. Auch wenn es wichtig ist, gute Trigger für wie oben erläutert, einzelne Tags zu erstellen und beim Laden des Tags zu experimentieren. die gleiche oder größere Wirkung haben können, da diese einzelne Person wirkt sich auf alle Tags auf einer Seite aus.

Durch späteres Laden des Tag Managers erhalten Sie zusätzliche Kontrolle. Leistungsprobleme auftreten, da ein Tag Manager-Nutzer sonst ungewollt ein Tag zu früh ein, ohne sich der Auswirkungen bewusst zu sein.

Variablen

Mithilfe von Variablen können Daten von der Seite gelesen werden. Sie sind nützlich in Triggern in den Tags selbst.

Wie bei Triggern wird auch bei Variablen JavaScript-Code im Tag Manager hinzugefügt. und kann so zu Leistungsproblemen führen. Variablen können relativ einfach integriert sein Typen, die beispielsweise Teile der URL, Cookies, der Datenschicht oder des DOMs lesen können. Es kann sich aber auch um benutzerdefiniertes JavaScript handeln, das praktisch unbegrenzte Möglichkeiten hat.

Halten Sie Variablen einfach und auf ein Minimum, da sie ausgewertet werden müssen kontinuierlich durch den Tag-Manager. Nicht mehr verwendete Variablen entfernen um sowohl die Größe des Tag Manager-Skripts als auch die Verarbeitungszeit zu reduzieren, verwendet werden.

Tag-Verwaltung

Durch die effiziente Verwendung der Tags verringern Sie das Risiko von Leistungsproblemen.

Datenschicht verwenden

Die Datenschicht „enthält alle Informationen enthalten, die an Google Tag Manager übergeben werden sollen“. Mehr konkret handelt es sich dabei um ein JavaScript-Array mit -Objekten, die Informationen über auf der Seite. Außerdem können damit Tags ausgelöst werden.

// Contents of the data layer
window.dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];

// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});

// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});

Google Tag Manager kann auch ohne die Datenschicht verwendet werden. wird dringend empfohlen. Mit der Datenschicht lassen sich Daten konsolidieren, von Drittanbieter-Skripten an einem zentralen Ort abgerufen werden, einen besseren Einblick in seine Nutzung. Dies kann unter anderem dazu beitragen, redundante Variablenberechnungen und Skriptausführung. Bei Verwendung einer Datenschicht kontrolliert die Daten, auf die die Tags zugreifen, anstatt vollständiges JavaScript bereitzustellen. oder DOM-Zugriff haben.

Doppelte und nicht verwendete Tags entfernen

Doppelte Tags können auftreten, wenn ein Tag im HTML-Markup einer Seite in über einen Tag-Manager eingefügt werden.

Nicht verwendete Tags sollten pausiert oder entfernt werden. Ausnahme auslösen. Durch Pausieren oder Entfernen eines Tags wird der Code aus dem Container entfernt. tut das Blockieren nicht.

Wenn nicht verwendete Tags entfernt werden, sollten auch die Trigger und Variablen um zu sehen, ob sie entfernt werden können, wenn sie nur von diesen Nutzern verwendet wurden. Tags.

Zulassungs- und Sperrlisten verwenden

Zulassungs- und Sperrlisten sehr detaillierte Einschränkungen für Tags, Trigger und die auf einer Seite erlaubt sind. Dies kann verwendet werden, um die Leistung bestmöglich zu unterstützen und andere Richtlinien.

Zulassungs- und Sperrlisten werden über die Datenschicht konfiguriert.

window.dataLayer = [{
  'gtm.allowlist': ['<id>', '<id>', ...],
  'gtm.blocklist': ['customScripts']
}];

Beispielsweise ist es möglich, keine benutzerdefinierten HTML-Tags, Variablen oder direkten DOM-Zugriff. Das bedeutet, dass nur Pixel und vordefinierte Tags mit Daten aus der Datenschicht verwendet werden. Das ist zwar durchweg einschränkend, kann dies zu einer wesentlich leistungsfähigeren und sicheren Tag Manager-Implementierung führen.

Serverseitiges Tagging in Betracht ziehen

Der Wechsel zum serverseitigen Tagging ist keine leichte Aufgabe, aber es lohnt sich besonders für größere Websites, die mehr Kontrolle über ihre Daten. Beim serverseitigen Tagging wird der Anbietercode vom Client entfernt, und verlagert die Verarbeitung vom Client auf den Server.

Zum Beispiel beim clientseitigen Tagging, beim Senden von Daten an mehrere Analysen Konten bedeutet, dass der Client für jeden Endpunkt separate Anfragen initiiert. Beim serverseitigen Tagging hingegen sendet der Client eine einzige Anfrage an in den serverseitigen Container. Von dort aus werden die Daten Analytics-Konten.

Denken Sie daran, dass serverseitiges Tagging nur mit einigen Tags funktioniert. Tag Kompatibilität hängt vom Anbieter ab.

Weitere Informationen finden Sie unter Einführung in die serverseitige Tag-Kennzeichnung.

Container

Tag Manager lassen in der Regel mehrere Instanzen oder „Container“ zu. innerhalb ihrer einrichten. So können mehrere Container innerhalb eines Tags gesteuert werden Verwaltungskonto.

Verwenden Sie nur einen Container pro Seite

Mehrere Container auf einer einzigen Seite zu erheblichen Leistungsproblemen führen, und die Skriptausführung. Zumindest doppelte Einträge Haupt-Tag-Code selbst, der als Teil des JavaScript kann zwischen den Containern nicht wiederverwendet werden.

Mehrere Container werden selten effektiv verwendet. Es kann jedoch Situationen, in denen dies funktionieren kann – wenn es gut kontrolliert wird –, darunter:

  • Ein leichteres „Early Load“ Container und ein „höheres“ „späteres Last“ container, und nicht auf einen großen Container.
  • Ein eingeschränkter Container, der von weniger technisch versierten Nutzern verwendet wird, eingeschränkter, aber strenger kontrollierter Container für Tags, die nicht verwendet werden können im eingeschränkten Container.

Wenn Sie mehrere Container pro Seite verwenden müssen, folgen Sie Google Tag Manager Anleitung zum Einrichten mehrerer Container.

Verwenden Sie bei Bedarf separate Container

Wenn Sie einen Tag-Manager für mehrere Properties verwenden, z. B. eine Web-App und eine mobile App) – die Anzahl der verwendeten Container kann sich positiv oder negativ auf den Workflow auswirken. die Produktivität zu steigern. Außerdem kann sich dies auf die Leistung auswirken.

Im Allgemeinen kann ein einzelner Container effektiv für mehrere Websites, wenn die Nutzung und Struktur der Websites ähnlich sind. Beispiel: Obwohl ein oder Web-Apps ähnliche Funktionen bieten, ist es wahrscheinlich, dass der Apps werden anders strukturiert und daher effektiver verwaltet. durch separate Container.

Der Versuch, einen einzelnen Container zu weit zu verwenden, führt in der Regel unnötigerweise zu mehr Komplexität und Größe des Containers durch Erzwingen einer komplexen Logik um Tags und Trigger zu verwalten.

Behalten Sie die Containergröße im Blick

Die Größe eines Containers wird durch seine Tags, Trigger und Variablen bestimmt. Auch wenn ein kleiner Container die Seitenleistung beeinträchtigen kann, mit großer Wahrscheinlichkeit.

Die Containergröße sollte bei der Optimierung des Tags nicht der Hauptmesswert sein Nutzung; Große Container sind jedoch oft ein Warnzeichen dafür, nicht gut gepflegt und möglicherweise missbraucht wird.

Google Tag Manager limits-Container auf 200 KB groß. Bei einer Containergröße ab 140 KB wird eine Warnung ausgegeben. Sie können jedoch Die meisten Websites sollten darauf abzielen, ihre Container weitaus kleiner zu halten. Für ist der Medianwert der Website-Container etwa 50 KB groß.

Die Größe des Containers können Sie anhand der Größe der Antwort bestimmen. zurückgegeben von https://www.googletagmanager.com/gtag/js?id=YOUR_ID. Dieses Die Antwort enthält die Google Tag Manager-Bibliothek sowie den Inhalt der Container. Die Google Tag Manager-Bibliothek alleine ist etwa 33 KB groß. komprimiert.

Containerversionen benennen

Ein Container Version ist eine Momentaufnahme des Inhalts eines Containers zu einem bestimmten Zeitpunkt. Mit einer aussagekräftigen Namen und fügen Sie eine kurze Beschreibung Änderungen innerhalb von können erheblich dazu beitragen, dass Fehler in der zukünftigen Leistung Probleme.

Tagging-Workflows

Das Verwalten von Änderungen an Ihren Tags ist wichtig, um sicherzustellen, dass diese keine sich negativ auf die Seitenleistung auswirken.

Tags vor der Bereitstellung testen

Durch das Testen Ihrer Tags vor der Implementierung lassen sich Probleme (Leistungs- und Andernfalls) bevor sie versendet werden.

Beim Testen eines Tags sollten Sie unter anderem Folgendes berücksichtigen:

  • Funktioniert das Tag wie vorgesehen?
  • Führt das Tag Layoutverschiebungen durch?
  • Lädt das Tag Ressourcen? Wie groß sind diese Ressourcen?
  • Löst das Tag ein Skript mit langer Ausführungszeit aus?

Vorschaumodus

Im Vorschaumodus können Sie um Tag-Änderungen auf Ihrer Website zu testen, ohne sie auf dem öffentlich zugänglich sein. Der Vorschaumodus umfasst eine Debugging-Konsole, Informationen zu Tags.

Die Ausführungszeit von Google Tag Manager variiert (etwas langsamer) bei Ausführung im Vorschaumodus aufgrund des zusätzlichen Aufwands, der für die in der Debugging-Konsole. Der Vergleich von Web Vitals-Messwerten im Vorschaumodus erfasste Daten nicht mit denen aus der Produktion zu vergleichen. Diese Diskrepanz sollte sich jedoch nicht auf das Ausführungsverhalten der Tags auswirken. selbst.

Eigenständige Tests

Ein alternativer Ansatz zum Testen von Tags besteht darin, eine leere Seite mit einem Container mit nur einem Tag, also dem Tag, das Sie testen. Diese Testeinrichtung ist weniger realistisch sind und einige Probleme nicht erkennen (z. B. ob ein Tag ein Layout verursacht Es ist jedoch einfacher, die Auswirkungen der Schichten z. B. die Skriptausführung. Sehen Sie sich an, wie Telegraph isolierten Ansatz zu verbessern, Leistung von Drittanbietercode.

Tag-Leistung beobachten

Mit dem Google Tag Manager-Monitoring API verwendet werden kann, um Informationen zur Ausführung Zeit eines bestimmten Tags. Diese Informationen werden an einen Endpunkt Ihres Auswahl.

Weitere Informationen finden Sie unter Google Tag Manager erstellen Monitoring:

Genehmigung für Containeränderungen verlangen

Erstanbietercode wird vor der Bereitstellung in der Regel geprüft und getestet. behandeln Sie Ihre Tags gleich. Hinzufügen von in zwei Schritten Überprüfung Dazu ist eine Administratorgenehmigung für Containeränderungen erforderlich. dies. Wenn Sie die 2-Faktor-Authentifizierung nicht verwenden möchten, Änderungen im Blick behalten möchten, können Sie Container Benachrichtigungen an E-Mail-Benachrichtigungen über Containerereignisse Ihrer Wahl erhalten.

Regelmäßig die Tag-Nutzung prüfen

Eine der Herausforderungen bei der Arbeit mit Tags ist, dass sich diese in der Regel über mehrere time: Tags werden hinzugefügt, aber selten entfernt. Regelmäßige Überprüfung von Tags um diesen Trend umzukehren. Die ideale Häufigkeit dafür hängt davon ab, häufig die Tags Ihrer Website aktualisiert werden.

Wenn Sie jedes Tag so beschriften, dass der Inhaber klar ist, können Sie leichter feststellen, für dieses Tag responsiv ist und angeben kann, ob es noch benötigt wird.

Vergessen Sie beim Prüfen von Tags nicht, Trigger und Variablen zu bereinigen, gut. Auch sie können leicht die Ursache für Leistungsprobleme sein.

Weitere Informationen finden Sie unter Drittanbieter-Skripts steuern können.