10312F17-05C1-4C71-8ED4-CD88F0AD4C4E Created with sketchtool.

Anti-Flicker settings for page editing and A/B testing

Topics

In the page editing function, instead of directly editing the files on the site's server, the page content is edited using JavaScript code.
This is common in website editing tools, not just in Ptengine Experience. However, this specification may cause the page to take longer to load after editing, and there may be a momentary "flicker phenomenon" where the page content is momentarily visible to visitors.
In this article, we will introduce features to mitigate the flicker phenomenon. In particular, if you are editing the page at the top (first view) of the page, you need to enable anti-flicker, so please be sure to check before using the page editing feature.

What is the Anti-Flicker feature #

The Anti-Flicker feature is designed to mitigate the "flicker effect" where the loading of a page takes time or when the moment of replacing page content is briefly visible to visitors. If the edited content is located in the first view (top) of the page and the Anti-Flicker feature is not enabled, it may hinder the user experience.

With the Anti-Flicker feature enabled, a white screen is displayed during the moment of transitioning from the original page to the edited page, ensuring that visitors do not see the flicker effect and mitigating the impact caused by it.

The Anti-Flicker feature can be enabled or disabled from the experience settings screen (default setting is "enabled").


Note: If multiple experiences are published on the same page, as long as one experience has the Anti-Flicker setting enabled, it will prevent flickering on the corresponding page.

Using Google Tag Manager or not setting the ptengine tag in the <head> #

Even if the Anti-Flicker setting is enabled, if the basic Ptengine tag is installed through GTM or other tag management tools, or if the basic tag is set in the instead of the of the HTML, the Anti-Flicker feature will not function correctly.

The reason for this is that common tag management tools are designed to load tags asynchronously to speed up page loading. When the Ptengine tag is loaded asynchronously, it may cause a delay in the operation of the Anti-Flicker feature, resulting in the visitor seeing the original page first before the white screen Anti-Flicker effect occurs. In this case, the user experience would be worse, as it would be: original page > white screen > edited page, rather than experiencing flickering.

Solution to solve this problem

To solve this issue, you can set the following Anti-Flicker code in the <head> of the HTML while keeping the existing basic tag configuration.

<script src="https://js.ptengine.jp/xxxxxxxx_antiFlicker.js" ></script>

Note: xxxxxxxx represents the project ID, which should match the ID of the basic tag.

*You can also find your project ID in the URL of your Ptengine page

How to install the basic tag #

Please refer to this article for more information.

Was this article helpful?

  • Yes, great!
  • Not really

Thanks for your feedback.

  Sorry about that. Do you mind sharing how we can improve?

    Write your feedback here...