Webcontrolling

Webcontrolling stellt Redakteuren über die etracker-Integration die folgenden Funktionen zur Verfügung:

Für die Einbindung der Funktionalitäten stellt etracker ein Dashboard sowie eine Scrollmap bereit:

Für den Webcontrolling-Einsatz müssen die folgenden technischen Voraussetzungen erfüllt sein:

Die Webcontrolling-Auslieferung enthält zwei Module, die auf dem FirstSpirit-Server hinzugefügt werden müssen. Öffnen Sie für die Installation der Module den ServerManager und wählten Sie den Bereich Server-Eigenschaften → Module.

Abbildung 1. Modulverwaltung in den Server-Eigenschaften

Im Hauptpanel ist eine Liste aller auf dem FirstSpirit-Server installierten Module zu sehen. Wählen Sie nach dem Klicken auf Installieren nacheinander zunächst die mitgelieferte AppConnect-<VERSIONSNUMMER>.fsm und anschließend die webcontrolling-fsm-<VERSIONSNUMMER>.fsm. Bestätigen Sie die Auswahl jeweils mit Öffnen. Nach der erfolgreichen Installation wurden der Liste die Ordner AppConnect und Webcontrolling hinzugefügt, die beide Alle Rechte erhalten müssen.

Das Webcontrolling-Modul erfordert darüber hinaus eine Konfiguration, die im nachfolgenden Unterkapitel beschrieben ist.

2.1.1. Konfiguration des Webcontrolling Services

Das Webcontrolling-Modul ermöglicht die Nutzung des von etracker bereitgestellten Dashboards bzw. der Scrollmap per Single Sign-On. Dafür ist im Service des Webcontrolling-Moduls die AppConnect-Anbindung zu aktivieren, die standardmäßig deaktiviert ist. Die Anbindung gewährt AppConnect den Zugriff auf die in der Webcontrolling ProjectConfiguration anzugebenden Login-Daten.

Öffnen Sie für die Konfiguration des Services den ServerManager und wählen Sie den Bereich Server-Eigenschaften → Module. Klappen Sie anschließend den Ordner Webcontrolling for AppConnect auf und selektieren Sie den in diesem Ordner enthaltenen Service.

Abbildung 2. Webcontrolling Service

Der sich über den Button Konfigurieren öffnende Dialog besitzt lediglich einen Schieberegler, der zu aktivieren ist. Schließen Sie sowohl den Konfigurationsdialog als auch die Server-Eigenschaften und den ServerManager anschließend über den Button OK.

Abbildung 3. Webcontrolling Service - Konfiguration

Nach der Konfiguration muss der Service gestoppt und erneut gestartet werden.

Für die Verwendung der Webcontrolling-Funktionalitäten ist eine projektspezifische Konfiguration notwendig. Diese wird über zwei Projekt-Komponenten vorgenommen, die dem verwendeten Projekt hinzuzufügen sind. Öffnen Sie dafür den ServerManager und wählen Sie den Bereich Projekt-Eigenschaften → Projekt-Komponenten.

Abbildung 4. Projekt-Komponenten

Im Hauptpanel ist eine Liste aller bereits vorhandenen Projekt-Komponenten zu sehen. Wählen Sie nach dem Klicken auf Hinzufügen nacheinander die Webcontrolling ProjectConfiguration sowie die AppConnect ProjectConfiguration aus und bestätigen Sie die Auswahl jeweils mit OK. Die Projekt-Komponenten werden anschließend der Liste im Hauptpanel hinzugefügt und müssen anschließend noch konfiguriert werden. Die dafür notwendigen Schritte sind im nachfolgenden Unterkapitel beschrieben.

2.2.1. Konfiguration der Projekt-Komponenten

Nach der Installation der Projekt-Komponenten müssen diese konfiguriert werden. Öffnen Sie dafür den ServerManager und wählen Sie den Bereich Projekt-Eigenschaften → Projekt-Komponenten. Im Hauptpanel ist eine Liste aller vorhandenen Projekt-Komponenten zu sehen.

Webcontrolling ProjectConfiguration

Selektieren Sie in der Liste zunächst die Webcontrolling ProjectConfiguration und öffnen Sie den zugehörigen Konfigurationsdialog über Konfigurieren.

Abbildung 5. Konfigurationsdialog der Webcontrolling ProjectConfiguration

Der Dialog besitzt zwei Pflichtfelder für die Angabe der etracker-Logindaten, die das Webcontrolling-Modul für die Verbindung zwischen FirstSpirit und etracker benötigt. Bleiben die Felder leer oder sind die Angaben fehlerhaft, erscheint beim Aufruf des etracker Dashboards bzw. der Scrollmap zunächst eine Login-Seite. Schließen Sie den Dialog nach der Angabe der etracker-Logindaten über OK.

