• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Using 51Degrees Cloud API with JavaScript

Published on Monday, September 12, 2016

Using 51Degrees Cloud API with JavaScript

With today’s modern web infrastructures the implementation possibilities for your website are endless; there are many languages you can build your website on, and a plethora of CMS providers to choose from. Whilst some of these can be quite restrictive, the one thing that almost every website is able to use is JavaScript. This blog is aimed at those who may not be able to use languages such as Java or .NET to access our cloud service and shows you how to get it working with nothing more than basic JavaScript.

This snippet will go through a key implementation feature, whilst a full tutorial can be found in the Developer Documentation. In the example below I demonstrate how you can redirect to three different webpages depending on whether the connecting device is a mobile, a tablet or neither.

<!DOCTYPE html>
<html>
<script>
	var xmlhttp = new XMLHttpRequest()
	<!-- Insert Cloud key here. -->
	var key = "Key"
	<!-- Receives UserAgent from clients connection. -->
	var ua = window.navigator.userAgent	
	<!-- Lists the properties required. -->
	var url = ("https://cloud.51degrees.com/api/v1/"+key+"/match?user-agent="+ua+"&Values=IsMobile+IsTablet")
	<!-- Parses the JSON object from our cloud server and returns values. -->
	xmlhttp.onreadystatechange = function(){
		if ( xmlhttp.readyState == 4 && xmlhttp.status == 200){
			var match = JSON.parse(xmlhttp.responseText)
	<!-- Redirects dependant on device detected -->		
			if(match.Values.IsTablet == true){
				window.location.replace("https://51degrees.com/Tablet")
			}
			else if(match.Values.IsMobile == true){
				window.location.replace("https://51degrees.com/Mobile")
			}
			else{
				window.location.replace("https://51degrees.com")
			}
	<!-- If neither do nothing and continue to home page -->			
		}
	}		
	<!-- Sends request to server. -->
	xmlhttp.open("GET", url, true)
	xmlhttp.send()		
</script>
</html>

This code checks the API for the clients UA and directs the user to the relevant page for their device. You could easily adapt this for advertisements, links or phone numbers displayed on specific devices.

For more information on our cloud service, or our other on premise solutions, contact us and a member of our team will be happy to assist.

Comments (0)

Author: Anonym

Categories: Development

Tags: Device Detection , Javascript , Cloud , 51Degrees

Name:
Email:
Subject:
Message:
x

Tags

.NET 4G 51Degrees 5G Acer Adform Adtech Advertising Afilias Alcatel Amazon AMP Analysis Analytics Android Apache API Apple Asian Market ASP.NET Asus Blackberry Browser C C# Centro Chrome Cloud CMS CPU CSS3 Data Data Blog Data File Daydream Design Detection Developers Device Device Data Device Detection Device Intelligence Device Models Device property DeviceAtlas Disney dmexco DotNetNuke Download ebay Ericsson Event Facebook Firefox Foundation Framework Galaxy git repositories Google Google Analytics Google Daydream GPU GSMA Guess HAProxy Hash Trie HTC HTML5 HTTP HTTP Headers Huawei Infinix Ingeniux Internet usage iOS iOS 13 ipad iPadOS iPhone iPhone 11 Java Javascript Kentico LG Liferay LTE m.dot Memory Memory leak Meta Data Microsoft Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Motorola Mozilla MWC MWC 2017 MWC16 Native Apps NET New Release News Nexus NFC NGINX Nokia OnePlus 5 Opera Operating System Oppo Optimisation OS Patent Performance PHP Press Release Price Band programmatic Publishers Python Redirection Research Responsive Images Responsive web design RESS Review RTB RWD Safari Samsung Scala ScientiaMobile SEO Server Server-side optimisation Seznam.cz Sitecore Smart TV Smartphone Smartwatches Sony Swedish Beers Tablet Tencent Testing Tips Tutorial Umbraco Update User Agent User-Agent Valgrind Varnish Varnish Cache Video Vodafone VoLTE Web Web Apps Web content management Webtrekk White Paper Widgets WiFi Windows WURFL Xiaomi Xperia ZTE