How to install Headline Testing

This guide outlines the technical requirements and best practices for installing and customizing Parse.ly’s Headline Testing feature. Proper installation ensures headline variants load efficiently and tests perform reliably across all supported browsers and platforms.

One-line snippet script installation

Place this script in the <head> before any other scripts but after all <meta /> tags:

<script src="https://experiments.parsely.com/vip-experiments.js?apiKey=XXXXX" data-enable-live-updates="true"></script>

Make sure to add your Site ID as the apiKey to the script’s source. This should be a domain-like value, such as example.com, and not your API Secret! Please ensure to test the script on your staging website first to ensure everything loads correctly and there are no errors in your browser console.

Note that in the script above, we’re recommending that you enable the “live updates” configuration option by default. You can remove this option if you so choose.

The script is approximately 9kB (gzipped) and is delivered via our global edge network. This implementation loads the script synchronously, ensuring experiments run as often as possible.

To load the script asynchronously, add the async or defer attributes. However, note that experiments may run less frequently if the script executes after the first contentful paint.

Advanced installation

In the Advanced Installation method, you will directly run a block of inline JavaScript code/snippet, loaded in your webpage’s <head> tag. This method offers more control over how the headline testing suite behaves and provides more configuration options.

<script>
!function(){"use strict";var e=window.VIP_EXP=window.VIP_EXP||{config:{}};e.loadVIPExp=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t&&(e.config=n,e.config.apikey=t,function(e){if(!e)return;var t="https://experiments.parsely.com/vip-experiments.js"+"?apiKey=".concat(e),n=document.createElement("script");n.src=t,n.type="text/javascript",n.fetchPriority="high";var i=document.getElementsByTagName("script")[0];i&&i.parentNode&&i.parentNode.insertBefore(n,i)}(t),n.enableFlickerControl&&function(){var t,n;if(null!==(t=performance)&&void 0!==t&&null!==(n=t.getEntriesByName)&&void 0!==n&&null!==(n=n.call(t,"first-contentful-paint"))&&void 0!==n&&n[0])return;var i="vipexp-fooc-prevention";e.config.disableFlickerControl=function(){var e=document.getElementById(i);null!=e&&e.parentNode&&e.parentNode.removeChild(e)};var o=document.createElement("style");o.setAttribute("type","text/css"),o.appendChild(document.createTextNode("body { visibility: hidden; }")),o.id=i,document.head.appendChild(o),window.setTimeout(e.config.disableFlickerControl,500)}())},

// your Parse.ly Site ID here
e.loadVIPExp("XXXXXXXX",{
	enableFlickerControl: true
})
}();
</script>

// your Parse.ly Site ID here
e.loadVIPExp("XXXXXXXX",{
	enableFlickerControl: true
})
}();
</script>

Installation through tag manager

We do not recommend installing the script using a tag manager. This method may introduce a delay in script execution which can lead to experiments running less often.

Configuration options

Enabling Flicker Control

If the script loads asynchronously, you may experience flickering as headlines are replaced. To minimize this, use the advanced installation method and enable flicker control, which hides the page body for up to 500ms.

Note that this option is only available via the Advanced Installation technique:

// Rest of advanced script

e.loadVIPExp("XXXXXXXX",{
	enableFlickerControl: true
})

Live Updates

By default, headlines are swapped during the initial page load. If your website loads articles dynamically and you want headlines to be updated for newly added anchors, you can enable live updates.

When live updates are enabled, the system watches the page after the initial swaps and automatically updates headlines for eligible anchors as new links appear. You can also configure how long this lasts – by default, we watch the page for 30 seconds.

Example of how to enable live updates for 5 seconds using the One-Line Snippet:

<script src="https://experiments.parsely.com/vip-experiments.js?apiKey=XXXXX" data-enable-live-updates="true" data-live-update-timeout="5000"><script>

Example for the advanced installation option:

// Rest of advanced script

e.loadVIPExp("XXXXXXXX",{
	enableLiveUpdates: true,
	liveUpdateTimeout: 5000
})

Allowing swapping after content load

The allowAfterContentLoad configuration option lets our algorithm bypass the First Contentful Paint (FCP) checks and swap out headlines even after the main content has already loaded. This is particularly useful if you’re loading the script with defer and are okay with a potential flicker.

Example for the advanced integration option:

<script src="https://experiments.parsely.com/vip-experiments.js?apiKey=XXXXX" data-enable-live-updates="true" data-live-update-timeout="5000" data-allow-after-content-load="true"><script>

Example for the advanced installation option:

// Rest of advanced script

e.loadVIPExp("XXXXXXXX",{
	allowAfterContentLoad: true
})

Content Security Policy (CSP)

If you use script-src, content-src, or img-src directives, update them to allow our domains:

script-src 'self' https://experiments.parsely.com;
img-src 'self' https://tr-experiments.parsely.com;
content-src 'self' https://tr-experiments.parsely.com;

For the advanced installation snippet, ensure your CSP allows script execution. You can achieve this using a nonce, hash, or the unsafe-inline directive (though the latter is generally not recommended).

script-src 'self' 'unsafe-inline' https://experiments.parsely.com;

For more details, see MDN: Content Security Policy.

Disable Headline Testing

To disable Headline Testing, you can remove the JS snippet from your website. Once the script is no longer loaded, no tests will be performed.

The same applies if you would like to disable headline tests on specific pages. Tests will be performed and data gathered only where the script is loaded.

Last updated: November 12, 2025