Der KeyTrac Recorder ist ein einfach zu konfigurierendes JavaScript, welches für die Aufzeichnung des Tippverhaltens eines Benutzer notwendig ist. Um die Aufzeichnung zu beginnen, muss es in jede Website integriert werden, bei der das Tippverhalten eines Benutzers aufgezeichnet werden soll. Der KeyTrac Recorder muss dabei auf von bestimmte Eingabefelder konfiguriert werden, für die es das Tippverhalten aufnehmen soll. Unter jedes konfigurierte Eingabefeld fügt der KeyTrac Recorder dazu automatisch ein verstecktes Formularfeld ein, in das der Recorder das Tippverhalten transparent im Hintergrund aufzeichnet.
Die folgenden Schritte zeigen Ihnen wie Sie den JavaScript Recorder in eine Website integrieren. Die Integration muss dabei sowohl für die Registrierung als auch für die Authentifizierung vorgenommen werden.
Fügen Sie den folgenden Script-Tag (vorzugsweise) in die head
Sektion Ihrer Website ein. Diese Anweisung lädt das Recorder JavaScript und macht den Keytrac Recorder für Ihre Website verfügbar. Nachdem das JavaScript erfolgreich geladen wurde, ist der KeyTrac Recorder auch schon einsatzbereit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>KeyTrac Demo-Integration</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fügen Sie den folgenden Script-Tag ein -->
<script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
</head>
<body>
...
</body>
</html>
KeyTrac unterstützt zwei Betriebsarten, für den Sie den KeyTrac Recorder entsprechend konfigurieren müssen:
Um den KeyTrac Recorder an bestimmte Eingabefelder zu binden
, müssen Sie der KeyTrac.configure
Funktion eine Liste der gewünschten Eingabefeldern im sog. DOM-Identifier-Format (mit einem #
als Präfix vor der eigentlichen DOM-ID) übergeben.
Durch die Nutzung der anytextFields
Option weisen Sie den KeyTrac Recorder an Benutzereingaben im AnyText-Modus zu verarbeiten. Aus Sicherheitsgründen wird nur auf Benutzereingaben für Eingabefelder geachtet, die dem KeyTrac Recorder explizit übergeben wurden. Alle anderen Eingaben auf Ihrer Website werden ignoriert. Hinweis: Die unten gezeigte Integration funktioniert nur für den AnyText-Modus. (Für Password Hardening gehen Sie bitte zu Abschnitt 2.2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>KeyTrac Demo-Integration</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
</head>
<body>
...
<p>Das ist ein Text, den Benutzer abtippen müssen.</p>
<textarea name="textArea1" id="textArea01"></textarea>
...
<p>Das ist ein anderer Text, den Benutzer abtippen müssen.</p>
<textarea name="textArea2" id="textArea02"></textarea>
...
<script type="text/javascript">
KeyTrac.configure({
anytextFields: ['#textArea01', '#textArea02'] // <-- AnyText Modus
});
</script>
</body>
</html>
Um den KeyTrac Recorder an bestimmte Eingabefelder zu binden
, müssen Sie der KeyTrac.configure
Funktion eine Liste der gewünschten Eingabefeldern im sog. DOM-Identifier-Format (mit einem #
als Präfix vor der eigentlichen DOM-ID) übergeben.
Da Passwörter besonderen Schutz benötigen, bietet der KeyTrac Recorder hierfür einen besonderen Aufzeichnungsmodus für das Tippverhalten bei Passworteingaben. Diese spezielle Art der Aufzeichnung ist jedoch nur Passworteingaben vorbehalten. Um diesen Aufzeichnungsmodus zu verwenden, nutzen Sie bitte die passwordFields
Option anstelle der anytextFields
Option. Diese Anweisung instruiert den KeyTrac Recorder das Tippverhalten der konfigurierten Felder im sog. maskierten Modus aufzuzeichnen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>KeyTrac Demo-Integration</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
</head>
<body>
...
<label for="password1">Label für Passwort 1</label>
<input name="password1" id="password1" type="password">
...
<label for="password2">Label für Passwort 2</label>
<input name="password2" id="password2" type="password">
...
<script type="text/javascript">
KeyTrac.configure({
passwordFields: ['#password1', '#password2'] // <-- Password Hardening Modus
});
</script>
</body>
</html>
Wurde der KeyTrac Recorder erfolgreich für Ihre Website konfiguriert, fügt es automatisch versteckte Felder unter jedes der von Ihnen konfigurierten Eingabefelder ein.
Der Name jedes dieser versteckten Eingabefelder beginnt mit dem Präfix keytrac_
. Um zu überprüfen ob Ihre Konfiguration erfolgreich war und alle versteckten Felder eingefügt wurden, öffnen Sie einfach Ihre Website in einem Browser, positionieren den Mauspfeil über das Eingabe das Sie dem KeyTrac Recorder in der configure
Funktion übergegeben haben und klicken mit der rechten Maustaste auf das Element und wählen Untersuchen
(bei der Verwendung von Chrome). Ist unter dem Eingabefeld ein verstecktes Eingabefeld, dessen Namen mit keytrac_
beginnt, dann war die Konfiguration erfolgreich und der KeyTrac Recorder ist bereit das Tippverhalten Ihrer Benutzer aufzuzeichnen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>KeyTrac Demo-Integration</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
</head>
<body>
...
<p>Das ist ein Text, den Benutzer abtippen müssen.</p>
<textarea name="textArea1" id="textArea01"></textarea>
<!-- Wurde der Recorder erfolgreich konfiguriert, ist das u.g. Feld vorhanden -->
<input type="hidden" name="keytrac_textArea01" id="keytrac_textArea01">
...
<p>Das ist ein anderer Text, den Benutzer abtippen müssen.</p>
<textarea name="textArea2" id="textArea02"></textarea>
<!-- Wurde der Recorder erfolgreich konfiguriert, ist das u.g. Feld vorhanden -->
<input type="hidden" name="keytrac_textArea02" id="keytrac_textArea02">
...
<script type="text/javascript">
KeyTrac.configure({
anytextFields: ['#textArea01', '#textArea02']
});
</script>
</body>
</html>
Um das Tippverhalten für KeyTrac AnyText aufzuzeichnen, müssen Sie den KeyTrac Recorder entsprechend an die Eingabefelder binden, bei denen auf Benutzereingaben gelauscht werden soll. Eine solche Konfiguration führen Sie mit Hilfe der anytextFields
Option durch. Hier übergeben Sie der Konfigurationsfunktion einfach alle DOM-Identifier der gewünschten Eingabefelder.
...
<script type="text/javascript">
KeyTrac.configure({
anytextFields: ['#textArea01', '#textArea02']
});
</script>
...
Einstellung | Standard | Beschreibung |
---|---|---|
anytextFields |
[] |
Konfiguration der DOM-Identifier aller Eingabefelder bei denen das Tippverhalten aufgezeichnet werden soll, aufgelistet als String Array. Dieser Aufzeichnungsmodus funktioniert nur mit KeyTrac AnyText und funktioniert nicht mit KeyTrac Password Hardening. |
Der AnyText und der Password Hardening Modus können jedoch kombiniert auf einer Website eingesetzt werden. Übergeben Sie dazu einfach beide Optionen der KeyTrac.configure
Funktion. Sehen Sie sich die Bespiel-Konfiguration an.
Um das Tippverhalten bei Passworteingaben aufzuzeichnen benötigen Sie den speziellen Passwort Aufzeichnungsmodus. Diese Art der Aufzeichnung ist nicht kompatibel mit KeyTrac AnyText und kann nur mit KeyTrac Password Hardening verwendet werden, da die Aufzeichnung im sog. maskierten Modus erfolgt.
Similar to the AnyText configuration above, this is done via the passwordFields
option, where you list the DOM identifiers of all password fields which should be watched for key events.
Die Konfiguration für den Password Hardening Modus lehnt sich an die bereits oben gezeigten AnyText Einstellungen an. Hier übergeben Sie jedoch der passwordFields
Konfigurationsfunktion anstelle der anytextFields
Funktion die Liste der DOM-Identifier aller Passwortfelder, bei denen das Tippverhalten aufgezeichnet werden soll.
...
<script type="text/javascript">
KeyTrac.configure({
passwordFields: ['#password1', '#password2']
});
</script>
...
Einstellung | Standard | Beschreibung |
---|---|---|
passwordFields |
[] |
Konfiguration der DOM-Identifier aller Eingabefelder bei denen das Tippverhalten aufgezeichnet werden soll, aufgelistet als String Array. Dieser Aufzeichnungsmodus funktioniert nur mit KeyTrac Password Hardening und funktioniert nicht mit KeyTrac AnyText. |
Der AnyText und der Password Hardening Modus können jedoch kombiniert auf einer Website eingesetzt werden. Übergeben Sie dazu einfach beide Optionen der KeyTrac.configure
Funktion. Sehen Sie sich die Bespiel-Konfiguration an.
Einstellung | Standard | Beschreibung |
---|---|---|
enableAutoCorrect |
false |
Aktiviert/Deaktiviert die Autokorrektur der konfigurierten Eingabefelder |
Wenn Sie diese Einstellung auf false (Standardwert) stellen, werden die Attribute autocorrect= off, autocapitalize= offund spellcheck= falseden konfigurierten Eingabefeldern hinzugefügt, um die integrierte Autokorrektur des Browsers zu deaktivieren. Der Wert true belässt die Standardeinstellung des Browsers (Autokorrektur aktiviert). |
||
enableAutoComplete |
false |
Aktiviert/Deaktiviert die Autovervollständigung der konfigurierten Eingabefelder |
Wenn Sie diese Einstellung auf false (Standardwert) stellen, wird das Attribute autocomplete="off" den konfigurierten Eingabefeldern hinzugefügt, um die integrierte Autovervollständigung des Browsers zu deaktivieren. Der Wert true belässt die Standardeinstellung des Browsers (Autovervollständigung aktiviert). |
||
enableMouseActions |
false |
Aktiviert/Deaktiviert alle Mausaktionen der konfigurierten Eingabefelder |
Wenn Sie diese Einstellung auf false (Standardwert) stellen, kann der Benutzer den Cursor nicht mehr mit der Maus an eine beliebige Stelle innerhalb der konfigurierten Eingabefelder positionieren. Klickt der Benutzer auf eine Stelle des Eingabefelds, wird der Cursor automatisch am Ende des bereits eingegebenen Textes positioniert. Diese Einstellung verhindert zudem das Benutzer Textstellen innerhalb der konfigurierten Eingabefelder auswählen können. Der Wert true (Standardwert) belässt die Standardeinstellung des Browsers (alle Mausaktionen aktiviert). |
||
enableContextMenu |
false |
Aktiviert/Deaktiviert das Kontextmenü der konfigurierten Eingabefelder |
Wenn Sie diese Einstellung auf false (Standardwert) stellen, kann der Benutzer nicht länger das Kontextmenü der konfigurierten Eingabefelder aufrufen. Dies verhindert, dass ein Benutzer Teile der Eingaben mittels der LöschenFunktion des Kontextmenüs löschen. Der Wert true belässt die Standardeinstellung des Browsers (Kontextmenü aktivert). |
||
enablePaste |
false |
Aktiviert/Deaktiviert die Möglichkeit das ein Benutzer Text in die konfigurierten Eingabefelder hineinkopieren kann |
Wenn Sie diese Einstellung auf false (Standardwert) stellen, kann der Benutzer keinen Text mittels kopieren & einfügen in die konfigurierten Eingabefelder einfügen. Diese Einstellung zwingt den Benutzer etwa den bei AnyText angezeigten Text manuell in die Eingabefelder einzutippen. Der Wert true belässt die Standardeinstellung des Browsers (kopieren & einfügen aktiviert). |
||
enableDebug |
false |
Zeigt/Versteckt die KeyTrac Felderd Nicht für den Produktionsbetrieb! |
Wenn Sie diese Einstellung mit true aktivieren, wird das jeweils für das Eingabefeld aufgezeichnete Tippverhalten angezeigt. |
Um die User Experience bei allen Webseiten nicht zu verändern, bei der der KeyTrac Recorder integriert wurde, beeinflussen die weiteren Konfigurationsmöglichkeiten nur die Eingabefelder die der anytextFields
und der passwordFields
Konfigurationsfunktion übergeben wurden.
Damit Entwickler mögliche Fehlkonfigurationen des KeyTrac Recorder einfacher beheben können, loggt der KeyTrac Recorder jeden Fehler in die Console Ihres Browsers. Diese Fehler Sie mit Hilfe der Developer-Tools
Ihres Browsers ansehen. Ein Beispiel für einen solchen Fehler wäre etwa:
Uncaught [ERROR] Unable to start KeyTrac Recorder (no options provided)
-- AVAILABLE OPTIONS --
{
passwordFields: ["#password", "#password_confirmation"],
anytextFields: ["#textfield1", "#textfield2"],
enableAutoCorrect: false,
enableAutoComplete: false,
enableMouseActions: false,
enableContextMenu: false,
enablePaste: false,
enableDebug: false
}
Das untere Beispiel zeigt eine erweiterte Konfiguration des KeyTrac Recorders, bei denen das kopieren & einfügen sowie das Kontextmenü der Eingabefelder mit den DOM-Identifiers textArea01
, textArea02
, password
und password_confirmation
aktiviert bzw. erlaubt ist.
...
<script type="text/javascript">
KeyTrac.configure({
anytextFields: ['#textArea01', '#textArea02'],
passwordFields: ['#password', '#password_confirmation'],
enablePaste: true,
enableContextMenu: true
});
</script>
...