Though Viewport and Screen Resolution can easily be captured for each Website Session, a few lines of javascript code will allow you to parse the required information to compute and make this data available for you or your team to analyze.
Viewport – The size of available for your web page to load within the user’s website browser both horizontally and vertically based on the number of pixels.
Screen Resolution – In comparison to the Viewport, the Screen Resolution is the actual size of your screen, both horizontally and vertically based on the number of pixels.
You won’t need to be an expert to implement the javascript code, it will literally take 3 lines of codes to get the information required.
To capture the Viewport, see below sample JS Code:
var vwidth = window.innerWidth;
var vheight = window.innerHeight;
var viewport = vwidth + “px” + “ x “ + vheight + “px”;
document.write(“Viewport: ” + viewport);
Sample Output:
Viewport: 1680px x 962px
To capture the Screen Resolution, see below sample JS Code:
var swidth = screen.width;
var sheight = screen.height;
var screenResolution = swidth + “px” + “ x ” + sheight + “px”;
document.write(“Screen Resolution: ” + screenResolution);
Sample Output:
Screen Resolution: 1680px x 1050px
That’s it! Your website can now capture the actual Viewport and Screen Resolution of the device your website visitors are using. This is also applicable for hybrid mobile applications. The next step is to store it in your database or create some event triggers to push out campaigns or personalizations for your users.
What do you think? Comment below or message me. Thanks for reading!
👉👉Follow @jaybraycabana and #thisisanalytics in IG for more posts about #analytics, #DigitalMarketing, #businessstrategy
👉👉 IG: https://www.instagram.com/jaybraycabana/