Tracking

Um Klicks, Besuche, Engagement oder andere Metriken über Ihre Nutzer:innen zu sammeln, können externe Analyse-Systeme angebunden werden. Außerdem liefern die Publikationen Custom Events, auf die gelauscht werden kann.

Für das Tracking ist es erforderlich, die Zustimmung von Nutzer:innen einzuholen. Bitte beachten Sie hierzu auch den Bereich CMP.

Integration von Analyse-Systemen

Die Integration erfolgt über den Tab Scripts in der Bearbeitungsmaske einer Publikation.

Der Tab Scripts ist ab dem Paket Starter verfügbar.

Es gibt die Möglichkeit, sowohl externe Scripte als auch Inline-Javascript zu integrieren. Das Javascript wird im <head> der Seite eingebunden. Jedes Inline-Javascript wird in einem eigenen <script>-Tag integriert, für den jeweils zusätzliche Attribute hinterlegt werden können.

Für externe Scripte stehen folgende Einstellungsmöglichkeiten zur Verfügung:

Source: Das src-Attribut
Load method: sync, async, defer oder preload
Position: Auswahl, ob das Script vor oder nach den Inline-Scripts geladen werden soll
Attributes: Möglichkeit, dem <script>-Tag weitere Attribute hinzuzufügen

Konfiguration eines externen Scripts mit Source, Lademethode, Position und Attributen

Integration am Beispiel von Google Analytics 4

Google Analytics bietet die Möglichkeit, das Tracking via Google Tag Manager oder direkt über das Google-Tag einzubinden.

Google Tag Manager

Für den Google Tag Manager wird kein externes Script benötigt. Das im Google Tag Manager hinterlegte Script kann direkt inline integriert werden.

Wichtig ist, dass das dataLayer-Objekt vor der Integration des Google Tag Managers definiert wird. Der Code kann direkt im selben oder einem eigenen Code-Block integriert werden.

JavaScript

window.dataLayer = window.dataLayer || [];

Separater Inline-Script-Block für die dataLayer-Initialisierung vor dem Tag Manager

Damit ist die Integration abgeschlossen. Alle weiteren Einstellungen werden im Google Tag Manager durchgeführt.

Google Tag

Für die direkte Einbindung des Google-Tag muss zunächst ein externes Script für die Bibliothek angelegt werden. Folgende Angaben sind erforderlich:

Source: https://www.googletagmanager.com/gtag/js?id=[G-ID]
Load method: async
Position: „Before inline script"

Achten Sie darauf, dass als Position „Before inline script" ausgewählt wird, da der dataLayer nach der Einbindung des Google-Tag definiert wird.

JavaScript

window.dataLayer = window.dataLayer || [];

Die Integration ist damit abgeschlossen. Für die Übergabe von Events oder anderen Daten kann das dataLayer-Objekt genutzt werden.

Integration am Beispiel von Adobe Analytics

Für die Integration von Adobe Analytics ist die Einbindung des Tags-Script Voraussetzung. Diese erfolgt mithilfe eines externen Scripts innerhalb einer Publikation. Die Attribute sollten wie folgt ausgefüllt werden:

Source: https://assets.adobedtm.com/.../launch-[ID].min.js
Load method: async
Position: „After inline script"

In diesem Fall muss „After inline script" ausgewählt werden. Dies ermöglicht die Übergabe von Objekten an den Adobe Data Layer.

Der Data Layer wird als Inline-Script integriert:

JavaScript

window.adobeDataLayer = window.adobeDataLayer || [];

Inline-Script zur Initialisierung des Adobe Data Layers

Wenn Sie eine Staging-Umgebung für Ihre Publikation verwenden, können Sie das Staging-Script aus Tags hinterlegen.

Die Publikationen senden für Aktionen Custom Events, die Sie in Adobe Tags entgegennehmen und auf Custom Vars mappen können. Näheres dazu finden Sie im Kapitel Custom Events.

Die Integration ist damit abgeschlossen. Für die Übergabe von Events oder anderen Daten kann der Adobe Data Layer verwendet werden.

Integration am Beispiel der IVW

Bevor Seitenaufrufe gezählt werden können, ist es erforderlich, den INFOnline Measurement Manager zu implementieren. Hierfür stellt die IVW zwei Methoden zur Verfügung:

Mit Preload und Bundle-Loader

Integrieren Sie zunächst die bundle.js als externes Script mit der Methode preload. Erstellen Sie die Attribute as="script" und crossorigin.

