Flashes of unstyled content (FOUC) can occur in Personalization when a slot is created around content that is initially rendered server-side before it can be personalized through JavaScript. This slight delay can cause unstyled content to appear momentarily on-screen, immediately followed by the personalized content rendering and displaying in its place.
Flashes of unstyled content cannot be entirely prevented, but they can be mitigated with one of the following methods:
You can alter the initial display of the block-content__hero slot by
settings its opacity to 0 as described in the following example:
// CSS, needs to be replaced with the appropriate selectors
// Source: https://docs.acquia.com/personalization/personalize/campaigns/building-experiences/unstyled
.block-content__hero {
opacity: 0;
-webkit-transition: opacity 300ms;
}
To alter the initial display of a slot with JavaScript, create a script that
listens for the acquiaLiftContentAvailable or acquiaLiftStageCollection
event and then alters the slot’s opacity back to 1, as described in the
following example code:
// JavaScript for altering the opacity of a slot
// Source: https://docs.acquia.com/personalization/personalize/campaigns/building-experiences/unstyled
(function() {
window.addEventListener('acquiaLiftContentAvailable', function(e) {
console.log('acquiaLiftContentAvailable event occurred. This indicates a rule is published and is the last event in the personalization rendering.');
console.log(e);
jQuery('*[data-lift-slot="' + e.detail.decision_slot_id + '"]').css('opacity','1');
});
window.addEventListener('acquiaLiftStageCollection', function(e) {
console.log('acquiaLiftStageCollection event occurred. This is the end
of the Personalization lifecycle and should occur whether rules are
published or not.');
console.log(e);
jQuery('*[data-lift-slot]').css('opacity','1');
});
})();
53 State Street, 10th Floor
Boston, MA 02109
United States
Phone: 888-922-7842