prehidingStyle
The prehidingStyle property allows you to define a CSS selector to hide personalized content until it loads. This property is valuable in synchronous Web SDK implementations to avoid flickering. Adobe recommends using the prehiding snippet for asynchronous Web SDK implementations.
The CSS selectors that you define in this property begin hiding content when you run the first sendEvent command on a page. Content is unhidden when a response from Adobe is received, which typically includes personalized content. Content is also unhidden if the sendEvent command fails or times out.
If you include both prehidingStyle and the prehiding snippet in your implementation, the prehiding snippet takes priority over this configuration property.
Prehiding style using the Web SDK tag extension
Select the Provide prehiding style button when configuring the tag extension.
- Log in to experience.adobe.com using your Adobe ID credentials.
- Navigate to Data Collection > Tags.
- Select the desired tag property.
- Navigate to Extensions, then click Configure on the Adobe Experience Platform Web SDK card.
- Scroll down to the Personalization section, then select the button Provide prehiding style.
- This button opens a modal window with a CSS editor. Insert the desired CSS selector and declaration block, then click Save to close the modal window.
- Click Save under extension settings, then publish your changes.
Prehiding style using the Web SDK JavaScript library
Set the prehidingStyle string when running the configure command. If you omit this property when configuring the Web SDK, nothing is hidden when running the first sendEvent command on a page. Set this value to the desired CSS selector and declaration block for synchronously loaded libraries.
alloy("configure", {
datastreamId: "ebebf826-a01f-4458-8cec-ef61de241c93",
orgId: "ADB3LETTERSANDNUMBERS@AdobeOrg",
prehidingStyle: "#container { opacity: 0 !important }"
});