Table of Contents
What is userstack API?
The userstack API is a real-time, easy-to-use REST API interface capable of parsing User-Agent strings to precisely detect device, browser, and operating system information.
Implementing the JSON/XML API in your frontend or backend system will give you all the tools you need to take control of your website’s or application’s user experience and the customer journey that goes with it. This API can also be combined with a geolocation api.
Why UserStack API?
UserStack API stands out because of these features:
- Powerful & Scalable – No need to worry about sending hundreds of thousands of API requests
- Accurate Data – Highest reliability and accuracy
- Easy Integration – Powerful API with easy to integrate design
- Cost-effective – You can start using userstack API for free with 10,000 monthly requests
How to use UserStack API?
Just head over and sign up for a free account, and you will get your free API access key. With your uniquely generated API access key you can start using the UserStack API from anywhere.
Here is a sample of an API request with the access_key parameter.
And here is the result of the request:
- Operating System
- Name of the OS
- Code of the OS
- and more
- Device
- Flag for mobile device
- Type – e.g: Desktop
- Device Code
- and more
- Browser
- Name of the browser
- Browser engine
- Browser version
- And other information about the user
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
{ "ua": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36", "type": "browser", "brand": "Apple", "name": "Mac", "url": "https://www.google.com/about/company/", "os": { "name": "macOS 10.14 Mojave", "code": "macos_10_14", "url": "https://en.wikipedia.org/wiki/MacOS_Mojave", "family": "macOS", "family_code": "macos", "family_vendor": "Apple Inc.", "icon": "https://assets.userstack.com/icons/os/macosx.png", "icon_large": "https://assets.userstack.com/icons/os/macosx_big.png" }, "device": { "is_mobile_device": false, "type": "desktop", "brand": "Apple", "brand_code": "apple", "brand_url": "http://www.apple.com/", "name": "Mac" }, "browser": { "name": "Chrome", "version": "71.0.3578.98", "version_major": "71", "engine": "WebKit/Blink" }, "crawler": { "is_crawler": false, "category": null, "last_seen": null } } |
How to do a Bulk User-Agent Lookup?
If you want to check multiple User-Agent strings, you can use the base endpoint with the ua_batch parameter that contains the User-Agent strings to process.
Here is an example of executing a Bulk-User-Agent request:
Specify Response Fields
When you make a bulk lookup, the response can be large. It is usually better to specify your response fields for only the data you need.
Here is how to configure your response fields:
How do I integrate userstack API into the Node.js web app?
In this demonstration, we will create a Node.js web app that integrates the UserStack API.
How to set up Node.js with UserStack API?
Open your terminal, PowerShell or Bash. Next, type these commands to create a folder and initialize the basic project files.
Then go back to your terminal and type this command to install the required node modules.
Now in this part, copy the static (CSS, js, images) files from our repository. Here is our project file structure:
Next, install nodemon. nodemon is a tool that helps you develop NodeJS-based applications by automatically restarting the node application when file changes are detected. It improves your productivity.
You can follow these steps to configure nodemon.
|
1 |
npm install nodemon |
Now, go back to your code editor and enter this code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const express = require('express') const app = express() const port = 2424 app.use(express.static('public')) app.use('/css', express.static(__dirname + 'public/css')) app.use('/img', express.static(__dirname + 'public/img')) app.use('/js', express.static(__dirname + 'public/js')) app.set('views', './src/views') app.set('view engine', 'ejs') const userStackRouter = require('./src/routes/userstack') app.use('/', userStackRouter) app.listen(port, () => console.log(`Running on ${port} port`)) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
const express = require("express"); const userStackRouter = express.Router(); const axios = require("axios"); userStackRouter.get("", async (req, res) => { try { const userAgent = await axios.get( `https://api.userstack.com/api/detect?access_key=91047efbebc9527f4039a090768a6159&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_14_0)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/71.0.3578.98%20Safari/537.36` ); res.render("userStack", { info: userAgent.data }); } catch (error) { if (error.response) { console.log(error.response.data); } else if (error.request) { console.log(error.request); } else { console.log("Error", error.message); } } }); module.exports = userStackRouter; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<div class="container-fluid"> <h3 class="text-dark mb-4">User-Agent Info</h3> <div class="row mb-3"> <div class="col-lg-4"> <div class="card mb-3"> <div class="card-body text-center shadow"><img class="rounded-circle mb-3 mt-4" src="<%- info.os.icon_large %>" width="160" height="160"> <div class="mb-3"></div> </div> </div> </div> <div class="col-lg-8"> <div class="row"> <div class="col"> <div class="card shadow mb-3"> <div class="card-header py-3"> <p class="text-primary m-0 fw-bold">Operating System & Device Info</p> </div> <div class="card-body"> <form> <div class="row"> <div class="col"> <div class="mb-3"><label class="form-label" for="username"><strong>Name: <%- info.os.name %></strong></label></div> </div> <div class="col"> <div class="mb-3"><label class="form-label" for="email"><strong>Family Vendor: <%- info.os.family_vendor %></strong><br></label></div> </div> </div> <div class="row"> <div class="col"> <div class="mb-3"><label class="form-label" for="first_name"><strong>Type: <%- info.device.type %></strong><br></label></div> </div> <div class="col"> <div class="mb-3"><label class="form-label" for="last_name"><strong>Name: <%- info.device.name %></strong><br></label></div> </div> </div> <div class="mb-3"></div> </form> </div> </div> <div class="card shadow"> <div class="card-header py-3"> <p class="text-primary m-0 fw-bold">Browser & Crawler Info</p> </div> <div class="card-body"> <form> <div class="mb-3"><label class="form-label" for="address"><strong>Browser Name: <%- info.browser.name %></strong><br></label></div> <div class="row"> <div class="col"> <div class="mb-3"><label class="form-label" for="city"><strong>Browser Engine: <%- info.browser.engine %></strong></label></div> </div> <div class="col"> <div class="mb-3"><label class="form-label" for="country"><strong>Is-Crawler: <%- info.crawler.is_crawler %></strong></label></div> </div> </div> <div class="mb-3"></div> </form> </div> </div> </div> </div> </div> </div> </div> |
Here is our final result. Check out the full source code here.
Hope you liked this demonstration!
Head over now and get your free subscription plan on UserStack
