User Feedback in TYPO3

Lust auf weniger Mails und schnellere Problemlösung?

Gute Kommunikation ist der entscheidende Faktor für Erfolg im Projektgeschäft. Kann der Kunde seinen Wunsch kommunizieren, und vor allem wird er vom Verantwortlichen richtig verstanden.

SIWA Pimcore Specialist bei der Arbeit am Computer

Um diese Problematik zu bewältigen gibt es eine Vielzahl an Tools, eines davon ist Usersnap. Dieses SaaS Produkt von der gleichnamigen Linzer Firma basiert auf visuellem Feedback in Form von Screenshots. Entdeckt der Kunde ein Problem, Fehlverhalten oder Ähnliches auf der Webseite oder im Backend kann er mittels einfachem Klick auf das "Feedback"-Widget einen Kommentar und einen Screenshot an den Verantwortlichen senden. Diesen Screenshot kann der Besucher oder Redakteur zusätzlich auch noch mit diversen Tools markieren, kommentieren oder gewisse Bereiche highlighten oder schwärzen. Der Verantwortliche erhält daraufhin den Screenshot mit der Nachricht im Usersnap Dashboard, oder aber in einem Bug-Tracking Tool seiner Wahl, die von Usersnap unterstützten Tools reichen von Jira über Trello und Basecamp bis hin zu Slack.

Aber genug der Infos, wie baue ich Usersnap in meine TYPO3 Instanz ein? Erste Frage die hier zu beantworten ist: Will ich das Tool im Frontend oder im Backend verwenden?

Feedback einfach und strukturiert sammeln

Verwendung im Frontend

Für die Verwendung im Frontend gibt es die Extension usersnap im Extension Repository von TYPO3. Diese wird von uns als SIWA Online GmbH gewartet und ist kompatibel mit TYPO3 6.2 bis zur aktuellen Version 8.7. Die Konfiguration erfolgt über den Konstanten-Editor nach Einbindung des statischen Templates auf der Root-Seite der Webseite.

Verwendung im Backend

Im Backend findet die Integration am besten über einen Hook des Default Backend Controllers statt - also um einiges komplexer als für das Frontend. Um das Javascript für Usersnap einzubinden muss also eine Extension angelegt werden. Im wesentlichen führen 3 Schritte zum Ziel von Usersnap im Backend:

Registrieren des Hooks "constructPostProcess"
Hinzufügen des Usersnap Javascript Embed Codes über den Backend Controller im Hook
Hinzufügen des API_KEY von Usersnap im Embed Code

Fragen?

Wir unterstüzen dich gerne!

Du benötigst Hilfe mit der korrekten Einpflegung von Usersnap? Du kannst uns natürlich jederzeit gerne kontaktieren und wir geben dir Auskunft!

Kontaktier uns!

Und so funktioniert das im Detail

Registrieren des Hooks "constructPostProcess"

In der Datei ext_localconf.php wird über die Zeile

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['typo3/backend.php']['constructPostProcess'][] = 'SIWA\\UsersnapBackend\\Hooks\\UsersnapJavascriptHook->constructPostProcess';

der Hook für unsere Extension registriert. Somit wird nach der construct-Methode jedes BackendControllers unsere Methode aufgerufen in der wir das JavaScript hinzufügen.

Hinzufügen des Usersnap Javascript Embed Codes über den Backend Controller im Hook

Die folgende Klasse UsersnapJavascriptHook fügt mittels der Methode addJavascriptFile() den Embed Code zu jedem Backend Controller hinzu und sorgt damit dafür das Usersnap geladen wird.

<?php
namespace SIWA\UsersnapBackend\Hooks;
use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
class UsersnapJavascriptHook
{
    /**
     * reference back to the backend
     *
     * @var \TYPO3\CMS\Backend\Controller\BackendController
     */
    protected $backendReference;
    /**
     * constructPostProcess
     *
     * @param array $config
     * @param \TYPO3\CMS\Backend\Controller\BackendController $backendReference
     */
    public function constructPostProcess($config, &$backendReference)
    {
        $backendReference->addJavascriptFile(
            $GLOBALS['BACK_PATH'] . '../'
            . ExtensionManagementUtility::siteRelPath('siwa_project')
            . 'Resources/Public/JavaScript/usersnap-backend.js'
        );
    }
}

Hinzufügen des API_KEY von Usersnap im Embed Code

In der Datei usersnap-backend.js wird der von Usersnap zur Verfügung gestellte Embed Code ausgeführt. In unserer Beispiel Extension braucht nur mehr {API_KEY} durch den korrekten API Key ersetzt werden. Nach der Installation sollte Usersnap rechts unten auftauchen und einsatzfähig sein.

(function() {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.async = true;
  s.src = '//api.usersnap.com/load/'+
    '{{API_KEY}}.js';
  var x = document.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);
})();

Zum Thema