I'm working on a pop-up window on Taobao, a review and outlook in 2022

The author of this article introduces to you the contribution he has made to the product since he joined the PopLayer project for more than a year. It not only includes the consideration of product functions, ease of use and future development from the perspective of the product, but also includes From a technical perspective, thinking about technical architecture, programming paradigms and functional implementation.

foreword

When I first joined the big Taobao technology user growth team, the pop-up window was an effective means to increase the out-of-site contact. I needed a systematic solution to improve the development efficiency of the pop-up window, expand the usage scenarios of the pop-up window, and By combining the ability to call the terminal, expand the user population and contribute to the AAC increment for the broader market. After repeated internal discussions, we preliminarily determined the technical structure of the "pop-up window description data" generated by the "pop-up window editor", with H5, and the "data rendering engine" on the applet side to render the pop-up window in real time on the terminal. The product name is tentative For the "global POP investment platform".

After hearing about the idea, members of the PopLayer team, a veteran pop-up platform on Taobao, took the initiative to cooperate, hoping to integrate the pop-up and casting capabilities inside and outside of Taobao on the PopLayer platform to provide users with a one-stop experience for both internal and external pop-ups. After repeated communication, we finally assessed the feasibility of this plan. I've since been part of the PopLayer team and worked as a product design (post) and developer to drive the upgrade of the PopLayer platform from version 3.0 to version 4.0.

In the following, I will introduce in detail the problems I faced in the process of this platform upgrade, the corresponding thinking and the final solution.

the problem we are facing

The value of work is to solve problems. After joining the PopLayer team, the first thing to do is to understand the situation and "clear the current problem". Readers who understand the project background already know that we already have a clear goal to be accomplished "to reuse the ability to build pop-up windows to internal and external scenarios". However, since we adopt a strategy based on the transformation and upgrading of existing products, it is inevitable that we need to solve some historical burdens and go into battle lightly. At the same time, cross-team cooperation also enables team members to re-examine the status quo of the platform from different perspectives, thereby injecting more expectations and ideas for the platform upgrade.

Through active communication with team members, we finally summarized the following 4 urgent problems in this upgrade iteration:

1. The problem that the platform is not easy to expand: The PopLayer platform, as a veteran pop-up platform on Taobao, has accumulated rich experience in the field of pop-up windows, but the platform itself has undergone several team rotations, and its code has become increasingly difficult to expand and maintain. On the other hand, we can noticeably observe that in recent years, the visual and interactive experience of pop-up windows in the industry has been continuously improved, and the business side has also put forward more requirements for the functions of pop-up windows. Therefore, the PopLayer platform has high scalability. To meet the needs of industry development is the primary problem that the platform needs to solve;
2. The problem of poor platform use experience: poor platform use experience will lead to an increase in the cost of answering questions on the platform, and it is more likely that some users will be discouraged from the platform due to higher use costs, which will cause losses to both the platform and users: Fewer users It means less demand input, which will lead to bottlenecks in the development of the platform itself, and users will waste unnecessary manpower because they choose manual development;
3. The problem of lack of generalization of platform data: The PopLayer platform, as a core Taobao product that has been running stably online for many years and supports hundreds of millions of business volumes, has accumulated a large amount of pop-up window domain related data over the years. How to use this data effectively? Therefore, guiding a pop-up window launch event to obtain better business results is also an issue that the platform has to consider in order to adapt to the trend of the era of refined operations;
4. The problem that the existing architecture of the platform is not fully utilized: When we further understand the technical architecture of PopLayer products, we found that the technical architecture of PopLayer is different from the previously determined "decoupling pop-up window production through pop-up window description data (a piece of DSL data in JSON format)". The idea of and rendering coincides with. The benefits of this architecture are three-fold:
   a. By separating the production and rendering of the pop-up window, the production of the pop-up window can be transferred to the demander who creates the pop-up window activity in a no-code or low-code way, thereby greatly reducing the development cost of the pop-up window while ensuring the pop-up window. Iterative efficiency meets the needs of business flexibility;
   b. The "pop-up window description data" is used as the annotation output of the pop-up window production, and the standard input of the pop-up window rendering, so that the pop-up window on the rendering side can be independent of specific technical selection, so as to adapt to various demand scenarios, such as for Develop the H5 rendering engine outside the terminal, develop the Native rendering engine for the terminal, and develop the applet rendering engine for the applet, so as to use the most suitable technology in each scene to do one thing and maximize business benefits;
   c. When the business proposes a new business scenario, it can efficiently meet the agile needs of the business by rapidly iterating on the DSL layer and implementing the rendering layer quickly;

However, although the current PopLayer platform is based on this technical architecture, it only provides the end-side Weex pop-up window rendering capability for various reasons, which does not maximize the value of this technical solution and needs to be further expanded.

business thinking

When designing products and architectures, it is not enough to just find problems, propose solutions, and solve problems. Especially when designing a product from 0 to 1. We need to think beyond the most obvious "problem level" and think about the "problem behind the problem". Only then can you gain a bird's-eye view of which issues are more important and spot the less obvious but important ones.

As Henry Ford described:

When he asked people at that time: "What kind of better transportation do you need?", almost everyone's answer was: "I want a faster horse."

When you get a bird's-eye view, there will be more chances to spot a car than a faster horse. Therefore, my team and I are constantly trying to provide a reasonable business model and positioning for the pop-up window.

