When playing visitor recordings, a specific recording might show a page with an incorrect layout—either partially or completely devoid of styles, or missing certain elements, such as images or icons, resulting in the page looking like the example below.
It's important to realize that recordings are not videos, the reconstruction of your visitors' activity happens within the player itself, from the assets on your website. This means that when Smartlook doesn't have access to some CSS assets, it's not able to reconstruct the recording correctly. Below are the most common issues that can result in styling being out of place, along with instructions on debugging.
Debugging an issue
When you play a recording, Smartlook uses proxies to access your assets (such as CSS stylesheets) and load the data, so the recordings can show specific styles correctly.
In order for a recording to show the correct layout of the page, when you open the browser’s developer tools (e.g., pressing F12 in Chrome), you can see the CSS assets that are being retrieved in the ''Network'' tab of the developer tools.
Whenever there's an issue with retrieving some assets, you can see the affected asset highlighted (1), as well as an error message in the browser console (2). Please see the example below.
Most frequent issues resulting in styling errors
Access issues for proxy
If our proxy IP is not able to access any of the assets on your end, styling might appear out of place. If you're experiencing time-outs for certain CSS resources, or they're failing to load (you can check this in the ''Network'' tab), it's possible that our proxy IP 184.108.40.206 doesn't have access to your assets. In that case, please whitelist it on your end.
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page (e.g., fonts) to be requested from another domain outside the domain from which the first resource was served by. A web page can freely embed cross-origin images, stylesheets, scripts, iframes, and videos.
When Smartlook's proxies make a successful CSS request to your servers, the response includes a special header called an ''Access-Control-Allow-Origin'' response with a value of * (wildcard), which means that this resource can be requested by all domains.
When a resource lacks this, it cannot be requested by other domains, so the request made by the Smartlook proxy to your server is unsuccessful, and the player will not render this data in the recording. You'll see an error message in your console that looks like this:
In order to solve this, you'll need to check your security settings and enable this header by allowing CORS. Alternatively, you can also use an extension like this, which automatically adds ''Access-Control-Allow-Origin: *'' to the response header rule, so the recordings played in your browser will be displayed correctly.
Changes in your CSS
When you make changes in your CSS, older recordings can start to display the new style, because when you play the recording, the Smartlook proxy accesses your assets and retrieves the current version of your CSS stylesheet.
The solution to this is to create a new stylesheet when you launch a new version of your CSS and keep the stylesheets with the older version. This way, when you play old recordings, Smartlook will retrieve the old version of the CSS from the older stylesheet. When you play more recent recordings, Smartlook will retrieve the styles from your newest version.
Another common scenario is using a dynamic CSS, in which temporary stylesheets are generated, so when you access the page on a different date, the stylesheet may have expired. Then, what you are seeing is the styling from a new stylesheet.
Smartlook's proxies, however, retrieve the data from the active spreadsheet at the time the recording was made, so if you've temporary CSS files and these happen to have expired, this'll cause the recordings to break after a certain period of time, given that the proxies can no longer access the expired CSS files. This is accompanied by an error in the CSS request.
The solution for this is to keep the older files so that Smartlook's proxies can still have access to those assets. You can contact us and request us to enable the automatic caching of assets for your account.
NOTE: Automatic caching of assets is enabled by default for the majority of the accounts. However, this could potentially apply if you've had an account with us for a long time, in which case, a member of our support team will be more than happy to turn this on for you.
Additional circumstances that can result in incorrect styling
There can be several factors that can cause recordings not to retrieve the correct CSS style of your page. For instance:
Your website could be in a localhost environment, an intranet, within a VPN network, or have assets stored behind a login. In order to function properly, Smartlook has to be installed on an entirely public website, so all the data can be retrieved through a proxy to our servers.
The recording is too short (i.e., it ends after just 1 second) and the connection was not established, meaning the CSS style of your page wasn't retrieved.
You might have a firewall blocking Smartlook's proxies. Check your web security settings and make sure you have the header: access-control-allow-origin:* enabled.
TIP: Still not sure how to deal with the out-of-place styling in your recordings? Then contact us on email@example.com, and we'll be more than happy to help you!