Express Detection : Calling out detection results

Calling Out Detection Results

To aid in the process we’ve prepared a quick video.

 
Add Site

First of all, we'll add a new site by clicking Add Site. See the Express Detection : Getting Started page for a full overview on adding a new site.

Site config basic details

From the Add Site page, we’ll fill in the basic site details such as the Site Name and Site Address or URL.

Here we’ve made a basic site profile with no Redirection rules or adding new rule and click Save.

Once you've saved your site profile you'll see the Site Set-up page. Choose the Express tab, and copy the javascript snippet from the Basic Detector section.

Paste that into the section of your web page. As a side note : What's happening here is that a redirection script with no redirection rules will act as a basic detector. So we're taking the results of that detection and using it for our own purposes.

Save your web page with the script installed. For testing in this video I am using safari with the 'Developer Tools' enabled. The safari developer tools let me easily change my user-agent to mimic an iPhone, iPad and iPod Touch. You could equally use Chrome or Firefox with the User-Agent-Switcher installed.

The script snippet we’ve installed looks like this :

<script>
function myFunction() {
        if (HandsetDetection.ismobile == true) {
                document.getElementById("changethis").innerHTML = HandsetDetection.vendor + ' ' + HandsetDetection.model;
        }
}
</script>

The important part of our page looks like this (see below). It tells the page to run MyFunction after the page is full loaded. MyFunction checks the detection results and changes the ‘changethis’ paragraph to contain the device vendor and device model.

<body onload="myFunction()">
<p id="changethis"> This is my Text.  </p>

Changing the user-agent to iPhone or iPod Touch and refreshing the browser changes the on page text for the device. However changing the user-agent to an iPad does nothing. That’s because we’re only replacing the text when HandsetDetection.ismobile == true. To add a callout for Tablets as well change your snippet to look like this :

<script>
function myFunction() {
        if (HandsetDetection.ismobile == true || HandsetDetection.istablet == true) {
                document.getElementById("changethis").innerHTML = HandsetDetection.vendor + ' ' + HandsetDetection.model;
        }
}
</script>

Now, we change our user agent to iPad, and it calls out the iPad as well.

Detection Variables

There are also a whole bunch of different detection variables that can be used in a call out. The variables can be used directly in a custom script, or in a redirection URL. The accessible detection variables are below.

// Handset Detection mobile redirection script 1.3
// iPhone device
var HandsetDetection = {
    ismobile : true,
    istablet : false,
    isconsole : false,
    xhtmllevel : 4,
    width : 320,
    height : 480,
    formfactor : "bar",
    hdclass : "mobile",
    vendor : "apple",
    model : "iphone", 
    os : "ios",
    osversion : "3.0",
    browser : "mobile safari", 
    browserversion : "4.0",
    urls : ["www.starport.net","m.starport.net?$query$&os=$os$&model=$model$","t.starport.net?$query$&os=$os$&model=$model$","www.jones.com"],
    country : "au",
    city : "melbourne",
    region : "victoria",
    isp : "iinet limited",
    company : "iinet limited",
        
    // Redirect function removed
}

Get Started Today

Our free Express / Cloud plan has 20,000 detections per month. No credit card required. Upgrade when you're ready. We also have a free Community Edition for Ultimate Detection, our high performance local detection library, which you can build into community open source projects.


Get Started. Its Free