How should you configure a web site to work with Convert's technology?

1. Configuring Your Site to Work with Convert Visual Editor

If the tracking script is installed and the Chrome Debugger extension is used (with the domain whitelisted), your website should load within the Convert Visual Editor (VE) regardless of headers.

However, if the tracking script is not installed, your website will load in compatibility mode, where certain functions might not be available. In such cases, or if the tracking script is installed but the extension/domain is not whitelisted, it is crucial to ensure that the webpage is allowed to load in an iframe where the parent frame is not under the same domain. This requirement can be complex to meet due to various blocking mechanisms, such as:
- HTTP headers: x-frame-options, content-security-policy, referrer-policy, sec-fetch-site, sec-fetch-mode, sec-fetch-user, sec-fetch-dest, referer
- JavaScript code on the page that detects loading within an iframe using checks based on the parent frame, referrer, etc.

Given the numerous factors that can influence this, it is challenging to provide a definitive checklist. While reviewing the above aspects can be helpful, determining the appropriate values for these headers can be tricky since they often serve specific security purposes.

The best recommendation is to use our Debugger extension, which aims to address any potential blocking methods. If a new blocking mechanism is discovered and reported to us, we typically update the extension to handle it, provided it is technically feasible.

2. Configuring Your Site to Work with Convert's Tracking Code

To ensure Convert Experiments run smoothly while maintaining your website's security, it is essential to configure your Content Security Policy (CSP) correctly. Here are the steps:
1. Locate Your CSP Header: Identify where your CSP is set in your web server's configuration, such as in .htaccess, nginx.conf, or your website's meta tags.
2. Modify the connect-src Directive: Whitelist the following domains:
    - *.metrics.convertexperiments.com
    - logs.convertexperiments.com
    - *.convertexperiments.com

   The modified directive might look like this:
   connect-src 'self' *.metrics.convertexperiments.com logs.convertexperiments.com *.convertexperiments.com;
3. Test Your Configuration: Ensure Convert Experiments scripts are loading correctly and there are no CSP violations using tools like Google Chrome's Developer Tools.
4. Deploy Changes: Once confirmed, deploy the changes to your live site.

By following these steps, you ensure your website remains secure while leveraging the powerful optimization capabilities of Convert Experiments.

For more detailed instructions, please refer to the full article here: https://support.convert.com/hc/en-us/articles/23979373845261-how-to-configure-your-website-s-csp-policy-for-convert-experiments.