Damit die Seitenaufrufe korrekt gezählt werden können, müssen Sie als Position Before inline script auswählen.

Externes Script für die IVW bundle.js mit Preload-Methode

Die Methode preload generiert keinen <script>-Tag, sondern einen <link>-Tag:

HTML

<link rel="preload" href="//[domain service name]/iomm/latest/manager/base/es6/bundle.js" as="script" crossorigin>

Im nächsten Schritt wird die loader.js ebenfalls mit der Methode preload und denselben Attributen implementiert.

Externes Script für die IVW loader.js mit Preload-Methode

Zuletzt muss die loader.js synchron geladen werden.

Externes Script für die IVW loader.js mit synchroner Lademethode

Wenn Sie alle vorangegangenen Einstellungen korrekt implementiert haben, erzeugt dies folgende Ausgabe:

HTML

<link rel="preload" href="//[domain service name]/iomm/latest/manager/base/es6/bundle.js" as="script" crossorigin>

<link rel="preload" href="//[domain service name]/iomm/latest/manager/base/es6/loader.js" as="script" crossorigin>

<script type="text/javascript" src="https://[domain service name]/iomm/latest/bootstrap/loader.js" crossorigin></script>

Es ist empfehlenswert, exakt nach der Anleitung der IVW vorzugehen und sowohl die Reihenfolge der Tags als auch sämtliche Attribute zu beachten.

Nachdem die initialen Scripte implementiert sind, kann die Konfiguration und die eigentliche Zählung stattfinden. Hierzu verwenden Sie ein Inline-Script:

JavaScript

IOMm("configure", { st: "foo", dn: "data-acbd18db4c.example.com" }); // Configure IOMm
IOMm("pageview", { cp: "bar", co: "baz" }); // Count pageview

Inline-Script mit IVW-Konfiguration und Pageview-Event

In der Dokumentation werden nur Beispielwerte angegeben. Bitte stellen Sie sicher, dass sowohl der Domain Service Name als auch die Attributswerte für die Konfiguration und das Tracking korrekt angegeben werden.

Damit ist die Integration abgeschlossen. Sollten Sie neue Zählcodes verwenden, müssen diese bei der IVW zugeordnet werden, damit die Messungen korrekt durchgeführt werden.

Ohne Preload und Bundle-Loader

Die Variante ohne Preload und Bundle-Loader unterscheidet sich vor allem in der Reihenfolge der auszuführenden Code-Blöcke.

Initial wird zunächst die stub.js synchron geladen. Hierbei ist zu beachten, dass das externe Script vor dem Inline-Javascript positioniert werden muss.

Externes Script für die IVW stub.js mit synchroner Lademethode, positioniert vor dem Inline-Script

Im Nachgang erfolgt die Konfiguration Ihrer Zählung und das Pageview-Event:

JavaScript

IOMm("configure", { st: "foo", dn: "data-acbd18db4c.example.com" }); // Configure IOMm
IOMm("pageview", { cp: "bar", co: "baz" }); // Count pageview

Inline-Script mit IVW-Konfiguration und Pageview-Zählung

Im letzten Schritt muss die bundle.js asynchron geladen werden. Hier ist zu beachten, dass das externe Script nach dem Inline-Javascript positioniert wird.

Externes Script für die IVW bundle.js mit async-Lademethode, positioniert nach dem Inline-Script

Wenn Sie alle vorangegangenen Einstellungen korrekt implementiert haben, erzeugt dies folgende Ausgabe:

HTML

<script type="text/javascript" src="https://[domain service name]/iomm/latest/bootstrap/stub.js" crossorigin></script>

<script type="text/javascript">
IOMm("configure", { st: "foo", dn: "data-acbd18db4c.example.com" }); // Configure IOMm
IOMm("pageview", { cp: "bar", co: "baz" }); // Count pageview
</script>

<script async type="text/javascript" src="https://[domain service name]/iomm/latest/manager/base/es5/bundle.js" crossorigin></script>

Custom Events

Wenn Nutzer:innen mit Ihrer Publikation interagieren, werden Custom Events ausgelöst, die von Tracking-Systemen entgegengenommen und analysiert werden können.

Custom Events werden wie folgt getriggert:

JavaScript

window.dispatchEvent(new CustomEvent(EventAction, {
    detail: EventValue,
}));

EventValue ist ein Objekt, das wiederum Objekte, Strings oder Integer-Werte enthalten kann.

