Detecting Page Zoom In/Out with Adobe Launch | AEM Community Blog Seeding

[kautuk_sahni]

Detecting Page Zoom In/Out with Adobe Launch by Insights Feed

Abstract

If you have a text-heavy site, have you wondered whether your site visitors could easily see and read your content across various device types? If so, you may want to track zoom events to determine if visitors are zooming in on text content, which may indicate you need to increase your font sizes, or maybe you want to see if users are zooming out to see all images in a gallery view, or perhaps you are just curious.

Zoom event data may help you design your mobile layout to help users better consume your content.

There is no out-of-the-box method to detect browser zoom in/zoom out events with Adobe Launch. Thankfully, it’s easy to implement with a bit of custom code that utilizes screen-sized data and session storage.

Device Pixel Ratio
To track the zoom in/out event, we will monitor the value of window.devicePixelRatio. Based on this value and changes to it, we will determine if the window has been zoomed in or zoomed out. According to the MDN documentation, devicePixelRatio is:

“The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel. In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.”

This value measures the size of CSS pixels. When a browser zooms in or out, the ratio between these pixels and physical screen pixels changes. This is a better measurement of zooming than say viewport size, which can be changed by zoom events, and by resizing the browser window. The devicePixelRatio value does not change if the browser window is resized.

Setup in Adobe launch
There is a small setup required before we can successfully track the zoom in or zoom out events. First, we create a custom code data element to quickly retrieve devicePixelRatio. I’ll call this data element Zoom Level for simplicity. In general, we recommend using a rigid naming convention for all elements in Launch. If you haven’t already, check out our article on Adobe Launch Naming Conventions.

Read Full Blog

Detecting Page Zoom In/Out with Adobe Launch

Q&A

Please use this thread to ask the related questions.