Tipps & Tricks - Automatische Weiterleitung in Abhängigkeit vom Endgerät

Werden Newsletter oder Aufgaben mit einem Link zu einer Intrexx-Seite per E-Mail versendet, so ist es nicht möglich, zu kontrollieren, ob der Empfänger den Link auf einem mobilen Gerät oder in seiner Desktopumgebung öffnet. Zeigt der Link auf eine für den Desktop erstellte Seite, so lässt sich diese auf dem mobilen Gerät nicht öffnen. Für diesen Fall gibt es im Ziel die Möglichkeit zu unterscheiden, um welche der beiden Arten es sich handelt und entsprechend darauf zu reagieren. Dieser Beitrag zeigt Ihnen, wie. Vorkenntnisse in Velocity und JavaScript sind dabei von Vorteil.

Layout

Grundvoraussetzung für das Funktionieren dieser Methode ist, dass sowohl ein Desktop- als auch ein mobiles Layout konfiguriert werden.

Seitenaufbau

Anders als gewöhnlich sollte als Sprungziel zunächst eine Seite verwendet werden, die als Schalter dient. Diese Seite muss für alle Arten von Geräten lesbar sein. Deshalb wird über den Seitenassistent eine mobile Ansichtsseite erstellt. Auf dieser Seite werden zwei Schaltflächen platziert. Das Sprungziel der ersten Schaltfläche soll die Seite für Desktop-Endgeräte sein, das der zweiten Schaltlfläche soll die Seite für mobile Endgeräte sein. Beide Schaltflächen werden in den versteckten Bereich der Seite verschoben. Außerdem wird ein aussagekräftiger Hinweistext für den Benutzer benötigt, damit er weiß, dass eine automatische Weiterleitung folgt.

Unterscheidung über JavaScript

Bei dieser Variante wird im onload-Ereignis der gerade erstellten Schalter-Seite folgender JavaScript-Aufruf hinterlegt:

window.setTimeout('MobileDesktopRedirect()',5000);

Die genannte Methode muss sowohl im JavaScript für den Desktop als auch im JavaScript für mobile Endgeräte definiert werden (Hauptmenü Bearbeiten / Skript bearbeiten / JavaScript für Desktop bearbeiten bzw. JavaScript für mobile Endgeräte bearbeiten). Die Methode für den Desktop löst einen Klick auf die erste und die Methode für mobile Endgeräte löst einen Klick auf die zweite Schaltfläche aus. Intrexx entscheidet hierbei selbst, welches der beiden Skripte aufgerufen wird.

/* JavaScript for desktops */
function MobileDesktopRedirect(){
    getElement("B48F.....AFBF").click() /*Desktop buttoncontrol*/
    return true;
}

/* JavaScript for mobiles */
function MobileDesktopRedirect(){
    getElement("0A03.....D462").click() /*Mobile buttoncontrol*/	
    return true;
}

Unterscheidung über Velocity

Da bei der JavaScript-Variante zwei Skripte gepflegt werden müssen, hier noch eine Variante mit Velocity. Die Unterscheidung und Weiterleitung findet an einer zentralen Stelle statt. In den Eigenschaften der Schalter-Seite wird eine Velocity-Datei zur Initialisierung referenziert. Diese Datei ist folgendermaßen aufgebaut:

#set($guid = "")
#if($LayoutManager.getLayout($layout).isMobile())
    #set($guid = "0A03.....D462")  ##GUID of the button to mobile page
#else
    #set($guid = "B48F.....AFBF")  ##GUID of the button to desktop page
#end
<script type="text/javascript" class="evalcode">    function MobileDesktopRedirect(){
        getElement("$guid").click();
    }
    window.setTimeout("MobileDesktopRedirect()",5000);	
</script>

Zunächst wird abgefragt, ob es sich beim aktuellen Layout um eine mobile Version handelt, um dann ausgehend davon ein JavaScript zu generieren, das die entsprechende Schaltfläche klickt. Das Klassenattribut "evalcode" ist notwendig, da sonst das JavaScript auf mobilen Endgeräten nicht ausgeführt wird.