Die eingegeben etracker Logindaten finden ausschließlich dann Verwendung, wenn im Webcontrolling Service die AppConnect-Anbindung aktiviert und im nachfolgend beschriebenen Konfigurationsdialog der AppConnect ProjectConfiguration der Webcontrolling-Connector ausgewählt ist.

AppConnect ProjectConfiguration

Selektieren Sie in der Liste der Projekt-Komponenten im Anschluss an die Webcontrolling ProjectConfiguration die AppConnect ProjectConfiguration und öffnen Sie den zugehörigen Konfigurationsdialog ebenfalls über Konfigurieren.

Abbildung 6. Konfigurationsdialog der AppConnect ProjectConfiguration

Der Dialog besitzt verschiedene Konfigurationsmöglichkeiten für allgemeine Einstellungen und für die Verwendung etrackers im ContentCreator bzw. SiteArchitect.

Bei den Feldern Name, Symbol und Url handelt es sich um Pflichtfelder. Bleibt eines dieser Felder leer oder enthält es eine invalide Eingabe, wird es visuell hervorgehoben. Im Fall eines fehlenden Namens wird der Button für die Verwendung Webcontrollings in beiden Clients ausgeblendet. Ist die Url invalid, wird der Button zwar angezeigt, bleibt jedoch inaktiv.

Name

In Abhängigkeit davon, ob die Verwendung des von etracker angebotene Dashboards oder der Scrollmap gewünscht ist, wird in diesem Feld einer der beiden Einträge erwartet:

• etracker Dashboard
• etracker Scrollmap

Symbol

An dieser Stelle muss die Url eines Bildes hinterlegt werden, welches als Symbol der Integration dienen soll. Es muss das Format bmp, gif, jpeg, jpg oder png besitzen und darf eine Größe von 25x25 Pixel nicht übersteigen. Da FirstSpirit das Symbol nicht automatisch skaliert, wird andernfalls nur ein Bildausschnitt angezeigt.

Während das Symbol im SiteArchitect in Form eines Buttons in der Menüleiste sichtbar ist, wird er im ContentCreator ausschließlich im Menü Aktionen konfigurieren dargestellt.

Abbildung 7. Aktionen konfigurieren

Url

Auch an dieser Stelle ist die Eingabe abhängig von der gewünschten Integration:

• Dashboard: https://newapp.etracker.com/#/dashboard
• Scrollmap: https://newapp.etracker.com/#/scrolldepth

Die Url wird in beiden Clients für den Aufruf etrackers verwendet.

Die Eingaben in den Felden Name und Url müssen sich auf dieselbe Integration beziehen.

Connector

An dieser Stelle ist der Webcontrolling-Connector auszuwählen. Er stellt die Verbindung zwischen dem Webcontrolling-Modul und AppConnect sicher und ermöglicht die Nutzung von Single Sign-On für den Zugriff auf das Dashboard bzw. die Scrollmap.

Gleichzeitig zur Selektion des Connectors muss im Webcontrolling Service die AppConnect-Anbindung aktiviert und im Konfigurationsdialog der zuvor beschriebenen Webcontrolling ProjectConfiguration die etracker Login-Daten angegeben sein.

Sichtbarkeit

Über diese Schaltflächen lässt sich die Sichtbarkeit des Buttons zum Aufruf etrackers in beiden Clients definieren. Wird die Sichtbarkeit für einen Client deaktiviert, wird der Button in diesem Client ausgeblendet und steht den Redakteuren nicht mehr zur Verfügung.

Standardmäßig ist die Sichtbarkeit für beide Clients aktiviert.

ContentCreator

Im Gegensatz zum SiteArchitect, in dem die etracker-Seite grundsätzlich im AppCenter dargestellt wird, kann für den ContentCreator zwischen zwei Anzeigen gewählt werden:

• Dialog: Die etracker-Seite wird in einem Dialog innerhalb des ContentCreators dargestellt.
• Browser-Tab: Im Browser öffnet sich ein zusätzliches Tab, in dem die etracker-Seite geladen wird.

Standardmäßig ist die Darstellung im Dialog aktiviert.

HTML Header

In diesem Feld wird der etracker Tracking Code benötigt. Dieser ist auf der etracker-Seite in der Account-Übersicht unter dem Menüpunkt Setup → Tracking Code zu finden.

Abbildung 8. etracker Tracking Code

Besteht der Wunsch, sowohl das Dashboard als auch die Scrollmap parallel zu nutzen, darf der etracker Tracking Code lediglich für eine der beiden Integrationsmöglichkeiten gepflegt sein. Andernfalls treten Probleme bei der Datenerfassung auf.

Innerhalb dieses Codes können nach Bedarf die verfügbaren Variablen definiert werden. Der nachfolgende Ausschnitt zeigt beispielsweise die Verwendung des Seitennamens.

etracker Tracking Code. 

