Wie man TWIPLA installiert auf jedweder HTML-Webseite

Sobald Sie Ihr neues Ereignis-Tag erstellt haben, müssen Sie es in Ihre Webseite integrieren, damit die Anwendung das Auslösen dieses Ereignisses verfolgen kann. Jedes erstellte Tag muss in jedem einzelnen Element, das Sie verfolgen möchten, hinzugefügt werden.

Es ist ziemlich einfach und es gibt verschiedene Möglichkeiten, dies zu tun:

Bearbeiten Sie Ihren HTML-Quellcode und fügen Sie den Event-Tag zu den gewünschten Elementen hinzu.

Sie können den Tag, den unsere App für Ihr Ereignis erstellt, entweder als JS-Snippet oder direkt auf dem Element hinzufügen, wie in der folgenden Anleitung beschrieben.

Hier ist ein Beispiel für eine Schaltfläche in HTML und wie es aussehen sollte, damit der Klick auf diese Schaltfläche als ein Ereignis verfolgt wird:

<button id="important-btn">Click me!</button>

Option A: JS snippet

<script>
document.getElementById("important-btn")
  .addEventListener("click", function(){
    va("send", "event", "example-category", "btn-click", "Important Button")
  });
</script>

Option B: directly on the element

<h2 onclick="va('send', 'event', 'example-category', 'btn-click', 'important', 123);">Important button</h2>

Beide Optionen sind semantisch korrekt und bewirken im Idealfall das Gleiche.

Option A lässt jedoch mehr Flexibilität zu. Sie könnten zum Beispiel eine "visa-track"-Klasse zu mehreren Elementen hinzufügen und die va-Methode dynamischer aufrufen, indem Sie sich auf JS-Fähigkeiten verlassen.

Die Einschränkung bei Option B besteht darin, dass sie von einem anderen JS-Code überschrieben werden könnte, der nach dem Rendern des DOM geladen wird (element.onclick = function(){ ... }), so dass unser Code nie aufgerufen wird.

Im Vergleich dazu erlaubt Option A das Hinzufügen einer unbegrenzten Anzahl von Ereignis-Listenern (solange der Speicher des User-Agent-Geräts dies zulässt).