Nachfolgend finden Sie pro Publikation eine Liste der enthaltenen Custom Events, deren Interaktion und einen beispielhaften EventValue.

Worteck

EventAction	Interaktion	EventValue
PageView	Beim Navigieren durch die Publikation bzw. Aufruf einer neuen Seite (virtuelle Page-Impression).	JSON `{ "from": "String", "to": "String" }` liefern die URL-Pfade zur Impression.
Auth	Sobald ein(e) Nutzer:in sich über die SSO erfolgreich authentifiziert.	–
ShareResult	Spiel-Ergebnis wird in sozialen Medien geteilt.	JSON `{ "game_nr": "Integer", "game_success_row": "Integer" }`
CopyResult	Spiel-Ergebnis wird in die Zwischenablage kopiert.	–
GameStarted	Wird einmalig ausgelöst, wenn ein(e) Nutzer:in zum ersten Mal mit dem Rätsel interagiert. Bei einem Neustart oder der Wiederaufnahme eines bereits begonnenen Spiels wird das Event nicht erneut gefeuert.	JSON `{ "game_nr": "Integer" }`
GameSucceeded	Ein Wort wurde erfolgreich erraten.	JSON `{ "game_nr": "Integer", "game_success_row": "Integer" }`
GameFinished	Ein Spiel wurde beendet, unabhängig davon ob das Wort erraten wurde oder nicht.	JSON `{ "game_nr": "Integer", "game_success_row": "Integer" }`
GameFailed	Ein Spiel wurde beendet, aber das Wort nicht erraten.	JSON `{ "game_nr": "Integer", "game_success_row": "Integer" }`
RowCompleted	Eine Reihe wurde vervollständigt (Wort ist valide und existiert).	JSON `{ "game_nr": "Integer", "game_current_row": "Integer" }`
NewGame	Nach Beendigung eines Spiels wird ein neues gestartet (nur wenn mehr als ein Wort pro Tag möglich ist).	JSON `{ "game_nr": "Integer", "remaining_games": "Integer" }`
AllGamesCompleted	Ein(e) Nutzer:in hat alle zur Verfügung gestellten Worte zu einem Datum beendet.	JSON `{ "date": "String" }` Format YYYY-MM-DD.

Sudoku

EventAction	Interaktion	EventValue
PageView	Beim Navigieren durch die Publikation bzw. Aufruf einer neuen Seite (virtuelle Page-Impression).	JSON `{ "from": "String", "to": "String" }`
Auth	Sobald ein(e) Nutzer:in sich über die SSO erfolgreich authentifiziert.	–
GameStarted	Wird einmalig ausgelöst, wenn ein(e) Nutzer:in zum ersten Mal mit dem Rätsel interagiert. Bei einem Neustart oder der Wiederaufnahme eines bereits begonnenen Spiels wird das Event nicht erneut gefeuert.	JSON `{ "game_nr": "Integer" }`
GameFinished	Ein Sudoku wurde erfolgreich beendet.	JSON `{ "game_nr": "Integer", "timer": "Integer" }` timer in Sekunden.
GameFailed	Alle Zahlen wurden ausgefüllt, aber es sind noch Fehler enthalten.	JSON `{ "game_nr": "Integer", "timer": "Integer" }` timer in Sekunden.
RestartGame	Ein Sudoku wurde zurückgesetzt und erneut begonnen.	JSON `{ "game_nr": "Integer", "timer": "Integer" }` timer = Zeitpunkt der Zurücksetzung in Sekunden.
PrintGame	Ein Sudoku wurde gedruckt.	JSON `{ "game_nr": "Integer" }`
ShareResult	Spiel-Ergebnis wird in sozialen Medien geteilt.	JSON `{ "game_nr": "Integer", "timer": "Integer" }`
CopyResult	Spiel-Ergebnis wird in die Zwischenablage kopiert.	–

Wortwabe

