Express Detection : Calling Out Detection Results

Calling Out Detection Results
 


 

 

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.

 

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

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