Get up and running with Chartbeat—full implementation guides for all our products.

Implement Headline Testing

Initial Implementation

Depending on your site design and preferences, there are three implementation options that you may use. The recommended method is to add the asynchronous script tag to load the Chartbeat test runner, however we do have alternative implementation options for customers who are concerned about flicker control.

Because Headline Testing uses its own dedicated cookie, it is necessary to have first-party cookies enabled for your site. If you have set the noCookies configuration variable you will not be able to conduct headline tests.

The Headline Testing code only needs to be implemented on pages that will run headline tests (in most cases landing pages or section verticals). The actual articles that you’re testing the headlines for do not need any additional implementation.

When you implement Headline Testing, there will be a total of two Chartbeat scripts on the pages on which you create headline experiments. To ensure the scripts communicate well with one another, you must ensure that the following variables are defined before either script is added.

_sf_async_config.uid
_sf_async_config.domain

If you’re setting either the path or useCanonical variable, these must also be defined before the scripts are added to your document.

Note: If you’re setting canonical links, you must put the rel="canonical" link element before the Headline Testing script in your the <head>.

For more information on all the _sf_async_config variables, you can check out our Chartbeat Publishing Getting Started Guide

Asynchronous Implementation Without Flicker Control

Insert the following code snippet in the <head> of your document immediately following the standard Chartbeat snippet from our setup instructions.


<script async src="//static.chartbeat.com/js/chartbeat_mab.js"></script>

If visual elements like story headlines load very quickly on your homepage, this implementation may cause the end user to see a "flicker" in the test headlines. This would occur when a user sees a default headline suddenly change to a different test headline. You may want to test the Headline tool in a staging environment first.

Please make sure that you also complete the Initial Implementation instructions.

Asynchronous Implementation With Flicker Control

Alternatively we do have an asynchronous implementation option that still hides the document and prevents headline flicker:

Note: This script should be placed in the <head> of your document immediately following the standard Chartbeat snippet from our setup instructions.

<style id='chartbeat-flicker-control-style' type='text/css'>
    body {
    visibility: hidden !important;
    }
</style>
<script type='text/javascript'>
  (function() {
    window.setTimeout(function() {
        var hider = document.getElementById('chartbeat-flicker-control-style');
        if (hider) {
            hider.parentNode.removeChild(hider);
        }
    }, 1000);
  })();
</script>
<script async src = "//static.chartbeat.com/js/chartbeat_mab.js"></script>

With the addition of the client-set style tag and the async attribute on the chartbeat_mab.js script tag, the Headline Tester code can now load asynchronously and ensure that visitors only see test headlines with no flicker.

The Headline Tester will load and replace tested headlines then remove the chartbeat-flickercontrol-style style tag (unhiding the page).

In the very unlikely scenario that the headlines aren’t replaced within the time limit, the page will be unhidden once that limit is reached. The time limit set to 1000 ms by default (second argument of the window.setTimeout function) and is configurable.

Please make sure that you also complete the Initial Implementation instructions.

Synchronous Implementation

Include the following <script> tag in the <head> of your document immediately following the standard Chartbeat snippet from our setup instructions.

<script src="//static.chartbeat.com/js/chartbeat_mab.js"></script>

The synchronous implementation is the most straightforward way to ensure that document body is hidden and users don’t see a headline flicker.

To limit headline flicker, the Headline Tester code chartbeat_mab.js relies on the document body to be hidden while the headlines are being replaced. By default, the Headline Tester code will hide the body when chartbeat_mab.js loads. It then unhides the body after all headlines have been replaced, the Tester gives up on finding the headlines, or a one second timeout is reached.

Alternate Implementation

If your site structure requires the standard Chartbeat snippet to be inserted in the <body>, we have an alternative implementation option

