Implementation Principles of Page Editing Experience
Implementation Principles of Page Editing Experience: Impact of Changes and How to Address Them
Ptengine's page editing feature enables intuitive and flexible operations, allowing you to adjust site content and layout in real-time. By leveraging this feature, you can expect improvements in user experience and increased conversion rates.
However, when the original page structure is changed, the edited experience may become invalid. Below, we provide a detailed explanation of the implementation principles of page editing experience, the impact of changes, and how to address expiration.
Implementation Principles of Page Editing Experience
How Page Editing Works
Page editing uses selectors to identify elements to be edited, and saves the changes made. When a page is rendered, Ptengine's server identifies elements based on saved selectors, thereby realizing page editing.
What is a Selector?
A selector is an identifier used to identify HTML elements. Like a map's directions, it allows you to find elements at specific positions on a page based on that information. It typically consists of an element's tag name, class name, ID, and other properties.
As shown in the example in the figure below:
The selector corresponding to the text: Realize so easily is: body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1).
An Example of Page Editing Experience
For example, suppose you want to replace the text "Realize so easily" in the first view of the page with "Realize swiftly and intelligently".
When you update the text and click "Save," the experience saves the selector and the changes made. The data structure will be approximately as follows:
Finally, when the client page is rendered, the experience finds the element following the selector saved in the experience, and replaces the content of that element.
Impact of Original Page Changes on Experience
On the other hand, if the client's original page is changed, the accuracy of the selector may be affected.
If the page change only involves replacement of text or images, the selector is typically unaffected, and the page editing experience remains valid.
However, if changes are made to the page structure (such as deletion of elements, changes to class names, or adjustments to the overall structure), the selector may no longer accurately identify the previously specified element, potentially resulting in the page editing experience becoming invalid.
Based on the example experience mentioned above, we explain in more detail:
Example 1: When the Original Page Adjusts Text
Assume the original page simply adjusts text only. In that case, it would be as follows:
Selector: body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)
Selector: body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)
In this case, since there are no changes to the selector, the experience is not affected and will function normally.
Example 2: When the Original Page Adjusts Page Structure
Assume the original page adjusts the banner's page structure, removes the subtitle, and needs to update styles and text.
Selector: body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)
Selector: body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud **> div.pt-head > h1**
In this case, as shown in the figure above, due to page structure changes caused by element deletion or replacement, the selector does not function correctly, ultimately resulting in the experience changes becoming invalid.
Example 3: When Element IDs on the Original Page Change Dynamically ❌
Assume the id attribute of elements on the original page is generated dynamically, and the element id changes upon page update or refresh.
Selector: body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)
Selector: body > **#__nuxt-xxad-da** > **#__layout-x-xx** > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)
As shown in the figure above, due to changes in page IDs, the selector does not function correctly, ultimately resulting in the experience changes becoming invalid.
How to Address Experience Expiration
Before making changes to the page structure, you need to be mindful of parts where page editing has already been performed, and avoid making changes to elements for which selectors have already been set. After making changes, you can confirm the impact on inline editing using the following methods:
Step 1: Preview the Experience
If the page editing experience is found to be expired or abnormal, first preview the experience to confirm whether the expiration is due to changes in page structure.
Preview is normal: This indicates that there are no issues with the page structure. Users should pay attention to the application scope of the page experience and the trigger conditions of the experience.
Preview is abnormal: Proceed to the next step for confirmation.
Step 2: Re-edit the Experience
Enter the experience editing screen and check whether the changed items display [Element not found]. If this display appears, it means that the changed item has expired.
If the expiration display appears: Delete the changed item and re-identify the correct element to perform page editing.
Step 3: Contact Technical Support
If the expiration issue is not resolved through the above steps, or if further assistance is needed, please contact the technical support team.
In Closing
It is very important for everyone to understand the principles of page editing and selectors. By verifying whether selectors are accurate after page changes, you can prevent page editing from expiring, and improve the accuracy and reliability of experience data.
最終更新