EventAction	Interaktion	EventValue
PageView	Beim Navigieren durch die Publikation bzw. Aufruf einer neuen Seite (virtuelle Page-Impression).	JSON `{ "from": "String", "to": "String" }`
Auth	Sobald ein(e) Nutzer:in sich über die SSO erfolgreich authentifiziert.	–
GameStarted	Wird einmalig ausgelöst, wenn ein(e) Nutzer:in zum ersten Mal mit dem Rätsel interagiert. Bei einem Neustart oder der Wiederaufnahme eines bereits begonnenen Spiels wird das Event nicht erneut gefeuert.	JSON `{ "game_nr": "Integer" }`
GameFinished	Ein Spiel wurde erfolgreich beendet.	JSON `{ "game_nr": "Integer", "count_words": "Integer", "deviation": "Integer", "count_isograms": "Integer" }`
WordFound	Ein Wort wurde entdeckt.	JSON `{ "game_nr": "Integer", "word": "String", "is_isogram": "Boolean" }` word in Großbuchstaben.
ShuffleLetters	Die Buchstaben werden manuell gemischt.	JSON `{ "game_nr": "Integer" }`
ExpandWordList	Die Liste der gefundenen Wörter wurde aufgeklappt.	JSON `{ "game_nr": "Integer" }`
ShareResult	Spiel-Ergebnis wird in sozialen Medien geteilt.	JSON `{ "game_nr": "Integer", "count_words": "Integer", "top_score": "Boolean", "count_isograms": "Integer" }`
CopyResult	Spiel-Ergebnis wird in die Zwischenablage kopiert.	–

Kreuzworträtsel

EventAction	Interaktion	EventValue
PageView	Beim Navigieren durch die Publikation bzw. Aufruf einer neuen Seite (virtuelle Page-Impression).	JSON `{ "from": "String", "to": "String" }`
Auth	Sobald ein(e) Nutzer:in sich über die SSO erfolgreich authentifiziert.	–
GameStarted	Wird einmalig ausgelöst, wenn ein(e) Nutzer:in zum ersten Mal mit dem Rätsel interagiert. Bei einem Neustart oder der Wiederaufnahme eines bereits begonnenen Spiels wird das Event nicht erneut gefeuert.	JSON `{ "game_nr": "Integer" }`

Virtuelle Seitenaufrufe

Da es sich bei allen Publikationen um Single Page Applications (SPA) handelt, wird beim Wechseln der URL kein Seiten-Reload ausgelöst. Einige Analyse-Systeme lauschen auf das popstate-Event und können das Navigieren innerhalb von SPAs tracken.

Alle Publikationen senden beim Wechseln der URL das Custom-Event PageView. Im Payload werden die Properties to und from übergeben: to liefert die Daten zur angesteuerten Seite, from enthält die Daten zur Ausgangs-URL.

JavaScript

{
  to: {
    fullPath: "/schwierig",
    hash: "",
    href: "/schwierig",
    name: "Home",
    params: {
        level: "schwierig"
    },
    path: "/schwierig",
    query: {}
  },
  from: {
    fullPath: "/",
    hash: "",
    href: "/",
    name: "Home",
    params: {
        level: "leicht"
    },
    path: "/",
    query: {}
  }
}

Um die Daten beim Seitenwechsel an ein Analyse-System weiterzuleiten, können Sie auf das Custom-Event PageView lauschen und den Payload übergeben. Hierfür nutzen Sie ein Inline-Script und integrieren den EventListener.

Virtuelle Seitenaufrufe mit GA4

GA4 lauscht in der Standard-Konfiguration auf das popstate-Event – daher müssen virtuelle Seitenaufrufe nicht manuell übergeben werden.

GA4-Einstellung für erweiterte Analysen: Option zum automatischen Tracking von Seitenänderungen im Browser-Verlauf

Wenn Sie diese Option deaktivieren, können Seitenaufrufe wie folgt übergeben werden:

JavaScript

window.addEventListener("PageView", (e) => {
    gtag("event", "page_view", {
        page_title: document.title,
        page_location: e.detail.to.fullPath
    })
});

Virtuelle Seitenaufrufe mit Adobe Analytics

Für Adobe Analytics müssen Sie keinen EventListener im oliwol Publisher Tool integrieren. Das Regelset für Custom Events integrieren Sie direkt in Adobe Tags.

Virtuelle Seitenaufrufe mit IVW

JavaScript

window.addEventListener("PageView", (e) => {
    IOMm("pageview", { cp: "[code]" });
});

Weitere Anwendungsmöglichkeiten

Das Custom-Event PageView kann auch dazu genutzt werden, Werbemittel zu aktualisieren. Nachfolgend ein Beispiel, wie Werbemittel beim Wechseln der Seite aktualisiert werden, sofern es sich bei der Zielseite und der vorherigen Seite nicht um den Statistik-Layer handelt:

JavaScript

window.addEventListener("PageView", (e) => {
    if (e.detail && e.detail?.to?.name !== "Stats" && e.detail?.from?.name !== "Stats") {
        if (typeof OBR !== "") {
            OBR.extern.refreshWidget();
        }
    }
});