In the end I defined it like this: A popup is an interactive control used to guide user behavior. The actual reference corresponding to the pop-up window is "flyers": for example, gym salesmen will distribute flyers at the entrance of the gym to pedestrians who are judged to have fitness intentions, hoping to attract them to visit the gym and eventually buy fitness cards. This is exactly what the vast majority of pop-up windows on the Internet need to do, showing low-cost but attractive content to the right people in the right place, so as to attract users and ultimately generate economic behavior.

The example of handing out flyers is an excellent model for thinking about the development direction of pop-up windows (pictures from the Internet)

Therefore, it is clear at a glance what we need to do in the pop-up window domain:

1. Reduce production costs: improve the development and iteration efficiency of pop-up windows;
2. Expand delivery channels: enable pop-up windows to be delivered stably in any business scenario;
3. Realize precise delivery: Ideally, pop-up windows should only be exposed to people interested in their content, so as to minimize user disturbance and maximize revenue;
4. Enrich the content of the pop-up window: the more attractive the content of the pop-up window, the better the effect of the pop-up window, and the better the effect of the pop-up window, the easier it is to meet business goals;
5. Improve user experience: The worse the experience of the pop-up window, the less attractive the pop-up window is to users. The performance, display method, and micro-interaction of the pop-up window are closely related to the experience of the pop-up window;
6. Data-driven operation: The Internet has a memory. Through the continuous accumulation of activity data, we have the ability to continuously optimize various details in the event launch, so as to maximize the benefits of an event launch;

You should find that the problems listed in the "Problems" chapter are really just some of the stumbling blocks in our pursuit of the above goals. By thinking about the problem that needs to be solved in the pop-up window domain, and its ultimate form. We can finally proceed step-by-step and methodically carry out the upgrade iteration of PopLayer products.

As you read later, it's not hard to see that everything we've done over the course of the year is tied to these 6 goals.

what and how

After describing the problem we face, and thinking about it. Next comes the question of "what to do" and "how to do it." In this regard, my idea is to give priority to solving the problem of platform scalability, and in the process of solving the problem, solve the problem of ease of use of the platform, and after the two problems are solved, continue to improve and expand product functions.

The reason for this judgment is that it is observed that the pop-up window in the industry is increasingly complex, and the refined trend will inevitably put forward higher requirements on the expressive ability of the pop-up window in the future, and the existing platform does not have the same ability due to historical reasons. corresponding scalability. Therefore, following the idea of "cleaning the house and then treating guests", priority should be given to laying the "foundation" for the future development of the platform in terms of technical architecture. Then, when new functions are continuously expanded, you can safely build the building higher and higher, so that more business parties can stay at ease.

Extensible construction

For a platform with a certain level of complexity, improving scalability in most cases means modifying its original architecture. Product designers have to make a difficult choice between building a product from scratch, based on the original product, and making a drastic transformation. After repeated discussions within the team, we finally chose the latter plan, starting from 0 to build a new version of the PopLayer pop-up window construction platform.

From the previous introduction, you should understand that the pop-up window construction platform should be a low-code or no-code tool that enables users to visually complete the task of pop-up window construction. Its output is technically represented as a pop-up window description data in JSON format. Therefore, before creating a popup building platform, the first thing we need to do is to redesign a simple and elegant data structure (DSL) that contains all the semantics of the popup field and can be easily extended. For this, I did the following:

Summarize the function of the history pop-up window style

In order to design a reasonable and elegant DSL, you must first have a deep and detailed understanding of a specific domain. To this end, I collected the pop-up windows that PopLayer has placed in the range of 1-2 years, carefully observed and sorted out their styles and interactions, and explored commonalities and differences. Finally, according to the characteristics of each pop-up window, they are classified as follows:

Pop-up types classify the characteristics of different pop-up categories, and the visual display is summarized in a document called "Pop-up Typology", which can help users quickly identify the type of pop-up that they need.

By summarizing the styles, interactions and functions of historical pop-up windows, on the one hand, I can be more confident in designing pop-up window description data with good scalability. Providing different types of pop-up window templates can not only help users improve the efficiency of pop-up window construction, but also add a far-reaching data dimension to the product, which enables us to compare the same type of pop-up window data, and explore rules to promote business optimization. .

Popup Template Market

Design a new version of the pop-up window description data

After figuring out the domain boundary and domain content of the business domain, you can start to design the DSL, which is also the core part of this project's transformation and upgrading. The quality of the DSL design will directly determine whether the entire project has the ability to remain stable and agile in the ever-evolving business demands. I think a good DSL design should satisfy the following elements at the same time:

1. The field design should conform to the "Occam's Razor" principle. If it is not necessary, do not add entities: keep the data fields as concise and clear as possible, and at the same time, the data organization should be reasonable;
2. Data modules should meet the principle of "high cohesion, low coupling", and try to avoid modifying a field, which will affect the whole body, resulting in large-scale field modification;
3. It is necessary to design closely around a specific field, not only to avoid over-design leading to complex data structure and field expansion, but at the same time to fully consider all possible future possibilities; ideally, new business demands developed in the future only need "Update" the property value of the DSL, not the property;

Based on the above three core design principles, we finally produced the Taobao pop-up window description data specification. It can be roughly divided into the following 7 modules:

