Mobile Detection using Javascript

Using Tera-WURFL's Remote Webservice Client. This includes the pre-packaged clients that come with Tera-WURFL and any other client you may have made to use the webservice.

Mobile Detection using Javascript

Postby binkob » Wed Jun 01, 2011 1:15 am

First I'd like to thank you for developing Tera Wurfl. Great!

Now to the problem. Even though I did some C programming in the 80's I realize those skills are nearly dead after years of neglect.

The PHP exampes I found on tera-wurfl.com was quite similar to what I wanted to achieve so I managed however quite easily to get the PHP remote client to detect and redirect mobile users using the code below.

Code: Select all
<?php
require_once ('TeraWurflRemoteClient.php');
$wurflObj = new TeraWurflRemoteClient('http://MyTeraWurflMainDomain.com/tera-wurfl/webservice.php');
$capabilities = array("is_wireless_device");
$wurflObj->getCapabilitiesFromAgent(TeraWurflRemoteClient::getUserAgent(),$capabilities);
if($wurflObj->getDeviceCapability("is_wireless_device")){
   header("Location: http://myMobileDomain.mobi/");}
?>


This seems to work just fine after some basic testing so I'm very happy about that.

Now I try to do the same with the Javascript Remote Client but I don't know how to get it working even though I look at the example that comes with tera-wurfl.

Can someone give some hints how how the code would look like?

Another thing I solved but had some initial problem with during the Tera-Wurfl installation was loading the XML file to the database. I had to change so the simpleXML parser was used as the preferred parser, otherwise I got an out of memory error. I use Hostgator and noticed someone else had a similar problem/solution with Hostgator.

Cheers
Peter
binkob
 
Posts: 3
Joined: Wed Jun 01, 2011 12:41 am

Re: Mobile Detection using Javascript

Postby binkob » Wed Jun 01, 2011 5:36 am

OK, based on the PHP code I got working and the Javascript example.html plus the comments inside this file I tried to get it working but now i've run out of ideas.

Here's what I came up with:

Code: Select all
<html>
<body>

<script src="TeraWurflRemoteClient.js"></script>
<script type="text/javascript">
// The URL to your Tera-WURFL installation's webservice.php
var webserviceURL = 'http://www.MyMainTeraWurflSite.com/terawurfl/webservice.php';

// The user agent you are looking for. In Javascript this is 'navigator.userAgent' for the client
var userAgent = navigator.userAgent;

// The capabilities you are looking for, in an array, example: search = ['product_info','tera_wurfl','playback'];
var search = ['is_wireless_device']; // Is this correct?

// Create new TeraWurfl Object
wurflObj = new TeraWurflRemoteClient(webserviceURL);

// Call Tera-WURFL via the webservice
wurflObj.getCapabilitiesFromAgent(userAgent,search);

<<< NOW WHAT ??? >>>

<<< I guess I have to do something similar to this >>>
if (it_is_a_mobile_device or whatever i should put here)
   document.location.href='MyMobileSite.mobi';

</script>

</body>
</html>


Someone that can fill in the missing parts and correct whatever I've done wrong?

Thanks
binkob
 
Posts: 3
Joined: Wed Jun 01, 2011 12:41 am

Re: Mobile Detection using Javascript

Postby kamermans » Wed Jun 01, 2011 9:04 am

The Tera-WURFL Javascript example page is a working example, so you can look at its source for inspiration. I'll post an example when I get back to the office.
Thanks,

Steve Kamerman
Tera-WURFL Author
COO of ScientiaMobile

IMPORTANT ANNOUNCEMENT! Tera-WURFL and WURFL have joined forces! We have launched ScientiaMobile to provide commercial support for our device detection solutions.

Tera-WURFL.com | Device Explorer
kamermans
Site Admin
 
Posts: 323
Joined: Wed Mar 10, 2010 12:06 pm
Location: Fort Worth, TX

Re: Mobile Detection using Javascript

Postby binkob » Wed Jun 01, 2011 9:38 am

Great!

I looked at the working example you referred to and sure got some inspiration but it didn't take me all the way to a working script. Hope you can add and correct the missing and incorrect pieces to the code in my second post to get it working.

Cheers
binkob
 
Posts: 3
Joined: Wed Jun 01, 2011 12:41 am

Re: Mobile Detection using Javascript

Postby kamermans » Fri Jun 03, 2011 3:06 pm

Here's a complete script that will redirect mobile visitors to an alternate site on page load using Tera-WURFL via JavaScript. If you are using jQuery or a similar JS library, you should use their ready() or onLoad() function instead of replacing the window.onload() function.

Code: Select all
<html>
<body>

<script src="TeraWurflRemoteClient.js"></script>
<script type="text/javascript">
window.onload = function(){
   var webserviceURL = 'http://www.MyMainTeraWurflSite.com/terawurfl/webservice.php';
   var userAgent = navigator.userAgent;
   var search = ['is_wireless_device'];
   wurflObj = new TeraWurflRemoteClient(webserviceURL);
   wurflObj.getCapabilitiesFromAgent(userAgent,search);
   // Use a callback function to handle Tera-WURFL response
   wurflObj.onUpdate = function(capabilities, errors){
      if (capabilities['is_wireless_device'] == 'true') {
         document.location.href='MyMobileSite.mobi';
      }
   }
}
</script>

</body>
</html>
Thanks,

Steve Kamerman
Tera-WURFL Author
COO of ScientiaMobile

IMPORTANT ANNOUNCEMENT! Tera-WURFL and WURFL have joined forces! We have launched ScientiaMobile to provide commercial support for our device detection solutions.

Tera-WURFL.com | Device Explorer
kamermans
Site Admin
 
Posts: 323
Joined: Wed Mar 10, 2010 12:06 pm
Location: Fort Worth, TX


Return to Using the Remote Webservice

Who is online

Users browsing this forum: No registered users and 2 guests

cron