Get best of the week

Benutzerdefiniertes HTML-Tag-Handbuch für Google Tag Manager von Simo Ahava

Ende Januar veröffentlichte Simo Ahava in seinem Blog einen Bericht über die Möglichkeit, benutzerdefinierte HTML-Tags in Google Tag Manager zu verwenden. Benutzerdefinierte HTML-Tags bieten ausreichend Gelegenheit, den Inhalt der Website zu ändern. Sie müssen jedoch sehr vorsichtig sein - Tag-Funktionen und deren Verarbeitung bergen große Risiken. Der MediaGuru-Analyst Timur Ledenyov hat diese nützliche Bewertung für Sie übersetzt.

Eine der wichtigsten GTM-Optionen war seit geraumer Zeit (seit Ende 2012) das benutzerdefinierte HTML-Tag. Mit diesem magischen Tool kann GTM einer Website-Seite ein HTML-Element hinzufügen. Seit 2012 hat sich Google Tag Manager von einer isolierten Umgebung mit benutzerdefinierten Tag-Vorlagen zu einer unbegrenzten clientseitigen Content-Management-Lösung entwickelt.

In diesem Artikel werden die Prinzipien des benutzerdefinierten HTML-Tags und die Möglichkeiten seiner Anwendung betrachtet.

Benutzerdefinierte HTML-Tag-Füllung


Wie der Name schon sagt, können Sie mit dem benutzerdefinierten HTML-Tag HTML-Elemente auf der Site-Seite platzieren. Lassen Sie es uns erstellen:



<script>
  console.log('Hello!');
</script>

<div>
  <span>Hello!</span>
</div>

Dieses Tag fügt der Seite drei Elemente hinzu:

  • <script>, das in JavaScript kompiliert und ausgeführt wird;
  • Block div;
  • <span>enthalten in <div>

Wenn Sie einen Container veröffentlichen und die minimierte Quelle des JavaScript-Containers betrachten, sieht dies folgendermaßen aus:



Ihr schön geformtes Tag sieht folgendermaßen aus, da der HTML-Code codiert ist. Dies ist ein kluger Schritt, bevor Sie Zeichenfolgen als HTML-Elemente definieren.

Die Flags enableIframeMode und enableEditJsMacroBehavior sind die alten Funktionen, die in der Benutzeroberfläche nicht mehr sichtbar sind. Sie können sie in der benutzerdefinierten HTML-Tag-Oberfläche sichtbar machen, wenn Sie wissen, wie. Aber es wird nichts beeinflussen.

Sie haben also ein benutzerdefiniertes HTML-Tag erstellt und gesehen, wie es dem Container hinzugefügt wird. Aber was passiert dann auf der Seite und wo genau?

Injektion


Wenn das benutzerdefinierte HTML-Tag im Google Tag Manager ausgelöst wird, wird der folgende Mechanismus gestartet:

  1. Es wird ein Dummy erstellt <div>, dem mithilfe des Attributs .innerHTML eine codierte Zeichenfolge hinzugefügt wird, die Ihr benutzerdefiniertes HTML-Tag darstellt.
  2. Dies zwingt den Browser, die codierte Zeichenfolge als HTML zu behandeln, sodass Tags, die zu benutzerdefiniertem HTML hinzugefügt wurden, in HTML-Elemente konvertiert werden.
  3. Diese Elemente werden nacheinander entfernt <div>und zur Injektion weitergeleitet.
  4. Anschließend wird jedes Element als letztes untergeordnetes document.body-Element hinzugefügt.

Es gibt einige Nuancen in diesem Prozess:

  • Wie Google Tag Manager mit onHtmlSuccess und onHtmlFailure in der Warteschlange interagiert
  • wie Elemente <script>vor der Injektion von allen Benutzerattributen befreit werden.