1. Basic information module: contains the basic information of the pop-up window, such as name, type, etc.;
2. Component module: Contains the description of the components required for the pop-up window domain. By analyzing the active content of the pop-up window domain over the years, we have summarized 9 components in total: picture, text, countdown, hot area, container, iframe, video, status and close button. Each component sets specific fields around the pop-up window domain requirements and the hand-taoing infrastructure. For example, for the text component, you can set the number of lines and content, and for the countdown component, you can set whether to display the millisecond bit, and the behavior after the countdown ends. Whether the threshold value displays text, etc.; customized components allow users to use each component to complete the pop-up window construction task very intuitively and conveniently;
3. Style module: It is responsible for describing the UI of the component. Since the terminal rendering environment is uncertain, the design of style attributes and style units must fully consider the limitations of different scenarios and different technology selections. Through communication with the client students, we finally determined the style attribute as the minimum style set that can meet the needs of three terminals (H5, iOS, Android) and pop-up windows;
4. Request module: The request module covers the structured description of common request methods in rival Taobao, and uses the description both before and after the pop-up window is exposed. Support serial, parallel request configuration;
5. Behavior module: Unlike most building platforms, the data produced by PopLayer pop-up building is a comprehensive description of the style, behavior, and configuration of the pop-up window. In the behavior module, by sorting out the historical pop-up behavior, we define the behavior of the pop-up window in a structured way, so that the behavior of the pop-up window can be described simply and clearly, and through the arrangement and combination of each other, it can be flexibly adapted to various business needs ;
6. Animation module: As mentioned above, the overall development of the industry requires a more delicate display form and interaction of pop-up windows. At the same time, it also requires pop-up windows to be more attractive to users. To this end, we introduce the animation module to meet the animation needs of different scenarios through a clear and flexible data structure;
7. Other functional modules: This mainly includes other additional functional modules related to the pop-up window domain, such as progressive exposure, pre-rendering module of the success page, etc., which is an expansion of the core module;

At present, there are 17 primary data in Taobao pop-up window description data, classified as follows:

Taobao pop-up window description data first-level fields

Each field has clear, up-to-date documentation to correspond to it. Below I will take the design of the behavior module as an example, so that readers can have a further feeling for the design of the DSL.

Design of behavior module<br>The behavior module describes the response of the pop-up window to the user's behavior. In the design of the data structure, from the perspective of the object being responded, it describes what the object should respond to, the target of the response, the content of the response, and the specific fields. The design is as follows:

• type : Indicates the type of response event, such as click (click), Tab switch (tabSwitch), etc.;
• behavior : Indicates the behavior category of the pop-up window. After our long-term summary, the behavior of the pop-up window can be classified as:
  1. goto: page jump;
  2. switch: switch the internal state of the pop-up window;
  3. call: the external environment calls the terminal to the terminal;
  4. request: send a request;
  5. close: close the pop-up window;
  6. doNothing: do nothing (default);
  7. show: display;
  8. hide; hide;
• target : indicates the behavior object of the pop-up window, which will have different semantics according to the behavior field. For example, when the behavior is switch, target indicates the state ID to be switched;
• content : indicates the content of the pop-up window behavior. For example, when the behavior value is goto , the target value is app , and the content value is https://www.taobao.com , it indicates that when the event occurs, the page needs to jump to the home page in the terminal;

Through such data structure design, we can express the behavior of the popup window as clearly as possible, and support various new requirements flexibly and efficiently without changing the data structure through the expansion and combination of basic fields.

Generally speaking, pop-ups will only respond once to user actions. However, with the continuous prompting of the Taobao scene and user behavior perception ability, the need for pop-up windows to respond to multiple behaviors began to appear in very few scenes. After weighing the rarity of the scenario and the scalability of the DSL, we have opened up the actions field for this special scenario, and the data structure is as follows:

 {
    actions:[ 
        {
            "type": "click",
            "content": [
                {
                    "id": "1",
                    "target": "State_2",
                    "behaivior": "switch",
                    "content": "",
                    "nextActions": ["2"],
                    "fallbackActions": []
                },
                {
                    "id": "2",
                    "target": "",
                    "behaivior": "close",
                    "content": "",
                    "nextActions": [],
                    "fallbackActions": [],
                }
            ]
        }
    ]
}

By adjusting the data structure, reusing the action field and extending the nextActions and fallbackActions fields at the same time, we can easily implement a tree-like behavior description, and realize the parallel or serial behavior description at the lowest cost.

DSL maintenance <br>It is worth mentioning that designing a well-structured DSL is only the first step in a long march. With the continuous development of business, developers have a deeper understanding of domain knowledge. The current structure of DSL will always face new challenges. At this time, the core responsibility of the designer is to strictly control the complexity of the DSL and insist that the structure of the DSL will be reasonable only when necessary. Revise.

If the designer gradually loses his strength in the long maintenance years, then the DSL that was carefully designed at the beginning will eventually expand rapidly, become ugly, difficult to understand, and difficult to maintain like most bad designs. Therefore, the designer should always maintain a high sense of responsibility and complete the following matters:

Write detailed and friendly documents and update them regularly;
The document should indicate the particularity of some fields in time, such as being abandoned or incompletely supported, to prevent other developers from stepping on the pit;
When it comes to the change of DSL, it is necessary to seriously consider the rationality of the change, the method of change and potential hidden dangers, be cautious and iterate scientifically and standardly;

