Flicker Defender

The Flicker Defender gear can help prevent flicker caused by the rendering of personalized content (Templates/Campaigns) served by the Marketing Cloud Personalization platform.

Flicker Defender helps prevent flicker by doing the following.

Initially hides every content zone that has a selector by temporarily applying the visibility: hidden !important style to elements targeted by that selector
Each hidden content zone is then redisplayed depending on:
- If it is not targeted by a Template/Campaign for which the user has qualified
- Upon resolution of the Template/Campaign targeting it
- When the redisplayTimeout is hit
If a page is not matched or if the Sitemap errors, all hidden content zones are redisplayed following the pageMatchTimeout

While there is no limit for either of the timeout values, it is advised to stay under 10000 ms (10 seconds). Additionally, ensure that pageMatchTimeout is less than or equal to the redisplayTimeout, since redisplayTimeout ultimately decides when to reshow all hidden content.

Requirements

For Flicker Defender to work correctly, ensure you meet the following requirements.

A synchronously integrated Beacon in the head of the site is a strict requirement for Flicker Defender to work correctly.
A working sitemap is necessary for Flicker Defender to work correctly and efficiently. For information on writing a Sitemap, see the Web Integration documentation.
At least one Content Zone with a selector attribute. (Note that it is the developer’s responsibility to ensure that the CSS selector used is valid.)

Timeout Configuration

The following Flicker Defense timeout options are configurable from within Site-Wide JavaScript.

1setPageMatchTimeout(pageMatchTimeout: number = 1000): void

pageMatchTimeout controls the maximum length of time to wait for a page to be successfully matched before reshowing all hidden content

1// Example:
2SalesforceInteractions.mcis.FlickerDefender.setPageMatchTimeout(2500);

1// Example:
2Evergage.FlickerDefender.setPageMatchTimeout(2500);

redisplayTimeout controls the maximum length of time that content should ever be hidden.

1setRedisplayTimeout(redisplayTimeout: number = 2500): void

1// Example:
2SalesforceInteractions.mcis.FlickerDefender.setRedisplayTimeout(5000);

1// Example:
2Evergage.FlickerDefender.setRedisplayTimeout(5000);

Depending on the namespace you’re using, calls to setPageMatchTimeout and/or setRedisplayTimeout must be done before the call to either SalesforceInteractions.init() or Evergage.init() in Site-Wide JavaScript.

Note

1// Example:
2if (
3  typeof (SalesforceInteractions.mcis.FlickerDefender || {}).setPageMatchTimeout === "function"
4) {
5  SalesforceInteractions.mcis.FlickerDefender.setPageMatchTimeout(2500);
6}
7
8if (
9  typeof (SalesforceInteractions.mcis.FlickerDefender || {}).setRedisplayTimeout === "function"
10) {
11  SalesforceInteractions.mcis.FlickerDefender.setRedisplayTimeout(5000);
12}
13
14SalesforceInteractions.init().then(() => {
15  // sitemap
16});

1// Example:
2if (typeof (Evergage.FlickerDefender || {}).setPageMatchTimeout === "function") {
3  Evergage.FlickerDefender.setPageMatchTimeout(2500);
4}
5
6if (typeof (Evergage.FlickerDefender || {}).setRedisplayTimeout === "function") {
7  Evergage.FlickerDefender.setRedisplayTimeout(5000);
8}
9
10Evergage.init().then(() => {
11  // sitemap
12});

By design, Flicker Defender does not run in the Template or Campaign Editors.
Depending on the SDK namespace you’re using, ensure that you call SalesforceInteractions.init and SalesforceInteractions.initSitemap or Evergage.init and Evergage.initSitemap as soon as possible in Site-Wide JavaScript, since Flicker Defender relies on those calls to determine when to begin hiding content zones.
When injecting or forcing the Web SDK URL using the Salesforce Interactions SDK Launcher browser extension, you are simulating an asynchronous implementation of the product. Therefore, at least a small amount of Flicker always appears when injecting or forcing a Web SDK onto the page.

Important

Disabling Flicker Defender

To effectively disable the Flicker Defender gear, add the following to the top of your sitewide JavaScript.

1if (
2  typeof (SalesforceInteractions.mcis.FlickerDefender || {}).setPageMatchTimeout === "function"
3) {
4  SalesforceInteractions.mcis.FlickerDefender.setPageMatchTimeout(0);
5}
6
7if (
8  typeof (SalesforceInteractions.mcis.FlickerDefender || {}).setRedisplayTimeout === "function"
9) {
10  SalesforceInteractions.mcis.FlickerDefender.setRedisplayTimeout(0);
11}

1if (typeof (Evergage.FlickerDefender || {}).setPageMatchTimeout === "function") {
2  Evergage.FlickerDefender.setPageMatchTimeout(0);
3}
4
5if (typeof (Evergage.FlickerDefender || {}).setRedisplayTimeout === "function") {
6  Evergage.FlickerDefender.setRedisplayTimeout(0);
7}