Set a test cookie to preview a live campaign or experiment

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Web Personalization
  • Optimizely Performance Edge

When you test, it can be useful to start an experiment or campaign live on your site but only let internal employees see it.

Setting a test cookie lets you show a running campaign or experiment to a set of internal stakeholders. You create a bookmarklet in the browser that sets the cookie, then use audience conditions to target the cookie. Visitors who have the test cookie can go across multiple pages and fire events in the live experiment or campaign.

In Optimizely Web Experimentation, the test cookie is a key tool in the Pre-Launch Checklist for testing.

In Optimizely Web Personalization, the test cookie lets you share running campaigns. Use the Preview tool to check that your campaign looks and works how you would like before publishing. Then, use the test cookie to share the live campaign with internal holders for testing.

You can also share the campaign with internal holders for QA by using the Share Link and Force Query Parameters

You will set the test cookie in every browser used to QA with this method.

To set a test cookie, add a bookmark to the browser. Then, replace the URL for this bookmark with the block of JavaScript code below. 

  1. Open a Chrome browser and create a bookmark on any page.
  2. Click the bookmark to change the name to Set a test cookie. Select Done to confirm.
    set-test-cookie.png
  3. In the Chrome toolbar, select Bookmarks Bookmark Manager. Click to edit the bookmark.

    Swap the URL with the following JavaScript function:

    javascript: 
      (function () 
        { var hostname = window.location.hostname; 
          var parts = hostname.split("."); 
          var publicSuffix = hostname; 
          var last = parts[parts.length - 1]; 
          var expireDate = new Date(); 
              expireDate.setDate(expireDate.getDate() + 7); 
          var TOP_LEVEL_DOMAINS = [ "com", "local", "net", "org", 
                                    "top", "xxx", "edu", "es", 
                                    "gov", "biz", "info", "fr",
                                    "gr", "nl", "ca", "de", "kr",
                                    "it", "in", "me", "ly", "tv",
                                    "mx", "cn", "jp", "il", "in",
                                    "iq", "ga", "tk", "us",];
          var SPECIAL_DOMAINS = ["bb", "ck", "cr", "in", "id", 
                                 "jp", "uk", "au", "nz", "za",
                                 "kr", "th", "il", "ve"];
    
          if (parts.length > 2 && SPECIAL_DOMAINS.indexOf(last) != -1)
            { publicSuffix = parts[parts.length - 3] 
                             + "." 
                             + parts[parts.length - 2] 
                             + "." 
                             + last; }
          else if (parts.length > 1 && TOP_LEVEL_DOMAINS.indexOf(last) != -1) 
            { publicSuffix = parts[parts.length - 2] 
                             + "." 
                             + last; }; 
          document.cookie = "optly_" 
                            + publicSuffix.split(".")[0] 
                            + "_test=true; domain=." 
                            + publicSuffix 
                            + "; path=/; expires=" 
                            + expireDate.toGMTString() 
                            + ";";
        })();

    set-test-cookie-2.png

  4. Go to the page of your site where you would like to set the test cookie.

  5. Select the bookmark to create a test cookie.

    You now have a cookie set on whichever domain you are browsing. The cookie will look something like this: optly_YOURDOMAINNAME_test=true

    set-test-cookie-3.png

When you reload the page, you can enter an experiment or campaigns that target that cookie.

To create a test cookie in Internet Explorer, you can apply the following JavaScript code to your console
javascript: (function () {
    var a, domain;
    a = document.createElement("a");
    a.href = document.URL;
    domain = a.hostname;
    domain = domain.replace(/^www\./, "");
    document.cookie = "optly_YOURDOMAINNAME_test=true;Domain=" + domain + ";Path=/";
})();

Target the test cookie

After you set your test cookie, use an audience condition to target it. Only visitors with the test cookie can enter the experiment or campaign.

  1. Go to the Experiments dashboard and choose the experiment or campaign.
  2. In the Manage Experiments sidebar, click Audiences.
  3. Click Create New Audience.
  4. Select Standard > Cookie and drag it into the conditions.
  5. Enter a name for the audience.
  6. Enter the name of the test cookie, optly_YOURDOMAINNAME_testin the text box and set to has any value.

    set-test-cookie-4.png

  7. Click Save Audience.

Target a query parameter

You can also target using a query parameter instead. This also works well when testing your experiment on a mobile device.

When you view your page live, append the query parameter that you selected. For instance, on Google's homepage, this may look like https://www.google.com?optly_google_test if you use the query parameter shown in the following image:

query-param-audience.png

If you use a query parameter instead of a cookie, you will have to re-add the query parameter to the URL when you go to another page.

When you are done, click Apply and then save the experiment.

Run the experiment or campaign

After you set the test cookie, start the experiment or campaign to view it live.

To see the experiment or campaign, you still need to meet all of the targeting conditions, but when you are bucketed into a variation or experience, you can go to the site and stay in that variation. You can also test whether your goals are firing correctly.

Remove the test cookie

To make the experiment live for other visitors, return to targeting. Remove the cookie restriction by clicking Cancel. Click Apply to save the change to the experiment.

Additional resources