When you implement Headline Testing, there will be a total of two Chartbeat scripts on the pages on which you create headline experiments. To ensure the scripts communicate well with one another, you must make the following three code changes in the original Chartbeat Publishing script.

  1. On the pages where you’re adding the Headline Testing snippet, you must remove the following variables from the standard Publishing code from the <body>.

    _sf_async_config.uid
    _sf_async_config.domain
    _sf_async_config.flickerControl
    _sf_async_config.useCanonical
    _sf_async_config.useCanonicalDomain
    _sf_async_config.path

    Defining these variables in both scripts may create unexpected results in headline tests as well as Dashboard performance.

  2. Note: If you’re setting canonical links, you must put the rel="canonical" link element before the Headline Testing script in your the <head>.

  3. Include the following code snippet before the closing <head> on the pages in your site where you want to conduct headline tests.

    <script type="text/javascript">
      var _sf_async_config = _sf_async_config || {};
      /** CONFIGURATION START **/
      _sf_async_config.uid = #####; /** CHANGE TO YOUR CHARTBEAT ACCOUNT ID **/
      _sf_async_config.domain = 'yoursite.com'; /** CHANGE THIS **/
      _sf_async_config.flickerControl = false;
      _sf_async_config.useCanonical = true;
      _sf_async_config.useCanonicalDomain = true;
      /** CONFIGURATION END **/
    </script>
    <script async src="//static.chartbeat.com/js/chartbeat_mab.js"></script>

Checking your work

Your Chartbeat code within the <head> should look like:

<script type="text/javascript">
  var _sf_async_config = _sf_async_config || {};
  /** CONFIGURATION START **/
  _sf_async_config.uid = #####; /** CHANGE TO YOUR CHARTBEAT ACCOUNT ID **/
  _sf_async_config.domain = 'yoursite.com'; /** CHANGE THIS **/
  _sf_async_config.flickerControl = false;
  _sf_async_config.useCanonical = true;
  _sf_async_config.useCanonicalDomain = true;
  /** CONFIGURATION END **/
</script>
<script async src="//static.chartbeat.com/js/chartbeat_mab.js"></script>

Your Chartbeat code within the <body> should look like:

<script type='text/javascript'>
  (function() {
      /** CONFIGURATION START **/
      var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});

      _sf_async_config.sections = ''; //CHANGE THIS TO YOUR SECTION NAME(s)
      _sf_async_config.authors = ''; //CHANGE THIS TO YOUR AUTHOR NAME(s)
      /** CONFIGURATION END **/
      function loadChartbeat() {
          var e = document.createElement('script');
          var n = document.getElementsByTagName('script')[0];
          e.type = 'text/javascript';
          e.async = true;
          e.src = '//static.chartbeat.com/js/chartbeat.js';
          n.parentNode.insertBefore(e, n);
      }
      loadChartbeat();
   })();
</script>

If you have any additional questions, send us an email at support@chartbeat.com

Staging, Subdomains, and Permissions

Staging and QA

If you’re concerned about page flicker, load time, workflow, or team resources, you may want to test the Headline tool in a staging environment first.

The primary difficulty to staging is simulating traffic to actually test the tool. One way to simulate traffic is to create a test then open an incognito window and visit the page with the test on it. You will see the trial counter increment, then if you click on the headline you’ll see the CTR bar shift, and play percentage go up slightly.

Tracking Subdomains

When tracking click-through-rates across multiple subdomains, you’ll need to set the _sf_async_config.topStorageDomain variable to the top-level domain that you want to store data for. .

_sf_async_config.topStorageDomain = 'top_level_domain';

For example if you’re performing experiments on “news.site.com” and one of the headlines links to a story on the domain “site.com”, you would set the topStorageDomain parameter to “site.com”.

The Headline Tester code uses the following prioritization for storing click-through data.

  1. The value of _sf_async_config.topStorageDomain (if it is set)

  2. _sf_async_config.domain if the value is a subdomain or matches the actual domain.

  3. The default as the actual domain of the current page.

User Permissions

As Chartbeat login seats with permissions to the Headline Testing tool have the ability to affect the actual page that is being served to your audience, we are very strict with granting user permissions. At this time all permissions must be manually added to our back-end, so all account users who need headline testing access must contact their Chartbeat Account Manager.

Here are some ways to get in touch.