To ensure it maintains the highest level of functionality, keep in mind these best practices for using the Web Snap function.
Best Practices for Marketers
Marketers can optimize their Web Snap content by following these guidelines for choosing which part of a webpage to use for a Web Snap layer.
Use Your Own Resources, Specific URLs, and CSS
Monetate recommends that you use your own site when creating Web Snap content to ensure each Web Snap–enabled image you create appears as expected and keeps content in line with the rest of your company's messaging. Using your own resources better ensures that no unexpected site reformatting or reorganization renders existing Web Snap content useless.
If you want to use content from a third-party website, use specific URLs and CSS where possible. Avoid using pages that change frequently or are personalized for each unique visitor. The more specific and static the resource is, the more accurate the Web Snap is and will be.
Use the CSS Page Selector Before Using the Crop Tool
When creating a Web Snap layer in Content Builder, you can specify the area of your site to use in one of two ways:
- The CSS selector
- The crop tool that appears on the canvas in Web Snap Editor
Inputting the target content's CSS selector is preferred for initially creating a Web Snap layer because the selector still identifies the target page content even if the content itself moves or changes on the page. Using the crop tool to select the target content can adversely impact a Web Snap layer because the area you select and crop cannot change even if the page content you'd selected moves. Therefore, the best way to create a Web Snap layer is to input the CSS selector and then specify the content area with the crop tool.
Minimize Web Snap Size
Don't use large pieces of content in a Web Snap layer. Each additional pixel captured lengthens the time needed to render. For optimal render time, keep Web Snap capture areas smaller than 600 x 400 pixels.
Choose Pages Without Real-Time Testing Experiences
For best results, avoid using for Web Snap content any page on your site on which you've activated real-time A/B testing. Because the Web Snap feature accesses sites using an automated tool and not a dedicated browser, a page with a texting experience may not display as intended.
Choose Pages Without Pop-Ups or Lightboxes
Because the Web Snap feature takes a snapshot of a page within minutes of real time, ensure you use pages that aren't impacted by pop-ups or lightboxes, which can interfere with the content-capture process because these elements take priority on a site.
Best Practices for Developers
This guidance can help developers who build or host pages used for Web Snap content to build a Web Snap–friendly site.
Ensure Load Events Are Synchronous
As soon as the browser fires the load event, Monetate captures a snapshot of the page element designated in the Web Snap. To ensure the quickest response time and most accurate Web Snap captures, ensure that AJAX requests are synchronous (with async: false).
Remove Items That Aren't Needed for Web Snap Content
Loading images and JavaScript libraries for elements that aren't used for Web Snap content can cause extended load times. Removing unnecessary assets from the page reduces load time.
Ensure Pages Load Quickly
Web Snap captures are rendered in near real time. Therefore, faster-rendering pages are the best sources for Web Snap content. These tips may help you improve page load times:
- Move all CSS files inline.
- Store images locally rather than on external sites.
- Use Google's PageSpeed Insights tool to evaluate page load time.
- Ensure the page doesn't cancel requests when it loads.
Use CSS
Most WebKit-based CSS is supported except for 3D transforms. Because Monetate loads the target website using WebKit, no cross-platform CSS precautions are necessary.
Store Fonts Locally
Monetate recommends using locally installed fonts instead of ones loaded externally through another resources, such as Google Font API or TypeKit.
Load JavaScript at the Bottom of the Page
You can use JavaScript on the pages used for Web Snap captures. As a best practice, ensure scripts load at the bottom of the page without using onDomReady.
Load External Data via APIs
Monetate renders the Web Snap image after onDomReady events have fired. Therefore, if JavaScript loads XHR normally, the callback is not called before the image has been rendered. To avoid this problem, ensure that AJAX requests are synchronous, which you can accomplish by setting XHR async to false to block the page while the XHR request is happening. Here is a code sample for this situation.
var req = new XMLHttpRequest();
req.open('GET', url, false);
req.send(null);
var data = JSON.parse(req.responseText);Code with the Site's Visitor Traffic in Mind
A page may load many times if it contains content used for a Web Snap image because Monetate requests a new image every few seconds. If you use external APIs, ensure their rate limits support the potential volume of page loads.
Keep in mind too that many requests come from a range of IP addresses managed by Monetate. As a result, you shouldn't use IP-based limiting.