Was bedeutet das? Alles, was Sie in das benutzerdefinierte HTML-Tag eingeben, wird am Ende des Körpers hinzugefügt, unabhängig davon, was es zum Zeitpunkt der Injektion war. Normalerweise bedeuten sie Seitenfuß, aber dies ist angesichts moderner Seitenlayouts nicht erforderlich.



Wichtig: Wenn Sie der Seite ein neues Element hinzufügen, ordnen Sie den Inhalt neu an. Normalerweise sollte der Browser die Größen, die Position, das Layout und die Attribute der Elemente neu berechnen. vor, umgebend oder in einem eingebetteten Element verschachtelt.

Es ist nicht so einfach. Jedes Element, das Sie hinzufügen, verschärft das Problem. Und in einseitigen Anwendungen, bei denen das DOM zwischen den Übergängen möglicherweise nicht zurückgesetzt wird, können Sie Hunderte solcher Elemente auf einer Seite beobachten, von denen jedes die Leistung immer mehr verschlechtert. Wir werden abschließend darauf zurückkommen, aber vor dem Abschluss werde ich sagen:

Vermeiden Sie die Verwendung von benutzerdefinierten HTML-Tags ohne offensichtliche Notwendigkeit.

Ich gebe zu, ein solcher Haftungsausschluss für den Artikel ist nicht ohne Ironie.

Benutzerdefinierte HTML-Skriptskripte


Warum diese Tags verwenden und eine Tag-Management-Lösung anwenden, um ein Element einzufügen? Eine ausgezeichnete Frage, auf die ich keine schnelle und endgültige Antwort habe.

Ich kann sagen, dass eine große Anzahl von benutzerdefiniertem HTML im Container über eine der folgenden Situationen sprechen kann:

  1. Sie stehen vor einem zu komplizierten Fall, für den Standard-GTM-Tags oder benutzerdefinierte Vorlagen nicht geeignet sind.
  2. Sie sind neu in GTM (oder JavaScript) und verstehen nicht, dass Ihre benutzerdefinierten HTML-Tags durch Standard-Tags oder benutzerdefinierte Vorlagen ersetzt werden können.
  3. , -, .
  4. , - .
  5. , Google Tag Manager, .

Dies ist Ihr Container, und Sie haben natürlich das Recht, ihn nach Belieben zu verwenden. Wenn jedoch die Szenarien 2 und 3 angezeigt werden, empfehle ich dringend, Änderungen am Status Quo vorzunehmen. Das Ignorieren der Komplexität von GTM und JavaScript kann die positiven Auswirkungen dieser Technologien beeinträchtigen. Wenn Sie langfristig gegen die in Ihrem Unternehmen festgelegten Einschränkungen arbeiten, kommt es auch zu Meinungsverschiedenheiten und zu Kommunikationsstörungen, einer schrecklichen Website und einer unzuverlässigen Speicherung von Informationen.

Schauen wir uns einige Szenarien an, in denen Sie wahrscheinlich benutzerdefinierte HTML-Tags ausprobieren möchten.

Hinzufügen eines Elements zu einer bestimmten Stelle auf der Seite


Der Nachteil des benutzerdefinierten HTML-Tags besteht darin, dass das Element am Ende eingebettet wird <body>. Wozu? Wenn das Element eine visuelle Komponente ist (d. H. Es sollte auf dem Bildschirm angezeigt werden), ist es höchstwahrscheinlich, dass das Ende <body>nicht der Ort ist, an dem Sie es sehen möchten. Um dies zu umgehen, müssen Sie JavaScript und seine DOM-Manipulationsmethoden verwenden.

Der Trick besteht darin, ein Element zu finden, das sich bereits auf der Seite befindet, und ein neues Element relativ dazu zu platzieren.

Zum Beispiel möchte ich eine kleine Unterüberschrift für die Seite hinzufügen, damit sie so aussieht:



Wenn Sie nun einen benutzerdefinierten HTML-Code wie folgt erstellen: <h3> It's really cool - I promise!</h3>wird das Element am Ende hinzugefügt <body>und sieht nicht sehr gut aus.

