Custom Page HIde / Whitelist

We adopt one of two core practices for handling page hide – the process by which we mask the page to ensure there is no content flickering.
See also: Loading Behaviour

The first is in the tag config, as a blanket page-hide for all pages within the account. There is an option for overrides, through which you are able to alter rules based on a JS condition, such as on particular pages only.

The second is to use a straightforward block of JSON, which an accompanying script will pick up and parse. This code should sit in Pre-Init, which is the only script block guaranteed to execute in the initial blocking-parse of the tag (which should be in the Head, and not async).

You’ll notice we use opacity: 0.000001 – this is the safest method we’ve found. All scripts will recognise the element as still being visible and so won’t fail, but it’ll retain it’s dimensions etc.

Sample code:

WT.optimizeModule.prototype.whitelist = [
    {
        URLs: [
            /^url_would_go_here/i // replace the line completely 
        ],
        css: '.reference-to-element-here { opacity: 0.00001 !important; }'
    }
];

Example:

Whitelisting the navigation across the Webtrends Optimize site:

WT.optimizeModule.prototype.whitelist = [
    {
        URLs: [
            /^https:\/\/www.webtrends-optimize.com/i
        ],
        css: 'nav { opacity: 0.00001 !important; }'
    }
];

Multiple pages

Because the object is an array, we could easily add other entries in. Let’s say we have another test across our blogs section, modifying the layout of the entire page:

WT.optimizeModule.prototype.whitelist = [
    { // Test 1 - Homepage Nav
        URLs: [
            /^https:\/\/www.webtrends-optimize.com/i
        ],
        css: 'nav { opacity: 0.00001 !important; }'
    },
    { // Test 2 - Blogs Layout
        URLs: [
            /^https:\/\/www.webtrends-optimize.com\/blog/i
        ],
        css: 'body { opacity: 0.00001 !important; }'
    }
];

Staging-only whitelist

This snippet can be added after the above, and gives you an additional option for staging-only page hide (to make sure you’ve got it right):

if(window.location.href.match(/_wt.mode=staging/i)){
    var stagingWhitelist = [
        {
            URLs: [
                /^url_would_go_here/i // replace the line completely 
            ],
            css: '.reference-to-element-here { opacity: 0.00001 !important; }'
        }
    ];
    
    for(var i=0; i‹stagingWhitelist.length; i++){
        WT.optimizeModule.prototype.whitelist.push( stagingWhitelist[i] );
    }
}

This code very simply gives you space to add staging events, and pushes them into the core whitelist array if the staging mode query string is in the URL. You could modify the IF statement to include other rules if you’d prefer.

Accompanying code (required):

After all of the above, you should ensure you add this code. It’s minified, and this article won’t yet detail exactly how it functions (talk to the WT Support team if you’d like more details).

WT.optimizeModule.prototype.checkWhitelist_CUSTOM=function(){function e(e){if(!e)return!1;0==e instanceof Array&&(e=[e]);for(var t,n=0;t=e[n];n++)if(window.location.href.match(t))return!0;return!1}var o=function(e){var n=e||"";return{add:function(e){e.length&&(n+=e+"\n")},output:function(e){var t;if(n.length){if(e&&(t=document.getElementById(e)),t)return!1;(t=document.createElement("style")).setAttribute("type","text/css"),e&&(t.id=e),t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n)),document.getElementsByTagName("head")[0].appendChild(t),n=""}},remove:function(e,t){if(!e)return!1;var n=(t=t||window.document).getElementById(e);n&&"style"==n.nodeName.toLowerCase()&&n.parentNode.removeChild(n)}}},t=WT.optimizeModule.prototype.whitelist||[];try{for(var n="",r=0,a=t.length;r‹a;r++){var i,c=t[r],d=c,s=!1;c.URLs&&c.css&&(d=c.URLs,i=c.css||""),!0===(s=e(d))&&i&&(n+=i)}return""!=n&&function(e){e.match(/[\{\}]+/);var t=new o(e),n="wto-css-capi-"+Math.floor(1e3*Math.random());WT.addEventHandler("hide_show",function(e){e.params&&(!1===e.params.display&&t.output(n),!0===e.params.display&&t.remove(n))}),setTimeout(function(){t.remove(n)},4e3)}(n),s}catch(e){}};
WT.optimizeModule.prototype.checkWhitelist_CUSTOM();

Ongoing maintenance

Whenever you build a project on a new page or new component of a page you’ve experimented on previously, simply add the entry into the above list and hit save. It’ll propagate to our CDN and you’ll be good to go.
Please note that our tag follows best practices, and so is cached for 24hrs. Please do your best to forecast whitelisting needs for this reason.