[#if !webedit && !preview]
    <!-- Copyright (c) 2000-2018 etracker GmbH. All rights reserved. -->
    <!-- This material may not be reproduced, displayed, modified or distributed -->
    <!-- without the express prior written permission of the copyright holder. -->
    <!-- etracker tracklet 4.1 -->
    <script type="text/javascript">
        [#if pageref??]
            [#if pageref.getContent2Params()??]
                [#if pageref.getContent2Params().getData(language)??]
                    [#if pageref.getContent2Params().getRecordCountPerPage() == 1]
                        var et_pagename = encodeURI("${pageref.getDisplayName(language)} (${language} | ${pageref.uid} | CS-ID: ${fsID?long?c})");
                    [#else]
                        var et_pagename = encodeURI("${pageref.getDisplayName(language)} (${language} | ${pageref.uid} | page: 1)");
                    [/#if]
                [/#if]
            [#else]
                var et_pagename = encodeURI("${pageref.getDisplayName(language)} (${language} | ${pageref.uid})");
            [/#if]
        [/#if]
    </script>

    <script id="_etLoader" type="text/javascript" charset="UTF-8" data-respect-dnt="true" data-secure-code="123456" src="//static.etracker.com/code/e.js"></script>
    <!-- etracker tracklet 4.1 end -->
[/#if]

Des Weiteren dient das Feld der Angabe von zum Beispiel HTML, JavaScript und Stylesheets, das jeder Seitenvorlage des verwendeten Projekts hinzugefügt werden kann. Die Einbindung des Feldinhalts erfolgt über einen CMS_VALUE-Ausdruck, der dem Header der verwendeten Seite hinzuzufügen ist.

Die Skript-Sprache Apache FreeMarker ermöglicht außerdem die Angabe komplexer Ausdrücke in diesem Feld. Das Modul stellt darüber hinaus die Variablen webedit, preview und pageref bereit, um kontextspezifische Informationen abfragen zu können.

Das AppConnect-Modul verfügt über eine Web-Komponente. Diese stellt die Funktionalitäten im ContentCreator zur Verfügung und muss daher dem verwendeten Projekt hinzugefügt werden. Eine weitere Konfiguration der Web-Komponente ist nicht notwendig.

Öffnen Sie den ServerManager und selektieren Sie den Reiter ContentCreator im Bereich Projekt-Eigenschaften → Web-Komponenten.

Abbildung 9. Web-Komponenten

Im Hauptpanel ist eine Liste aller bereits vorhandenen Web-Komponenten zu sehen. Wählen Sie nach dem Klicken auf Hinzufügen nacheinander die AppConnect WebResources sowie die WebControlling ContentCreator Library und bestätigen Sie Ihre Auswahl mit OK. Die Liste im Hauptpanel wird anschließend um die Web-Komponenten ergänzt (vgl. Abbildung Web-Komponenten).

Existiert noch kein aktiver Webserver, muss dieser aktiviert werden. Selektieren Sie diesen in der Auswahlliste und starten Sie die Installation über den Button Installieren. Nach der erfolgreichen Installation ist der Webserver zu Aktivieren.

Existiert bereits ein aktiver Webserver, ist dieser lediglich zu Aktualisieren.

Schließen sie die Projekt-Eigenschaften und den ServerManager anschließend über den Button OK.

Für die Erfassung der notwendigen Statistiken muss die URL der Live-Seite des Projekts etrackerseitig bekannt gemacht werden. Dies erfolgt auf der etracker-Seite in der Account-Übersicht unter dem Menüpunkt Account → Domains für die Web Analyse → Hauptdomain.

Die beiden in der Projekt-Komponente definierbaren Integrationsmöglichkeiten für etracker werden im SiteArchitect in Form zusätzlicher Buttons nahtlos in die Menüleiste integriert.

Abbildung 10. Menüleiste des SiteArchitects

Ein Klick auf einen der Buttons öffnet das Dashboard bzw. die Scrollmap im AppCenter. Jede der beiden Integrationen öffnet sich dabei in einem eigenen Tab. Existiert für eine Integration bereits ein geöffnetes Tab, wird dieses bei einem erneuten Klicken auf den entsprechenden Button fokussiert.

Die in der Projekt-Komponente definierbaren Integrationsmöglichkeiten werden im ContentCreator über das Menü Aktionen → Plugins bereitgestellt.

Abbildung 11. Aktionenmenü

Je nach Konfiguration öffnet sich das Dashboard bzw. die Scrollmap in einem Dialog im ContentCreator oder in einem neuen Browser-Tab. Wurde die Anmeldung per Single Sign-On konfiguriert, erfolgt die Weiterleitung auf das Dashboard oder die Scrollmap automatisch. Andernfalls öffnet sich zunächst die etracker-Login-Seite und die Eingabe der Accountdaten muss manuell erfolgen.

Anders als beim Dashboard, das einen Überblick über diverse Statistiken bietet, bezieht sich die Scrollmap immer auf die derzeit dargestellte Seite. Aus diesem Grund wird ihre URL der Scrollmap grundsätzlich mit übergeben.