Also brauche ich stattdessenErstellen Sie ein neues Element mit JavaScript und positionieren Sie es dann relativ zum Seitentitel.

<script>
  (function() {
    //    <h3> 
    var h3 = document.createElement('h3');
    
    //  
    h3.innerText = "It's really cool - I promise!";
    
    //     <h1>
    var title = document.querySelector('h1');
    
    //      <h1>
    if (title) {
      title.parentElement.insertBefore(h3, title.nextSibling);
    }
  })();
</script>

Das Endergebnis sehen Sie im obigen Screenshot.

Dies ist eine subtile Ironie - Sie verwenden benutzerdefiniertes HTML, um ein Element ( <script>) zu erstellen, das ein anderes Element ( <h3>) erstellt. Ja, es wäre großartig, wenn Sie in benutzerdefiniertem HTML definieren könnten, wo sich das Element befindet. In der Tat wäre es noch cooler, wenn es eine benutzerdefinierte Vorlage gäbe, mit der Sie ein Element erstellen können, mit der Sie einen Ort für das Element auswählen können. Sie müssen das Skript also überhaupt nicht am Ende des Codes einfügen! Aber wir waren abgelenkt.

Platzieren Sie das Skript <head>so hoch wie möglich


Dies ist teilweise auf das vorherige Szenario zurückzuführen, verdient jedoch besondere Aufmerksamkeit, je nachdem, wie oft diese Situation auftritt. Manchmal werden Sie gefragt: "Platzieren Sie das Skript so viel wie oben in <head>."

Sie müssen das Skript also so früh wie möglich auf der Seite ausführen. Je höher das Element in <head>, desto schneller verarbeitet der Browser es als Teil der angezeigten Seite.

Dieser Vorteil geht jedoch bei Verwendung von Google Tag Manager verloren. Wenn die GTM-Bibliothek geladen wurde, ist die Verarbeitung normalerweise <head>bereits beendet und der Browser rendert mit Macht und Haupt <body>. Aus diesem Grund macht der Versuch, ein Skript <head>so hoch wie möglich hinzuzufügen, keinen Sinn und schadet nur dem Endergebnis.

Warum? Wenn Sie benutzerdefiniertes HTML erstellt haben, bildet es ein Element und bettet es ein<head>. Zuerst muss der Browser benutzerdefiniertes HTML hinzufügen (Leistungstreffer), dann ein neues Element erstellen (ein weiterer Leistungstreffer) und schließlich ein neues Element hinzufügen <head>(Leistungstreffer).


Stattdessen müssen Sie <script>HTML direkt zu Benutzerdefiniert hinzufügen . Mit dieser Methode wird es am Ende hinzugefügt <body>und vom Browser so schnell wie möglich ausgeführt.

Herunterladen von JavaScript-Code von Drittanbietern


Setzen wir das Experiment aus dem vorherigen Szenario fort. Angenommen, Sie haben einen Drittanbieter, dessen JavaScript-Code Sie auf die Site hochladen möchten. Und Sie haben festgestellt, dass Sie <script>der Seite nur mit benutzerdefiniertem HTML ein Element hinzufügen müssen .

In diesem Fall müssen Sie überhaupt kein benutzerdefiniertes HTML verwenden.

Erstellen Sie stattdessen eine benutzerdefinierte Vorlage, die die InjectScript-API zum Laden der Bibliothek verwendet.

Benutzerdefinierte Vorlagen sind für das Einfügen und Laden von JavaScript optimiert und bieten eine Berechtigung und ein Richtlinienmodell für eine sichere (sicherere) Einspeisung.



In Zukunft wird dies die beste Implementierung sein<script>. Dies hilft Ihnen bei anderen Skripten nicht, da der Standardsatz an JavaScript-Vorlagen recht begrenzt ist. Wenn Sie beispielsweise einen benutzerdefinierten Ereignis-Listener hinzufügen möchten, benötigen Sie daher ein benutzerdefiniertes HTML-Tag.