The above is the core of this product upgrade, some experience sharing of DSL redesign. After determining a data that can clearly describe all kinds of pop-up windows and has good scalability, the next step is to provide a face-to-face User, a pop-up window building platform for producing data that meets data specifications.

Develop a codeless pop-up window to build a platform xEditor

The core function of the pop-up building platform is to "reduce production costs". However, from the perspective of product architecture design, it is also necessary to ensure that the product can always maintain efficient and stable iterative functions in the process of future evolution. Therefore, for the construction of the pop-up window construction platform from 0 to 1, it is always necessary to take into account the following two issues:

1. Product design: how to make users use the product more smoothly?
2. In terms of technical architecture: how to make the product more convenient to continue to expand?

For the first question, I will leave it to the next chapter to explain. In the rest of this chapter, I will introduce to you how I ensure the stability and scalability of the product in the technical architecture design.

Below is the technical architecture diagram of the pop-up editor xEditor:

xEditor technical architecture diagram

It can be clearly seen from the architecture diagram that the overall architecture of xEditor can be divided into three parts: data layer, logic layer and engineering layer. To keep the entire application stable and highly scalable, I did the following for each layer design:

Data layer design <br>The data layer mainly includes the management of the editor's internal state and external data interaction. Since the function of the editor is to produce data that meets the DSL specification, the external data interaction is relatively simple, and the core should focus on the management of the internal state.

In order to ensure the orderliness and maintainability of state changes, I use immutable.js to save the result of each user's operation as a "data snapshot" and push it into the stack. Since each snapshot is an immutable data that satisfies the DSL specification, each update of the snapshot can cause the preview module to instantly render the latest popup style. Thus, the state of the entire application is kept in order through strict data-driven rendering. And because the preview module uses the same rendering engine as the online, it can also truly achieve the effect of "what you see is what you get".

State management based on immutable data structures

At the same time, since the structure of each operation of the user is preserved, the entire application can also easily implement user behavior recording and rollback functions to further improve the user experience.

Logic layer design <br>The core problem to be solved in the logic layer is to make the application have flexible expansion capabilities. To this end, I divided the entire user interface into components with standardized interfaces according to functional modules, and implemented them at the bottom layer. A Layout base with standardized "slots" enables each functional module to assemble a fully functional application interface by plugging and unplugging in a similar way as a plug-in.

Plug-in modules for flexible plug-in function panels

