Render Your Visitors Top Screen Resolutions with Python and Puppeteer

Introduction

This script analyses the top ten screen resolutions of your visitors and renders out screenshots of each one. This allows site owners to spot resolution-specific issues in seconds. A simple way to increase UX, engagement and conversions!

Quick Start Guide

1. Download the screen resolution report from Google Analytics
2. Place in the same folder as the python script
3. Edit the script to include the URL you wish to analyse
4. Run the script and be amazed as the folder is automatically populated with PNG renders of each resolution!

Instructions

Download the screen resolution report from Google Analytics in .csv format.

Audience > Technology > Browser and OS

Then choose the ‘screen resolution’ tab.

If you’re in the right place, your screen should look something like the following:

Download the CSV file and place in a new folder.

Next download the script from GitHub and place it in the same folder as the .csv file.

Lastly, edit in the URL you wish to check and then run the script!

Code Walkthrough

Start by installing pandas and Pyppeteer

pip install pandas
pip install pyppeteer

Next import the following libraries

import pandas as pd
import asyncio
from pyppeteer import launch
import os
from glob import glob

Set the URL to check each render for. I recommend running through different sections of your Website. PDP/PLP/Basket and so on.

url = "http://www.guardian.co.uk"

OS is used to get the current working directory.

dir = os.getcwd()
os.chdir(dir)

We use glob to read in the Google Analytics with a wildcard. This is because the GA name is dynamic (includes the date). Using a wildcard allows this file to be read in consistently. We use the skiprows argument to pull the data from the correct row.

for f in glob('*Browser & OS*.csv'):
    df_ga = pd.read_csv((f), skiprows=6)

This code uses loc to grab the first ten rows by index and splits out the screen resolution to two new columns, width and height. This allows it to be passed easily to the Pyppeteer function to render out the screenshots.

df_ga.drop(df_ga.loc[10:].index, inplace=True)
df_ga['width'] = df_ga["Screen Resolution"].str.split("x").str[0].astype(int)
df_ga['height'] = df_ga["Screen Resolution"].str.split("x").str[1].astype(int)
width_list = list(df_ga['width'])
height_list = list(df_ga['height'])

This function uses Pyppeteer to render and save screenshots to directory the script is running from.

async def main():
    browser = await launch()
    page = await browser.newPage()
    await page.setViewport({'width': ga_width, 'height': ga_height})

    await page.goto(url)
    await page.screenshot({'path': str(ga_width) + "x" + str(ga_height) + ".png"})
    dimensions = await page.evaluate('''() => {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight,
            deviceScaleFactor: window.devicePixelRatio,
        }
    }''')

    print(dimensions)
    await browser.close()

Next we call the function

for ga_width,ga_height in zip (width_list, height_list):
    asyncio.get_event_loop().run_until_complete(main())