# Flicker Phenomenon and How to Address It

## Flicker Phenomenon and How to Address It

## What is Flicker Phenomenon

Flicker phenomenon occurs when a page is loading and briefly displays the content before changes, then displays the content after changes. Flicker tends to occur when conducting A/B tests or redirect tests.

## How to Reduce Flicker Phenomenon

#### Step 1: Install Ptengine Basic Tag

Ptengine's basic tag contains the logic for the anti-flicker feature. Therefore, we recommend placing it in the page's `<head>` to ensure it functions at an early timing.

#### Step 2: Configure in Ptengine Admin Panel

**1. What is the Anti-Flicker Feature**

It is a feature that mitigates flicker phenomenon.

In the Ptengine experience's settings screen, you can set the anti-flicker feature to "on/off".

This feature is Off by default, but when turned On, it hides the flicker phenomenon with a white-out.

**2. When Should You Enable the Anti-Flicker Feature**

\[Quick Reference] Summary of Recommended Settings

> **WARNING** **Note**: When multiple experiences are published on the same page, the flicker prevention effect works as long as one experience has the anti-flicker setting enabled.

### When You Cannot Install Ptengine Tag Directly in Head

#### 1. Phenomenon and Cause

When the tag is installed via GTM (Google Tag Manager) or the basic tag is placed inside the HTML `<body>`, the anti-flicker feature may not work properly.

This is because the execution of the Ptengine tag is delayed due to "asynchronous loading," which prioritizes page display speed.

As a result, unnatural display occurs (original page → white screen → edited page), which may harm user experience.

#### 2. Solution

To solve this problem, keep the **existing basic tag as is** and add a **dedicated anti-flicker tag** following the steps below.

**① Install the dedicated tag in `<head>`**

Place the following dedicated anti-flicker tag directly inside the `<head>` of your website's HTML source code.

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

> **WARNING** \*Note: xxxxxxxx is the project ID and matches the ID of the basic tag.

**② Enable the feature on the Ptengine side**

Set the anti-flicker feature to "On" in the Ptengine admin panel.

> **WARNING** **Notes**
>
> The anti-flicker tag timeout is **4 seconds**.
>
> If the page load speed itself is extremely slow, flicker may still occur even after the above configuration.

Therefore, we recommend installing the Ptengine tag directly in the head whenever possible.

## Summary

Flicker prevention settings vary depending on how the tag is installed.

**Recommended: When installing directly inside `<head>`** Install Ptengine's **basic tag** and turn on the anti-flicker feature **ON**.

**When installing via GTM, etc.: Install the dedicated anti-flicker tag** additionally in `<head>` and turn on the anti-flicker feature **ON**.

See the table below for details on each setting and its effects.

\*When installing the basic tag directly, no separate anti-flicker tag is needed.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helps.ptengine.com/en/faq/experience-edit/anti-flicker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
