Struktureller Aufbau

Hier finden Sie Details zum allgemeinen Aufbau für Integrationsvariante 3.

Icon

Hinweise zur Abwärtskompatibilität:

Die hier vorgestellte Integrationsvariante funktioniert mit der Analytics JS-Bibliothek 3 und Analytics JS-Bibliothek 2, ab Version 51.0. Beachten Sie zur Kompatibilität die Hinweise unter Übersicht Integrationsvarianten.

Einbindung in eine HTML-Seite

Es gibt drei Bereiche, die integriert werden müssen: 

1. Bereich: Emos3-Header

Der erste Bereich ist für das Zwischenspeichern der Daten verantwortlich, falls die Analytics JS-Bibliothek noch nicht geladen wurde. In diesem Bereich werden auch die Standardwerte (defaults) definiert. Siehe Globale Variablen bei mehreren Aktionen auf einer Seite.

Icon

Der Emos3-Header muss immer als erstes vor dem Laden der Analytics JS-Bibliothek sowie vor Nutzung der econda Schnittstelle definiert werden. Idealerweise sollte der Emos3-Header bereits im Head-Bereich der HTML-Seite definiert werden, damit z. B. Onclick-Events die Methode send bereits nutzen können, obwohl die Analytics JS-Bibliothek noch nicht geladen ist. 

Das Array stored speichert die econda Requests solange zwischen, bis die eigentliche Analytics JS-Bibliothek geladen wurde. Mit der Funktion window.emos3.send(emosProps) werden die Daten gesendet. Die Funktion kann bereits nach diesem script-Tag genutzt werden, obwohl die eigentliche Analytics JS-Bibliothek noch nicht geladen ist. Die Analytics JS-Bibliothek versendet diese zwischengespeicherten Daten dann automatisch sobald sie geladen wurde.

2. Bereich: Laden der Analytics JS-Bibliothek

Das Laden der Analytics JS-Bibliothek kann auch asynchron erfolgen:

Ersetzen Sie die Angabe PATH/TO durch den tatsächlichen Pfad zur Analytics JS-Bibliothek (Datei emos3.js).

Hinweis: Dieser Bereich könnte auch erst nach dem 3. Bereich (Absenden der Daten) eingebunden werden. Wir empfehlen jedoch eine frühe Einbindung, damit die Daten möglichst früh gesendet werden und nicht verloren gehen.

3. Bereich: Absenden der Daten

Mit der Funktion window.emos3.send können Sie den econda Request absenden:  

Sicherheitshinweis: Strings müssen richtig escaped werden. Nicht richtig escapte String-Literale führen nicht nur zu Fehlern, sondern stellen eine Sicherheitslücke dar, die für einen Angriff auf Ihre Seite genutzt werden könnte. Siehe auch Escape-Regeln für JavaScript. Auch die Zeichenfolge '</' darf im String-Literal nicht vorkommen. Verständlich wird dies z. B. bei einer internen Suche mit Suchbegriff '</script>'. Im ausgegebenen JavaScript-Code darf dann nicht Folgendes stehen: search : ['</script>', 4]. Die Zeichenfolge '</script>' wird immer als Ende des script-Tags interpretiert. Dieser Umstand kann auch für einen Angriff auf Ihre Seite genutzt werden. Siehe auch Cross-Site-Scripting.

Hinweis: Auch die Zeichen &<> können in einem script-Tag ggf. ein Problem darstellen. Im 'strict'-interpretierten XHTML (ausgeliefert mit Content-Type application/xhtml+xml) bzw. in XML werden diese immer als Markup (als Entity-Beginn bzw. Tag-Beginn und Ende) interpretiert und nicht als einfache Zeichen. In diesem Fall müssten Sie stattdessen &amp;&lt;&gt; nutzen. Um dies zu vermeiden, sollten Sie in XHTML den JavaScript-Code als CDATA ausliefern. Die HTML4- und HTML5-Spezifikation nimmt implizit an, dass innerhalb des script-Tags ein CDATA-Bereich existiert. Ein CDATA-Bereich ist in HTML also unnötig. Für weitere Informationen siehe Cross-Site-Scripting und Escape-Regeln für HTML/XHTML (Entities).

Hinweis: JSON-Bibliotheken sind gut geeignet, um String-Literale richtig und sicher gegen Cross-Site-Scripting zu generieren. Wir empfehlen daher die Nutzung einer JSON-Bibliothek zum serverseitigen Generieren der String-Literale.

Beispiel in HTML-Syntax:

Beispiel in XHTML-Syntax:

Siehe auch Escape-Regeln für HTML/XHTML (Entities)

Icon

Sie verwenden eine veraltete Integrationsmethode! Wir empfehlen Ihnen, baldmöglichst auf die aktuelle Integrationsmethode umzusteigen. Für weitere Informationen siehe Übersicht Integrationsvarianten.

Die Integration erfolgt entweder durch Einfügen von JavaScript-Code direkt in den Quelltext einer Seite (z. B. über ein Template) oder über externe Analytics JS-Bibliothek. Die Übermittlung der Daten an econda erfolgt über einen Funktionsaufruf, der auch zur Laufzeit über ein JavaScript-Event aufgerufen werden kann.

Hinweise zur Abwärtskompatibilität

Seit 2009 wird eine Form der Integration genutzt, die mit JavaScript funktioniert und die die bisherige Integration über Anchor-Tags vollständig ersetzt. Voraussetzung zur Nutzung der neuen Integration ist eine geeignete Analytics JS-Bibliothek (Datei „emos2.js“). Diese muss eine Versionsnummer 41 oder höher haben, bzw. nach dem 01.09.2009 ausgeliefert worden sein.

Aus Gründen der Kompatibilität mit der bisherigen Integration über Anchor-Tags, gibt es einen Schalter (Parameter), der je nach ausgelieferter Analytics JS-Bibliothek vorher gesetzt werden muss, wenn diese nicht bereits schon entsprechend ausgeliefert wurde. Wenn Sie sich nicht sicher sind, sollten Sie diesen Parameter auf jeder Seite einbinden und auf den Wert 2 (für neue Integration) setzen.

Der JavaScript-Code muss vor der eigentlichen Integration eingebunden werden.

Reihenfolge der Integration

Die Integration wird nach folgendem Schema eingebunden:

1. Einbinden der Analytics JS-Bibliothek:

2. Einleiten des JavaScript-Blocks:

3. Initialisieren des JavaScript-Objekts (Array):

4. Befüllen des Arrays mit den gewünschten Werten (Parameterliste):

5. Übermitteln des Arrays mit den eingetragenen Werten (Messen). Kann auch erst über eine Benutzeraktion oder ein beliebiges JavaScript-Event ausgelöst werden:

6. Abschluss des JavaScript-Blocks:

Beispiel:

 

Hinweise

  • Ersetzen Sie die Angabe PATH/TO durch den tatsächlichen Pfad zur Analytics JS-Bibliothek (Datei emos2.js), 
  • Sonder- und Steuerzeichen (z. B. einfache Anführungszeichen) sollten in JavaScript mit Escape-Sequenzen versehen werden, um Syntaxfehler zu vermeiden.
  • Um den JavaScript-Code XHTML-konform einzubinden, sollte dieser als CDATA deklariert werden. Leiten Sie dazu den JavaScript Code mit <![CDATA[ ein und beenden ihn mit _]]>.
  • Beachten Sie auch die Hinweise unter Globale Variablen bei mehreren Aktionen auf einer Seite.
  • No labels