Troubleshooting for recordings

No recordings are being generated

If you are not getting any recordings on your Smartlook account, there can be several reasons for that:

  • You don’t have Smartlook installed on your page, or it was incorrectly installed. Make sure you install Smartlook correctly.
  • If you’re using a CMS like WordPress and you updated your website or theme, the plugin could have been deleted. If that’s the case, you need to reinstall it.
  • You have your recordings disabled (toggled off). Simply toggle them on again in the Dashboard.
  • Visitors are still browsing the website. Recordings will be made available a few minutes after your visitors leave your website.
  • Have you noticed some discrepancies between your visitor count in other analytics tools and the number of visitor recordings in Smartlook? Check out the help section called “Does Smartlook record all visitors?

Recordings aren’t showing the correct layout of the page

There can be several factors that can cause recordings not to retrieve the correct CSS style of your page, like:

  • Your website could be in a localhost environment, an intranet, or within a VPN network. 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 one second) and the connection was not established, meaning the CSS style of your page wasn’t retrieved.
  • Your website theme might have elements that are not supported (e.g., Canvas, iframes, or Flash elements). Smartlook only records HTML, CSS, and JavaScript elements.
  • Your website has dynamic CSS. Learn more here.
  • You might have a firewall blocking the Smartlook proxies. Check your web security settings and make sure you have the header access-control-allow-origin:* enabled.

Learn more here.

Can Smartlook record iframes?

It’s not technically possible for Smartlook to record iframes because the script cannot retrieve the content that is sandboxed inside such elements.

Common CSS issues

When playing visitor recordings, recordings might show a page with a defective layout, either devoid of styles, partially unstyled, or missing certain elements, such as images, which can be caused by several factors. Below are the most common.

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 styles.

In order for a recording to show the correct layout of the page, when you open the browser’s Developer Tools, you can see the CSS assets that are being retrieved.

And whenever there’s an issue with retrieving some of the assets, you can see the affected asset highlighted (1), as well as an error message in the browser console (2).

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.

Dynamic CSS

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.

The Smartlook proxies, however, retrieve the data from the active spreadsheet at the time the recording was made, so if you have temporary CSS files and these happen to have expired, this will 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 the Smartlook 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.

CORS restrictions

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. A web page can freely embed cross-origin images, stylesheets, scripts, iframes, and videos.

When the Smartlook 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 will see an error message in your console that looks like this:

In order to solve this, you need to check your security settings and enable this header by allowing the CORS. Alternatively, you can also use an extension like this, which automatically adds “Access-Control-Allow-Origin: *” to the response header rule.