Feature Availability: This feature is available on the Wingify Insights Free Trial, Pro, Growth, and Enterprise plans.
This article covers the following:
- About Asset Snapshotting in Wingify Session Recordings
- Enable Asset Snapshotting in Wingify Session Recordings
- Verify if Wingify Snapshots Assets Correctly
- Troubleshooting
- FAQs
In web development, assets are static files used to build a web application. They are crucial for delivering a consistent user experience. One example of an asset is CSS files.
Assets are typically stored on your organization’s server. Wingify fetches these assets from your server and uses them to render the web pages accurately during the session recording playback. Suppose you update, delete, or rename an asset after Wingify records a session. In that case, the playback may display broken or incorrect styling, or missing elements, as the original assets are no longer available or have changed. The session playback may no longer reflect the user’s actual experience, thus making it difficult to analyze user behavior and troubleshoot issues accurately.
Wingify’s asset snapshotting feature addresses this issue. It takes a snapshot of your website assets when a user session is recorded. This means, it captures the exact state of your website’s assets (CSS files) and stores it on Wingify’s servers. When you replay the session recording, Wingify uses the snapshots stored on Wingify’s servers instead of fetching them from your server. This ensures that the replay accurately reflects the website’s appearance at the time of the recording, regardless of subsequent changes to the assets on your server.
For example, a user may see a broken button on your website due to changes in the CSS style. You check the session recording to understand what went wrong. If your design team fixed the CSS style issue after the session was recorded, the button might look fine in the recording—making it difficult to diagnose the problem.
Without asset snapshotting, the session recording shows the updated version, not the user’s actual experience.
With asset snapshotting, the recording saves the button’s original appearance so you can see what was broken and fix it.
Enable Asset Snapshotting in Wingify Session Recordings
Asset snapshotting is enabled by default for all Wingify accounts. If it appears to be disabled for your account, contact Wingify Support for assistance.
After enabling asset snapshotting, Wingify may not be able to capture assets in the following scenarios:
- Firewall Blocks If your firewall blocks requests from Wingify’s asset snapshotting service, Wingify does not capture assets.
- Geo-IP Restrictions Suppose your website assets are hosted on servers with geo-IP restrictions, which means they are only accessible from specific locations. In that case, Wingify's Asset snapshotting service may not capture them. Wingify downloads assets from the same server location where your other website data is stored. For more information, refer to Wingify Data Residency.
- Authentication/Authorization Restrictions If your website uses authentication or authorization mechanisms, such as Cloudflare Access or similar services, Wingify's asset snapshotting service may be blocked from accessing and capturing assets. This can result in incomplete or broken replays.
- Rapid Asset Deletion/Renaming If you delete or rename assets, for example, by doing frequent design updates or cleaning up unused assets, they might not render correctly in real-time. In such cases, there's a slight chance Wingify's snapshotting process might miss them.
To ensure Wingify’s asset snapshotting service can access and snapshot your assets, you must allow Wingify in your firewall rules. This article further explains how to do that.
Allow Wingify in Your Organization’s Firewall Rules
Wingify stores assets on its secure servers, ensuring playback remains accurate without relying on your server. To capture and store your website assets on Wingify’s servers, Wingify’s snapshotting service needs access to your server without being blocked by firewalls or other security measures. To grant access, Wingify recommends allowlisting traffic based on the presence of the keyword Wingify in the user-agent string. Allowlisting the user-agent enables you to grant access based on the specific identifier sent with each request from Wingify’s asset snapshotting service.
It is secure because:
- The Wingify keyword in the user-agent string clearly identifies requests from our service, making it easier to monitor and control access.
- Limiting access to Wingify requests reduces the potential attack surface compared to opening up access to a range of IP addresses.
- You don’t need to manage and update a list of IP addresses.
By allowlisting requests from Wingify, you ensure Wingify’s asset snapshotting service can fetch and store your website assets at the time of recording, resulting in accurate session replays.
Verify if Wingify Snapshots Assets Correctly
To verify if Wingify captured an asset correctly, you can review session replays in Wingify and compare the assets during playback with those currently on your live website.
For example, your website has a specific CSS style applied to a button. During a Wingify session recording, a user views a page with that CSS style. Later, you update the button’s CSS on your live website, changing its appearance. Now, you want to ensure that the session recording accurately reflects the original styling (as it was when Wingify recorded the session) rather than the updated version. Follow the steps listed below:
- Check the Assets in Replay Replay the session recording and pay attention to the button. If Wingify snapshots the asset correctly, the button in the replay should match the version that was live at the time of the recording, not the new button with the updated styling.
- Compare with the Live Website Now, open the live version of your website (make sure you’re viewing the latest version with the updated styling) and verify that it’s the new button you’ve replaced it with.
If the replay shows the button with old styling and the live site shows the button with the new styling, this confirms that the asset snapshot was successfully captured and stored at the time of recording.
Troubleshooting
If the session recording indicates CSS style issues despite enabling asset snapshotting for your account and allowing Wingify in your account's firewall, contact Wingify Support.
FAQs
Q: Why do some assets still appear broken in session recordings?
A: This may happen if the asset is blocked or not accessible at the time of recording. Ensure that the Wingify user agent is allowlisted so that asset snapshotting can function correctly.
Q: What should I do if an asset isn’t captured correctly, even after confirming Wingify is allowed in my organization's firewall?
A: Contact Wingify Support.
Q: For how long does Wingify store asset snapshots?
A: The retention period depends on your Wingify plan. To know which plan you are on, refer Subscriptions & Invoices > My Subscription. To know more about data retention, refer Wingify Data Retention Policy.
Q: If I enable asset snapshotting, does it affect my website’s performance?
A: No, asset snapshotting does not affect your website’s performance.
Q: Can I choose which assets should Wingify snapshot?
A: No. If asset snapshotting is enabled, Wingify snapshots all CSS files.
Q: Can I disable asset snapshotting?
A: To disable asset snapshotting for your account, contact Wingify Support.
Q: Can I selectively enable or disable asset snapshotting for specific pages of my website?
A: Currently, asset snapshotting is enabled at the account level. You cannot selectively enable or disable it for specific pages of your website.
Q: Is there a limit to the size or number of assets that Wingify can snapshot?
A: No, there is no limit to the size or number of assets Wingify can snapshot.
Q: Can I download the snapshotted assets?
A: No. You cannot download snapshotted assets.
Q: Does Wingify snapshot dynamic assets?
A: Yes, Wingify snapshots dynamic assets for which stylesheets are loaded only when needed for a specific feature or interaction.
Need more help?
For further assistance or more information, contact Wingify Support.