Tips & Tricks - Automatic forwarding dependent on the end device

If newsletters or tasks with a link to an Intrexx page are sent via email, then it is not possible to control whether the recipient opens the link on a mobile device or a desktop PC. If the link leads to a page created for desktop PCs, then this cannot be opened on a mobile device. In this case, you have the ability to identify which type of device is accessing the target page and then to respond accordingly. This workshop will show you how. Background knowledge in Velocity and JavaScript are an advantage.

Layout

For this method to work correctly, a desktop as well as a mobile layout needs to have been configured.

Page setup

Different to the usual approach, a page that serves as a switching point needs to be created first. This page needs to be viewable on all device types. Therefore, a mobile view page is created via the page wizard. Two buttons are added to this page. The destination of the first button should be the page for desktops, and the destination of the second should be the page for mobile devices. Both buttons are moved to the hidden area. In addition, a clear notification is required that informs the user that they are being forwarded automatically.

Differentiation via JavaScript

With this option, the following JavaScript call is stored in the onload event of the switching point page that was just created:

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

The stated method needs to be defined in both the JavaScript for desktop and for mobile devices (Edit menu / Edit script / Edit JavaScript for desktop / Edit JavaScript for mobile, respectively). The method for the desktop triggers a click of the first button and the method for mobile devices triggers a click of the second button. Intrexx decides for itself which of the two scripts is triggered.

/* 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;
}

Differentiation via Velocity

Because the JavaScript option means that two scripts need to be maintained, here is an option with Velocity. The differentiation and forwarding takes place in one central place. A Velocity file is referenced to be initialized in the properties of the switching point page. This file is constructed as follows:

#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>

To begin with, the code checks whether the current layout is a mobile layout and generates a JavaScript based on this that clicks on the corresponding button. The class attribute "evalcode" is required because otherwise the JavaScript will not be performed on mobile devices.