Ändern Sie ux


Eines der Dinge, die Sie mit benutzerdefiniertem HTML tun möchten, ist das Ändern von UX (User Experience). Zu diesem Zweck können Sie so etwas wie ein Cookie-Banner verwenden. Sie können die Stile auf der Seite ändern oder hinzufügen <iframe>, wodurch ein praktisches Widget für Ihre E-Commerce-Website geladen wird.

Ich möchte Sie vor den Risiken warnen, die mit dem Google Tag Manager verbunden sind.

  1. (, Brave) / GTM. ( , ).
  2. / , . , HTML . Google Tag Manager , , , . querySelector() , – - .
  3. Hinzu kommen die oben genannten leistungsbezogenen Gründe. Wenn Sie jedes dynamische Element in aufsteigender Reihenfolge hinzufügen, wird die Seitenleistung beeinträchtigt, was zu ärgerlichen Dingen führt: Ihre benutzerdefinierten Elemente werden angezeigt und verschwinden. Die Qualität der Daten verschlechtert sich (wenn der Iframe, den Sie dynamisch ändern, Zeit hat, bevor Änderungen vorgenommen werden), bis hin zu Verzögerungen und Einfrieren der Seite, insbesondere auf Websites mit nur einer Seite.

Berücksichtigen Sie daher nicht die Verwendung von Google Tag Manager als Content-Management-System.

Ergebnisse


Dies war eine kurze Übersicht über die Funktionen von benutzerdefinierten HTML-Tags.

Wenn ich 2012 mit mir selbst sprechen könnte, würde ich mir raten, die Mängel von benutzerdefinierten HTML-Tags so früh wie möglich zu berücksichtigen und keine Illusionen über die endlosen Möglichkeiten von Google Tag Manager zum Hinzufügen von Skripten zu machen. Vielmehr sollten Sie komplex denken - über die Organisation, über den gesamten Standort und über den Kontext der Umgebung, in der GTM arbeitet -, bevor Sie riskante Entscheidungen treffen.

Es gibt jedoch heute Anwendungen für benutzerdefiniertes HTML. Das Erstellen eines Klick-Listeners mit dem benutzerdefinierten HTML-Tag (document.addEventListener ()) kann sich als vorteilhafter herausstellen als das Ausführen eines benutzerdefinierten Codes mit GTM-Triggern.


Dies liegt daran, dass der Klick-Trigger das Tag bei jedem Auslösen immer wieder ausführt (immer wieder injiziert). Wenn Sie Ihren Klick-Listener in einem benutzerdefinierten HTML-Tag erstellen und damit eine sich wiederholende Aufgabe verarbeiten, vermeiden Sie Verwirrung während der Implementierung.

Ich bürge auch energisch für die Bequemlichkeit von benutzerdefiniertem HTML bei der Unterstützung von Hypothesen. Sie können schnell ein neues Design oder eine neue Funktionalität ausprobieren, indem Sie Änderungen an einer bestimmten Stichprobe von Besuchern veröffentlichen. Wenn die Ergebnisse zufriedenstellend sind, können diese Änderungen zur Aufnahme in den Hauptcode der Website vorgeschlagen werden.

Ich hoffe jedoch, dass eines Tages benutzerdefinierte Vorlagen benutzerdefinierte HTML-Tags ersetzen werden.

Als Abschiedswort für diejenigen, die benutzerdefinierte HTML-Tags verwenden, insbesondere für diejenigen, die im Netzwerk gefundenen Code hinzufügen möchten, ist das berühmte russische Sprichwort nützlich:
Vertrauen, aber überprüfen.

Wenn Sie nicht wissen, was der Code tut, wenden Sie sich an einen vertrauten Webentwickler.

More articles:


All Articles