Loading...

Follow The API Company on Feedspot

Continue with Google
Continue with Facebook
or

Valid
Google Tag Manager – JavaScript cookie example

As a web-developer I often used Google Tag Manager (GTM). With GTM it is easy to discover information about your visitors. With the device detection API it becomes ever more easier. Therefore, I wrote this google tag manager device detection tutorial for you. With GTM you can detect a dozen of things. For example, you can discover how much time the user spends on each page. Even more interesting is the ease GTM offers for us to set cookies. All of this GTM logic can be implemented with so called 'tags',' triggers', and 'variables'. An example of setting a cookie on your website could be the following (conceptual):

  1. Create a "trigger" that fires on every page. More specifically, each time a user visitors a page you can execute/fire a tag (run a piece of code).
  2. Create a "tag" that will be executed with the corresponding trigger. For example, you can set your JavaScript code to execute. In this case we want to set a cookie.
  3. In GTM you can include your own JavaScript code as tag. To set a cookie you can paste the following code:


document.cookie = "user_id=XXX123; expires=Thu, 18 Dec 2019 12:00:00 UTC";


So every time a user visits your site a trigger is fired. This trigger runs the tag. Subsequently, this tag includes the JavaScript code for placing a cookie with a unique ID. Thus, when the users visits your site the next time you can identify the unique user. Doing so, it is possible to identify the same user without asking the user for information. This enables us (web-developers) to optimise the UX (user experience) dramatically.

Device detection with GTM and JavaScript

From the example above you see that GTM is very useful for optimising the UX. Unexperienced web developers are able to use GTM as well. However, if you want to do some more advanced stuff it becomes harder. For example, detecting information about the device of the user on the website. This included things like detecting, the type of device, operating system (OS), and screen size. But, in many cases it is hard to detect this information with just JavaScript. For example, Apple does not enables us to see this information. However, after a lot of time I figured out a way to discover this information. To make this possible for all web-developers I created the device detection API. This API can easily be implemented in GTM. To do st, all you need is some basic JavaScript knowledge. In this tutorial I explain how to implement this in GTM.

Implementation in Google Tag Manager (GTM)

Let's say that we want to detect the name of device on each page. Using this information we want to set an alert per device name. The following steps are needed:

1. Set-up a trigger to fire on each page
1
2
3
2. Set-up a tag to run the device detection API

Click on the Tags tab and click new in the upper right corner.

4

Click on the trigger field. A pop-up will open. Then you can click on the trigger we just created.

5

Then, click on the tag field and choose custom HTML.

6

Include the following code. This code can be found here.

7

3. Publish to your website and test

The only this left is to publish the created tag and trigger. To do so, just click the upper right button with Submit.

8

As expected: An alert will show which type of device the user has when he visits your page.

9
Conclusion

From the tutorial above you see that is very easy to implement the device detection API. Even better is to use it in combination with GTM. Of course it is possible to detect more information using the API. All features of the API are listed here.

The post Google Tag Manager Device Detection – tutorial appeared first on The API Company.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Last week we launched the device detection API. This API is a JavaScript device detection implementation to discover information about the users on your website. More specifically, you are able to detect the type of device, name of device, touchscreen information, and more. Additionally, it is possible to detect information about the user's browser. In the last post we described how the API is able to detect these device features. In this post we look at what features are available and how to implement them.

What features are available:

Currently, it is possible to detect 13 different device characteristics. However, we are constantly updating our API to detect even more information. Until this moment, the following features can be detected:

  • The type of device
  • Device brand
  • Device name
  • Screen height
  • Screen width
  • Pixel density / Screen Ratio
  • GPU
  • Browser name
  • Browser version
  • OS name
  • OS code name
  • The version of the OS
  • Touchscreen capabilities

Let us know if you have more features you want to be added to this list.

Implementation in JavaScript

On our homepage you find the JavaScript code for implementing the device detection API. The API is free and no licence key is needed. The only requirement is jQuery. jQuery is also easy to implement. Just copy-paste the following line in the <head> tag of your website:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

