In der vergangenen Woche hat das All-Star-Team von Adobe Dynamic Tag Management einige attraktive neue Funktionen zu den veranstaltungsbasierten Regeln der DTM hinzugefügt. Es gibt zwei neue Ereignistypen für ereignisbasierte Regeln, die Sie verwenden können.

1. Brauch
2. PushState oder Hashchange

Lesen Sie die folgenden Abschnitte für weitere Informationen zu jedem Ereignistyp.

Ereignisbasierte Regel: Benutzerdefiniert

Lassen Sie uns zunächst ein benutzerdefiniertes Ereignis definieren. Sehen wir uns einige Beispiele für andere ereignisbasierte Regeln in der DTM an. Nachfolgend finden Sie die Liste der Ereignistypen für ereignisbasierte Regeln.

Beim Erstellen einer ereignisbasierten Regel können Sie diese für bestimmte Standardereignisse einrichten. Jeder Browser (sogar Internet Explorer) hat Standardereignisse, die für bestimmte Aktionen ausgelöst werden können. Einige der einfachen sind:

• Mausklicks
• Mouse Overs (über etwas auf der Seite schweben)
• Formularfeldfokus (der Cursor bewegt sich in ein Formularfeld)
• Formularfeld verschwimmt (der Cursor verlässt ein Formularfeld)
• Formular einreicht
• usw.

Diese alle machen Sinn; Das sind Dinge, die wir jeden Tag im Internet tun. Manchmal müssen Sie etwas nachverfolgen, und es ist fast unmöglich, es richtig zu machen. Aus diesem Grund verwende ich gerne JavaScript-Ereignisse. Stellen Sie sich ein Ereignis als Radiowellen vor. Sie werden ausgestrahlt, damit jeder sie hören kann, aber Sie müssen sich auf die richtige Frequenz einstellen, um sie zu hören. Wenn Sie senden und niemand zuhört, keine große Sache (sagen Sie es nicht den Radiowerbetreibenden). Dasselbe gilt für Ereignisse: Sie können ein Ereignis auslösen, und es verursacht keine Probleme oder wirft keine Fehler, wenn nichts darauf wartet. Und wenn Sie auf ein Ereignis warten, das nie eintritt, wird es auch keine Probleme verursachen oder Fehler werfen.

Warum ist das wichtig? Eine der alten Methoden zum Verfolgen von Aktionen bestand darin, eine benutzerdefinierte JavaScript-Funktion zu erstellen und sie dann aufzurufen oder einen sehr spezifischen Codesatz zu implementieren, der entweder spezifisch für ein Tag-Management-System oder eine andere Codebasis ist. Aber was, wenn diese Funktion irgendwie entfernt oder umbenannt wurde? Sie würden JavaScript-Fehler erhalten, die manchmal eine Website beschädigen könnten. Events lösen dieses Problem.

Wenn Sie mit den Direktrufregeln von DTM vertraut sind, fragen Sie sich vielleicht: „Warum nicht einfach eine Direktrufregel verwenden?“ Eine berechtigte Frage. Das Problem besteht darin, dass Direktrufregeln eine Abhängigkeit von DTM aufbauen. Wenn ich ein Entwickler bin und mir jemand sagt, ich solle einen Haufen Code in meinen Code einbauen, der auf _satellite.track verweist, würde ich das hinterfragen und höchstwahrscheinlich nein sagen! Stattdessen können Sie ein Ereignis verwenden, das keine Abhängigkeiten hat.

Um ein Ereignis abhören zu können, müssen Sie zuerst eines auslösen. Ereignisse sollten von Ihren Entwicklern im Code der Site definiert werden. Es kann etwas schwierig sein, zu erkennen, wann und wo eins verwendet werden soll, aber eine einfache Faustregel lautet: Wenn Sie etwas verfolgen möchten und es nicht mit einem vordefinierten DTM-Ereignistyp verfolgen können, verwenden Sie ein benutzerdefiniertes Ereignis. Wir können einige gute Informationen dazu von Mozilla finden. Es gibt 2 grundlegende Ereignistypen:

• Ereignis – Auslösen, dass etwas passiert ist, ohne zusätzliche Daten über das Ereignis zu senden
• CustomEvent – ​​Fügen Sie dem Ereignis einige Daten hinzu

Ich verwende ein Beispiel mit einem benutzerdefinierten Ereignis, da Sie damit Daten hinzufügen können. Nehmen wir an, wir haben einen Einkaufswagen, und wenn Sie etwas in den Einkaufswagen legen, verwendet er AJAX. Das bedeutet, dass keine neue Seite geladen wird, sondern möglicherweise ein Popup oder eine Nachricht angezeigt wird, die Sie darüber informiert, dass ein Artikel zum Einkaufswagen hinzugefügt wurde. In diesem Fall kann ich ein benutzerdefiniertes Ereignis erstellen, das mir genau sagt, was hinzugefügt wurde:

 var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice}); document.getElementById('minicart').dispatchEvent(addToCart);

Im obigen Code können Sie sehen, dass ich auf Daten von einem Objekt namens „data“ verweise. Ich definiere die benutzerdefinierten „Detail“-Daten als Objekt, auf das ich dann verweisen kann, wenn ich auf das Ereignis höre. Nachdem ich das Ereignis erstellt habe, löse ich es dann auf einem bestimmten Element aus, in diesem Fall einem Element auf der Seite mit der ID „minicart“. Jetzt habe ich ein benutzerdefiniertes Ereignis, das für alle übertragen wird, die zuhören möchten.

Als nächstes werde ich eine Regel konfigurieren, um in DTM zu lauschen:

1. Fügen Sie eine neue ereignisbasierte Regel hinzu
2. Gib ihm einen Namen
3. Wählen Sie den Ereignistyp „Benutzerdefiniert“ und geben Sie den Ereignisnamen ein, den wir als „addToCart“ definiert haben.
   
4. Definieren Sie das Tag oder Element, das dieses Ereignis haben soll. Bei Verwendung von CSS-Selektoren ist dies „#minicart“.
   
5. Konfigurieren Sie die Regel. Hier wird es kühl. Sie können das in der Veranstaltung bereitgestellte „Detail“ verwenden und es sogar als Objekt verwenden. DANKE ADOBE! Hier sende ich ein Google Analytics-Ereignis mit den gewünschten Daten. Sie können auf die Daten verweisen, indem Sie %event.detail% verwenden, oder wenn Sie ein Objekt haben, können Sie es als %event.detail.<<name>>% referenzieren. Siehe das Beispiel unten.
   
   Ich würde wahrscheinlich niemals ein Ereignis wie dieses senden, aber Sie erhalten einen Überblick darüber, wie es verwendet werden kann. Und wenn Sie es in benutzerdefiniertem Code verwenden müssen, sagen wir für das Adobe Analytics-Tool, können Sie es als _satellite.getVar(“%event.detail.product_id%”) referenzieren. GROSSARTIGE SOSSE!!!

Das sollte kein Roman werden, aber ich wollte zeigen, wie großartig dieses Feature ist. So sehr ich Direct-Call-Regeln auch liebe, sie treten in meinen Implementierungen in den Hintergrund, und benutzerdefinierte Events sind wie ein Schrotflinte.

pushState oder hashchange

pushState

Schauen wir uns nun pushState an. Es erlaubt Ihnen grundsätzlich, die URL der Seite/Site zu aktualisieren, ohne tatsächlich eine neue Seite laden zu müssen. An sich macht das nichts, aber es ermöglicht die Verwendung von Single-Page-Apps. Es gibt mehrere Frameworks, die diese Funktion nutzen. Wenn Ihre Website also so aufgebaut ist, kann die pushState-Funktion wirklich praktisch sein!

Beim Einrichten der Regel wählen Sie natürlich den neuen Ereignistyp aus.

Es werden keine CSS-Selektoren benötigt, um es weiter zu definieren. Sie sollten sich jedoch einige Bedingungen ansehen. Wenn Sie sich nur die neue URL ansehen, verwenden Sie hauptsächlich den Pfad. Das ist es!

Hashwechsel

Dank Twitter wissen wir alle, was ein Hash ist (Hashtags), also muss sich Hashchange auf eine Änderung des Hashs beziehen! Das Coole am Hash ist, dass Sie ihn nach Belieben ändern können und die Seite nicht geladen wird. Hashes können für viele Zwecke verwendet werden, daher werden wir nicht auf die Gründe eingehen, warum jemand dies haben würde. Bevor es pushState gab, war es nicht ungewöhnlich, den Hash mit neuen Inhalten für AJAXy- oder Single-Page-Sites zu aktualisieren.

Um eine neue Regel zu konfigurieren, wählen Sie denselben Ereignistyp wie pushState aus. Der einzige Unterschied besteht darin, dass Sie jetzt den Hash als Kriterium betrachten können. Zum Beispiel:

Abschluss

Adobe DTM ist das beste Tag-Management-System auf dem Markt, und zum Glück für Ihre Adobe-Kunden ist es kostenlos! Verwenden Sie diese hilfreichen Tipps, um seine Kraft und sein Potenzial zu nutzen, und schauen Sie öfter vorbei, um mehr zu erfahren! Wenn Sie Hilfe bei der Analyse Ihrer Website suchen, kontaktieren Sie uns und wir senden Ihnen ein kostenloses Angebot, wie wir Ihnen helfen können!