How to Measure Screen Performance on Responsive Sites

We will now help you to understand how to measure screen performance that are needed.

Google Tag Manager and dataLayer will help us in measuring screen performance.

First of all, there’s a rule we need to determine for our site. This rule also relates to which screen resolution should be collected under which group.

For example, we have set the screen resolutions to S, M, L, XL in a project. Each group has its own rules. Below is a sample datalayer. In this datalayer, we can see which group in which screen resolution is running and whether the screen is horizontal or vertical. Because I’m a bit of a stickler, and I didn’t use it in the first place, but I wanted measurements. You can request this datalayer from your front-end developer.

height: "610"
width: "1680"
screenResolution: "1680x610"
screenSize: "XL"
screenType: "Horizontal"

If you run this datalayer when the page opens, you can pass this information to GA through the event that works with Google Analytics. So, how?

First, you need to define each screen information as a variable to Google Tag Manager. This information is very easy to define to GTM because it comes with DataLayer. I shared a sample below.

After defining these variables, we’ll need to transfer them to Google Analytics. We’ll do it with custom dimension. It’s easy to convey custom dimension data from Google Tag Manager to Google Analytics. Read our article on the subject: What are Custom dimensions?

If you create a segment after you have made these enhancements, you can achieve a similar situation to the following screen image.

This way you can measure your screen performance more accurately and improve your enhancements in that direction.