Synchronous-Asynchronous Tag System for Flicker Reduction
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing methods for managing digital marketing tags on content sites often result in performance issues, such as slow loading times and user-perceived flicker, especially when updating page elements, which can be frustrating for users and costly for IT teams.
Innovation Solution
Implementing a combined synchronous and asynchronous tag-loading system, where a synchronous tag hides the old page element and an asynchronous tag renders the new element visible, preventing user-perceived flicker without requiring developer intervention.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Speed
If asynchronous tag loading is used to maintain fast page loading performance, then page loading speed is improved, but user-perceived flicker occurs when page elements are updated
Solution Approach 1:
The synchronous script executes first to hide the old page element before the asynchronous script loads and displays the new element. This preliminary action of hiding the old element prevents the flicker that would otherwise occur when the new element becomes visible, while still allowing the asynchronous loading mechanism to maintain fast page loading performance.
Solution Approach 2:
The synchronous script performs a counter-action by hiding the old page element in advance, which offsets and prevents the harmful flicker effect that would result from the subsequent asynchronous element update. This preliminary anti-action eliminates the visual disturbance while preserving the performance benefits of asynchronous loading.
2Object-affected harmful factors
If synchronous tag loading is used to prevent flicker by hiding old page elements, then flicker is eliminated, but page loading time increases
Solution Approach 1:
The tag loading process is segmented into two distinct parts: a synchronous portion that hides the old element (preventing flicker) and an asynchronous portion that loads the new element (maintaining fast loading). This segmentation allows each part to operate with its own timing characteristics, eliminating the need to choose between flicker prevention and fast loading.
Solution Approach 2:
The system dynamically transitions from synchronous to asynchronous execution. The synchronous script executes immediately to hide the old element, then the system switches to asynchronous mode for loading the new element. This dynamic approach optimizes both flicker prevention and loading speed by using the appropriate execution mode at the right moment.
3Manufacturing precision
If manual tag insertion by developers is used to update page elements, then precise control over tag deployment is achieved, but IT team burden and operational complexity increase
Solution Approach 1:
The system enables self-service tag deployment where marketers and content managers can update page elements through a user interface without requiring developer intervention. The combination of synchronous and asynchronous scripts automatically handles the element updates, eliminating the need for manual code insertion while maintaining precise control over the deployment process.
Solution Approach 2:
The tag management system provides universal functionality that combines the precision of manual deployment with the ease of automated updates. A single system handles both the synchronous hiding of old elements and asynchronous loading of new elements, replacing multiple manual operations with one unified automated process that serves multiple functions.
Data Source
AI summary
A tag management system can implement a combined synchronous and asynchronous tag-loading scheme. In an embodiment of this scheme, a synchronous tag may be included at the top of or near the top of a content page. This synchronous tag can hide one or more page elements that are to be modified by a subsequent asynchronous personalization tag. Subsequently, the asynchronous personalization tag can update the page element and then cause the page element to be displayed. As a result, flicker between the old and new page elements can be reduced or avoided.