Through this design, each functional block is independent of each other, and can be quickly expanded or removed according to requirements. Developers do not have to worry about affecting the functions of other modules, and the application can also distinguish the functions to be exposed according to different users (slightly We'll see an example of this feature later).

Engineering layer design <br>On the engineering layer, the entire application uses TypeScript to constrain variable types and provides interface hints for developers, and conducts unit tests for core tool functions. By integrating the Group AppLint specification, the code aligns with Taobao best practices in style and usage, thereby minimizing the rate of application code decay after multiple iterations.

In addition to various constraints on the code, writing clear product and technical documents, and maintaining the freshness of the documents are also important factors to ensure that the application is always maintained at a maintainable and scalable level.

The following shows the related products and technical document catalog of the PopLayer overall solution, which contains almost everything that users and developers need to know.

PopLayer 4.0 Official Documentation

The above are some thoughts and designs on the technical architecture of the pop-up window building platform xEditor. Based on these designs, xEditor can always remain agile in the process of rapid business iteration, empowering the pop-up window building capabilities to more and more a lot of business.

Ease of Construction

After introducing the various efforts made in the technical architecture for product scalability, this chapter will focus on how the pop-up window construction platform xEditor serves users in product design and greatly improves the efficiency of pop-up window construction.

At the beginning of product design, I was questioned by various partners? Who is this product for? This is obviously a very good question, and figuring out who to design for is always the first step in product design. In this regard, my thinking is that based on the complexity of online pop-up windows, the construction of pop-up windows cannot be completely completed by operation. Users with no technical background can easily complete the construction, and for the pop-up window with complex interaction, users with a certain technical background can be allowed to complete the construction, but the interaction complexity of the entire application should be controlled as much as possible. Build successfully.

In view of the fact that the user of the product may be either the operation or the product, or the development, the interface design of the product cannot be biased towards any one party, but a design that matches the operating habits and cognitive systems of both parties as much as possible. To this end, I investigated various construction platforms (iceluna, Yunfengdie, xEditor, etc.) and design tools (Axure, Sketch, Photoshop, etc.) in the group and the industry, and finally decided to refer to Axure's interface design on the product interface, using drag-and-drop The core interactive form of drag + configure.

The reason for this choice is mainly due to the following three points:

1. Drag + configuration to generate visual elements is a UI creation method that conforms to the user's intuition. For many years, applications such as Axure, Sketch, and Photoshop have helped users establish a mental model;
2. Axure's interface design is very classic, and most users are familiar with it;
3. As a professional prototyping tool in the industry, the functions covered by Axure can basically meet the needs of pop-up window construction. Therefore, the functional design specification of follow is to stand on the shoulders of giants, which can avoid stepping on pits to the greatest extent in the future;

The following is the final product interface display:

xEditor interface

Interaction design optimization

In addition to following the user's usage habits as much as possible on the interface and arranging the functions reasonably, another interactive design optimization of xEditor worth mentioning is that it can display different interactive interfaces for users according to the different types of pop-up templates. pop-up window (that is, the pop-up window itself does not send a request, but only displays the content, and jumps after clicking the pop-up window), the interface that the user sees will be like this:

Did you notice? Compared with the "complete" editor, the presentation popup template lacks the "Data Center" panel in the upper right corner, and only three necessary components are displayed in the "Component Library" on the left. All of this is due to the technical architecture of xEditor's pluggable modules. In this way, we can minimize the user's understanding cost and allow users to only care about what they need to care about. By minimizing product noise, we can achieve that for pure display pop-ups, the user's construction cost does not exceed 1 minute.

Compared with the actual development time of project startup, registration and embedding, function implementation and testing, xEditor saves at least 2 person-days of pop-up window development workload!

Added easy-to-use features

In addition to providing just-right functions for users with different needs, we have also added some new functions to further improve the construction efficiency of users, and incorporate more pop-up window requirements that could not be created through construction in the past into the new construction system. Among the many functions, the more representative ones are the following two:

Data MOCK function <br>When the pop-up window involves the request interaction with the server, especially when the content of the pop-up window depends on the fields returned by the server, the previous pop-up window editors cannot handle such a situation well, only Returning a field like undefined to the bottom of it will destroy the WYSIWYG experience.

However, xEditor solves this problem by adding a data mock function. When configuring the interface, it allows users to fill in the mock data consistent with the online response data, and instantly displays the corresponding pop-up window style, thereby avoiding repeated code scanning. time loss.

Based on the data mock function, xEditor can also easily achieve the production effect of "separation of front and back ends" on the construction side, that is, when the server interface is still under development, as long as the two parties agree on a consistent data structure, the operation or development can follow the data ahead of schedule. Build a pop-up window style, and go online seamlessly after the interface is completed.

Did you notice? Users can even add multiple mock data and switch them at will, and the view will be instantly updated according to the selected mock data! This is very convenient when the pop-up window responds to different styles for different response data, and the user can also test whether the style of the pop-up window is normal by deliberately setting special data values.

Note: The mock data set only takes effect in the editor.

Compound condition judgment function <br>In addition to directly displaying the data returned by the server on the pop-up window, in some scenarios, the pop-up window needs to display a different interface according to the data returned by the server, and the data judgment logic is also relatively complex. At this point, it is a good time for the xEditor compound condition judgment function to appear.

Through the multi-state switching + state exposure condition judgment + data mock function provided by xEditor, users can build a pop-up window containing complex logic judgment very intuitively and conveniently.

In addition, the conditional judgment function of the state theoretically supports infinite nesting, which can meet the needs of various composite condition judgments.

Infinitely extendable data judgment panel

The final composite condition will be represented by the following data structure:

 {
  "condition": {
    "left": {
       "left": "{{store.$username.nickname}}",
      "operator": "=",
      "right": "kongtang"
    },
    "operator": "&&",
    "right": {
      "left": "{{store.$age}}",
      "operator": ">=",
      "right": "20"
    }
  }
}

Functional construction

After upgrading the system for the scalability and ease of use of the product, the next step is to continuously enrich the functions of the pop-up window. If the previous work is compared to "laying the foundation", then what to do in this step and after that is to build the house higher and higher based on this solid foundation to meet more and more complex pop-up window construction needs.
No matter what new features are added, our core goals on the rendering side always revolve around the following two themes:

1. Rich pop-up content;
2. Improve user experience;

Through these two points, we hope to reduce the user's resistance to the pop-up window as much as possible, bring the user a more comfortable and novel experience, and better promote the guiding goal of the pop-up window to be achieved. The quantitative indicators for the construction of the pop-up window function will eventually be implemented in the following two aspects:

1. User satisfaction comes from regular research data;
2. The exposure rate of the pop-up window, the click-through rate and the arrival rate of the follow-up page after the pop-up window is clicked;

The following will introduce some representative new functions in this product upgrade.

Pop-up exposure optimization

Pop-up exposure is the first-level funnel for pop-ups to successfully guide user behavior. The increase in pop-up exposure will give more users the opportunity to see the content of the pop-up window, which means that a certain business strategy or intention can affect more users. . Therefore, increasing the exposure rate of pop-up windows and approaching the ideal value of pop-up window exposure rate of 100% is the direction of eternal exploration in the field of pop-up windows.

In order to increase the exposure of pop-up windows, there are two directions for exploration:

1. Delivery side: optimize delivery channels to improve the hit rate and response time of campaign configuration;
2. Rendering side: Improve the rendering performance of the pop-up window, or at least make the user think that the pop-up window responds quickly;

Since the construction of the delivery side is currently in progress, the following will mainly share with you the realization and effects of some rendering side functions.

H5 native popup rendering engine - xRender

At the beginning of cooperation with the PopLayer team, the first problem we solved was to open up the off-site delivery link built by the pop-up window. Therefore, the first rendering engine developed based on the new DSL specification naturally chose the H5 solution in terms of technology selection. Due to the uncertainty of the off-site environment and the demanding performance requirements, the rendering engine chooses to avoid the use of third-party frameworks and libraries as much as possible, and the core logic is all implemented in native JavaScript.

However, since the technology selection uses native JavaScript implementation, it is necessary to carefully design the technical architecture and code structure to ensure the stability and robustness of the code to meet the continuous functional iteration needs of future business development. For this reason, in the coding paradigm of the rendering engine, I draw on the idea of functional programming, encapsulate the various functions of the rendering engine into pure functions, and use the pipeline call method to keep the various functions of the code on the interface. Consistent and functionally cohesive. Whether it is for debug needs or new functions in the future, the application can be iterated stably and efficiently by modifying, adding, and deleting "pipes".

xRender code structure diagram

As can be seen from the displayed xRender code structure diagram, the entire xRender can be approximately regarded as a "pure function", and the unified DSL data input will generate consistent pop-up behavior and styles. As can be seen from the code screenshot below, the actual code adopts the functional programming paradigm and maintains a one-to-one mapping relationship with the overall design.

xRender main logic code

Through online verification, the H5 pop-up window rendering engine developed by native JavaScript has a rendering time of tens of milliseconds and tens of milliseconds (excluding asynchronous data requests). The overall pop-up window business data is similar to the old Weex 1.0 rendering engine. be consistent.

Native lightweight rendering engine

After xRender has been in stable service for a period of time, we began to explore a more extreme way to optimize the performance of the pop-up window on the rendering side. After a comprehensive evaluation, we decided that based on the new version of the DSL data specification, the terminal-side development only meets the needs of pop-up window field rendering. The lightweight pop-up window rendering engine saves the container startup time necessary for other solutions and provides a more extreme rendering experience.

To get through the native rendering, it is necessary to impose stronger constraints on some fields of the DSL, and since there are huge differences in the rendering schemes of the three terminals in some scenarios, it is necessary to extend the DSL without changing the original DSL structure as much as possible. In order to meet the consistency needs of three-terminal rendering. Through repeated discussions and polishing within the team, as well as rigorous testing by classmates, the Native lightweight rendering engine was successfully developed to serve online business scenarios stably and gradually cover more businesses.

By putting the Weex 1.0 rendering version and the Native lightweight rendering version data of the same event at different times during the non-big promotion period, we found that the Native lightweight rendering engine can increase the exposure of the pop-up window by 26 pt, especially during the Double Eleven period "88 VIP" The single-day PV exposure of "Open Card Popup" increased by 43 pt.

Pop-up click optimization

In addition to finding ways to increase the exposure of the pop-up window, whether the business goal of the pop-up window is finally achieved depends on whether the user effectively clicks the pop-up window. Therefore, another core problem to be solved by the pop-up window domain is how to improve the click-through rate of the pop-up window.

To this end, our exploration direction is multi-dimensional, mainly including the following levels:

By working with designers to formulate Taobao pop-up window styles and interaction specifications, the pop-up windows produced by the construction side will always maintain a standardized pop-up window style and interactive behavior. For example, the size of the pop-up window, the size and position of the close button, etc. are specified, so as to bring a better experience to the user and enhance the user's willingness to click. Through the pop-up window template, the building side can enforce constraints on the basic style and interaction of the pop-up window;

By adding an animation module, users can quickly add the dynamic effect capability of the pop-up window, and when the click effect of the pop-up window is not good, there is an additional effective control method;

By accessing UCP intelligent management and control, through the terminal intelligent algorithm, the pop-up window is exposed to users who are more willing to click;

The following will mainly introduce the design and online effects of the animation module.

animation module

Our design requirements for animation modules have the following three principles:

1. Simple enough to only support common animations;
2. Reasonable enough to ensure consistent animation effects on all three ends;
3. Flexible enough to meet the needs of simple animations with changeable pop-up window fields;

Finally, based on the above principles, we settled on the animation description DSL specification. Make the pop-up window elements have the ability to quickly add animations. In addition, we also cooperate with the terminal side students to obtain the user behavior perception ability on the terminal side, so that the pop-up window can perceive the user's sliding in the terminal, switching Tab and other behaviors , By binding the corresponding animation effects for different user behaviors, we have the ability to bring a more delicate visual and interactive experience to the pop-up window.

Some representative examples are shown below:

1. 2021 Double Eleven Shopping Cart Draw Reminder Pop-up: After the pop-up was originally presented in the form of a static image, it was found that the click data was not good after going online, and it was decided to add a shake effect, because the dynamic effect has been precipitated in the previous business. It is a reusable animation module, so this iteration takes only a few minutes to go live. After the dynamic pop-up window was launched, the click-through rate of the pop-up window increased by 3.6 percentage points.
2. Taobao second floor floating bar: By combining the sliding perception with the animation module, we can trigger the corresponding dynamic effect of the pop-up window according to the user's sliding trajectory, thereby bringing a more delicate experience to the user:

Undertaking page arrival rate optimization

In addition to starting from the pop-up window exposure rate and click-through rate in order to bring greater value to the business. At the suggestion of the teammates, we have also opened up a new scene that can be explored in the pop-up window domain: optimization of the arrival rate of the pop-up window acceptance page. We also use the example of sending flyers. What we have done before is to print flyers that are attractive to target users at the lowest possible cost, and to deliver them stably to target users on as many occasions as possible. "Optimization" means that when the user gets the pop-up window and becomes interested, but when the target location is too far away and hesitating, the user is instantly sent to the target location, which directly dispels the user's concerns and reduces the hesitation and possible loss of users while waiting.

In order to optimize the arrival rate of the incoming page, we borrowed the preloading capability of the venue to "preload" the page when the pop-up window is exposed. After the user clicks, they can directly see the loaded page.

Based on this technical principle, I have formulated a two-phase project iteration plan:

The first iteration: quickly run through the technical link and verify the business value online <br>This iteration includes the following:

1. Open the POP preload interface on the end side;
2. Integrate preload related functions on xEditor, xRender;
3. Promote the transformation of the buried point of the undertaking page;
4. Sort out and bury the points in the complete process, and test the business effect of the technical solution through A/B experiments;

The core of the first iteration is to integrate the site preloading scheme with the POP-succession page technology system through a complete design, and to determine how the data of the entire link is connected in series with the core focus indicators to ensure the scientificity of the data. Through repeated discussions within the team, we finally connected the entire data link by agreeing on URL parameter identification. The entire data link and core indicators are shown in the following figure:

POP stub page preload data link diagram

By clearly defining the connection method of data and the core focus indicators, we can efficiently connect with the data team, quickly and accurately measure and evaluate the business value brought by this technological transformation. A week of online business A/B experimental data has been selected to prove that the preloading function of POP's successor page increases the page arrival rate by about 12.58pt, reduces the page view time by an average of 1.76 seconds, and indirectly increases the page's click UV by 2.47pt. It basically met expectations, achieved the effect of opening the page in seconds, and gained positive business benefits.

The second iteration: normalization of accepting pages in seconds <br>After quickly verifying that the accepting page preloading technology can bring positive value to the business, the next core thing I need to do is to vigorously promote this function, so that more businesses can Efficiently and stably enjoy the business increment brought by technology. Therefore, the second iteration mainly includes the following contents:

1. Promote the native lightweight rendering engine to achieve preloading related functions;
2. For pages that have undergone digging transformation, the second page opening function for subsequent pages is enabled by default, and for pages that have not undergone burying transformation, it provides a transformation plan and an entry for manually opening the function;
3. Promote Taobao Newcomer Edition, Silver Edition and other versions to open the preloading interface of the acceptance page every day;
4. Borrowing the ER A/B experimental capability of Yixiu, every time the ability to open the page in seconds is enabled, a low-flow empty bucket is automatically created for effect comparison, so that the business benefits brought by the technology can be seen, measurable, and convenient for follow-up. optimization.

The running sequence diagram of the whole program is as follows:

The sequence diagram of the second phase of the second opening of the follow-up page

From the user's point of view, when xEditor detects that the user's pop-up window contains a valid jump link that is not in the whitelist before the pop-up window is released, it will prompt the user for the function, and the user can determine whether to enable the function:

When the page is not in the whitelist, prompt the user to perceive the function

When xEditor detects that the jump page of the pop-up window has completed the preloading and buried point transformation, it will create an ER A/B experiment by default, enable the preloading function for the large traffic bucket, and notify users before publishing.

When the page is in the whitelist, the default page preloading is enabled

At the same time, when xEditor detects that there are multiple valid jump links on the page, it will prompt the user, allowing the user to actively choose which page to enable the function for:

By undertaking the second-phase iteration of the page second opening project, we have successfully achieved that for the pages that have been buried and transformed, the platform enables the preloading function by default, so that more businesses can enjoy the incremental value brought by the increase in the page arrival rate. At the same time, through the default ER experiment diversion, the platform can also clearly perceive the number of businesses empowered and the incremental value created.

stability building

Since I joined the company, the Group has been vigorously promoting safe production. For products such as pop-up windows that require rapid iteration and billion-level traffic during the event, how to better improve product stability is a problem I have been thinking about in the process of product design and development.

Thanks to the PopLayer platform as an old-fashioned Taobao pop-up platform, the construction of stability guarantee is good enough. The so-called pearls and jades are in the front, and the wood is in the back. What I can do is only on the construction side and the rendering side. Do the following optimization:

1. Improve the test coverage of xRender, connect to JSTracker and public opinion control, and conduct strict regression testing in each iteration to ensure the stable operation of the application online, and timely alarm if there is any abnormality;
2. In xEditor, it is automatically detected whether the jump link address filled in by the user is a pre-delivered address or an invalid address. If it is found, it will give the user feedback in time when the user publishes it. At the same time, the loading status of the first screen image resource is monitored on the rendering side. When the image fails to load, prevent the pop-up window from being exposed;

When it is detected that the user fills in the pre-delivery address, it will give an active warning

3. When the user publishes the pop-up window, the global configuration of the pop-up window such as fatigue is displayed for the user, so as to avoid the user's negligence and misconfiguration causing the behavior of the online pop-up window to be inconsistent with expectations;

Externalize global configuration before release to avoid unsystematic risks

Outcomes, Deficiencies and Development Planning

Achievement display

Through the joint construction of PopLayer's scalability, ease of use, feature richness and stability for more than a year, looking back now, we have achieved the following achievements in the pop-up window domain:

1. [Market Data] Since the official launch of PopLayer 4.0 in August 2021, it has undertaken 46 pop-up activities both inside and outside of Taobao, covering types with dynamic effects and scene perception that cannot be supported by the original construction, saving at least 92 people Daily labor costs, wireless faults in the future;
   
   Example of some online pop-up activities
2. [System expansion] Completed the major version upgrade of PopLayer from 3.0 to 4.0. By reconstructing the underlying DSL, the pop-up editor was developed from 0 to 1, making the whole system more robust and able to continuously respond to business development needs, fast, Stable expansion function to support more business scenarios;
3. [Production efficiency] By developing a pop-up editor from 0 to 1, the efficiency of pop-up construction and the coverage of pop-up windows that can be built are greatly improved. For simple pop-up windows, the construction time for users without technical background is < 1 minute, which greatly saves The labor cost (at least 2 people per day) has been highly recognized by users;
4. [Range of Reach] By developing the H5 rendering engine and opening up off-end delivery channels, the full-scenario coverage inside and outside the terminal for link building with pop-up windows has been achieved;
5. [Precise delivery] By accessing the intelligent algorithm control SDK on the engine side, the marketing pop-up window can be controlled by the algorithm to achieve precise delivery, reduce user disturbance and increase the click of the pop-up window;
6. [Extreme performance] Through the H5 native rendering engine, the performance of the pop-up window outside the terminal is guaranteed. Through the Native lightweight rendering engine, the exposure rate of the pop-up window in the terminal is increased by 26pt. The pre-rendering function of the POP acceptance page improves the arrival rate of the acceptance page by 12.58pt and the click rate. 1.82pt;
7. [Rich content] By adding an animation module and a Taobao scene perception module, the pop-up window construction provides an operational strategy option to enhance the click of the pop-up window by adding dynamic effects;
8. [Experience improvement] By providing a unified visual interaction specification for the pop-up window on the construction side, the user experience of the pop-up window is further improved;

Deficiencies and Development Planning

Although after more than a year of deep cultivation in the pop-up window field, we have achieved some visible results, but there are still many places to continue to explore the goal of making PopLayer a Taobao pop-up window solution. To sum up, there are mainly the following aspects:

Solve the problem of native lightweight rendering engine version coverage

Although the native lightweight rendering engine can significantly improve the exposure of pop-up windows, the engine itself involves the issue of version coverage. Before the version covers the acceptable range of the business (generally > 95%), how to make the pop-up window completely Possibly reaching a sufficient number of people is the core issue we need to face.

For this problem, our current solution is to continue to explore the performance optimization scheme of the H5 rendering scheme in the Taobao homepage straight-out scenario, and build an automatic engine offload mechanism on the platform side, so that the pop-up windows that meet the native rendering conditions use Native Lightweight rendering engine rendering, and pop-up windows that do not meet the conditions are automatically downgraded to the H5 rendering scheme. Therefore, users on the construction side can obtain maximum business benefits without perception.

Strengthen dynamic capacity building

At present, according to our experience, there is no necessary correlation between whether to add motion effects and increase the click-through rate of pop-up windows. However, in some scenarios, we can clearly see that the click-through rate of the pop-up window is significantly improved after the pop-up window is changed from static to dynamic pop-up window with dynamic effects. Therefore, at least we can say that motion effects can be used as an effective means to increase the click-through rate of pop-up windows and better achieve business goals.

But the further question is, besides helping to improve the user experience, what is the correlation between animation and pop-up click-through rate? At present, our exploration in this area is still slightly insufficient. In order to answer this question, we will continue to explore and build in the following aspects:

Further open up the A/B experiment capability, enabling the platform and users to quickly create pop-up A/B experiments, and explore and verify the correlation between pop-up dynamic effects and click-through rates;
Build a common dynamic effect template, provide the ability to quickly add dynamic effects to the pop-up window components on the construction side, and improve the agility of business iterations;
Combining industry observations and industry best practices, we will continue to explore more suitable dynamic expression methods for the pop-up window domain;

Through continuous exploration on the dynamic effects of pop-up windows, we hope to provide richer technical support for the expression of pop-up window content while enhancing the experience of pop-up windows, thereby enhancing the attractiveness of pop-up windows and enhancing users' willingness to click.

Further expand the scene coverage of the pop-up window and the investment link

At present, there are about 30% of the pop-up windows in Taobao terminal. Due to their form, the interaction complexity exceeds the coverage of the pop-up window construction capabilities, and can only be developed manually by developers using coding methods. For these business scenarios, we need to continue to explore how to minimize the development cost of pop-up windows by continuing to expand construction capabilities or other methods, and provide end users with stable, high-performance, and rich content.

At the same time, further reducing the cost of building complex interactive pop-up windows is also an important topic that we need to continue to explore.

Taobao global pop-up data system construction

Review the 6 core business goals of popup domains that I mentioned at the beginning of this chapter:

1. reduce manufacturing cost;
2. Expand distribution channels;
3. achieve precise delivery;
4. Rich pop-up content;
5. Improve user experience;
6. data-driven operations;

Our construction of the last target this year is still slightly insufficient. There is not yet a view that can clearly display the distribution of Taobao pop-up windows, the form and data of the pop-up windows, which allows us to compare the effect data of the same type of pop-up windows and find that the rule is the operation. Provide suggestions for improvement. It also creates a channel for building an efficient A/B experiment, so that users can continuously optimize the pop-up data through continuous experiments.

But the good news is that these are our next construction directions. We are us