In addition to the code above you need to include the following code. Place the line below in the <head> tag. But place it after the jQuery line.


<script src="https://theapicompany.com/deviceAPI.js"></script>


Device detection variables

Once included in your HTML code you can access the features above. Each piece of information is stored in a variable. These variables have the following names:

FeatureVariable nameExample return
Device typedeviceAPI.deviceTypemobile
Device branddeviceAPI.deviceBrandApple
Device namedeviceAPI.deviceNameiPhone XS
Screen height deviceAPI.screenHeight800
Screen width deviceAPI.screenWidth400
Pixel density / Screen RatiodeviceAPI.screenRatio2
GPUdeviceAPI.GPUApple A12 GPU
Browser namedeviceAPI.browserNameChrome
Browser version deviceAPI.browserVersion71.0.3578.99
OS namedeviceAPI.osNameOS X Yosemite 10.10
OS code namedeviceAPI.osCodeNameOS X
OS version deviceAPI.osVersion10.10.5
TouchscreendeviceAPI.touchScreenTRUE

As you see it is very easy to implement the device detection API. You are able to use unlimited amount of requests. Even more important is that it can be used for free!

Conclusion and future blog posts

The device detection API is a very easy JavaScript tool. This tool enables web developers to easily optimise the UX. For example, the API can be used to route mobile users to a specific page. More of these use-cases will be described in future blog posts. Additionally, we will cover tutorials with Google tag manager.

The post JavaScript Device Detection – Features appeared first on The API Company.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
Not possible to detect the type of iOS device with Javascript.

Currently it is not possible for web developers to detect the type of iOS device with Javascript. In contrast to Android devices, Apple does not let you see whether visitors use an old iPhone 3G or the newest iPhone XS. However, if you want to target your website specifically for one of these devices you need this information. The device detection API enables you to detect the device type, brand, name, and more!

UserAgent

In the case of Android devices the so cal UserAgent gives information about the type of device and the browser. The "navigator.userAgent" function in JavaScript return a string containing this information. An example return is:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

So, you see that it is very hard to see what type of device is related to output of the userAgent. There is not clear structure in the userAgent of different devices. Thus, it is a hard job to discover the right device from each individual string. In the case of iOS devices it is not even possible to detect the specific name of device.

Device detection with our API

Because it is not possible to detect the type of iOS device with simple JavaScript code we need a solution. Therefore, we created a simple JavaScript API for you. Instead of using just only the userAgent string different devices characteristics are identified. By combining the information we can identify the type of iOS device. We use the following characteristics of the device:

  • The userAgent
  • The screen height
  • The screen Width
  • The pixel density
  • The CPU performance of the device

Instead of just returning type: "iPhone" (other API's) it is possible to detect type: "iPhone XS MAX". However, this is just one functionality of the device detection API. In this blogpost I describe all the different functionalities of the API.

The post Device type detection for iPhone and iPad with JavaScript appeared first on The API Company.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

The API Company is started to create an unlimited amount of API's for you! To celebrate this we started with a JavaScript API called "device detection". In the future we are going to develop as much free API's as possible and make them available to every web developer. So, if you have an idea about a possible API please let us know!

The first API: the device detection API

Using the device detection API it will be possible to detect all kind of features about the user's device on your website. Moreover, it is possible to detect the name of the device. And yes… even for iOS devices! With this information it will be possible to optimise your website to tailor the user's needs. All the features are outlined here. In a future blog post more information about this API will be outlined! The API will be updated so it will be possible to use it with PHP, node.js, and more… If you have any ideas about other ideas please leave a comment below!

The reason for starting The API Company

The API Company is a small startup from the Netherlands. The idea about setting up an API company rose when we worked as data science / web developers. During this work we found out that there are many technical possible implementations. However, to implement this was a hard and painful job. We thought that more developers are having the same problems. Using simple API's it would be possible to share your insights.

So now your job as a developer will become easier and easier… Go on and let's develop some cool applications!

The post The API Company: grand opening appeared first on The API Company.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview