Dynamic page layout and content distribution method, system and device

Abstract

The invention relates to the technical field of page development, and discloses a dynamic page layout and content distribution method, system and device, and the key point of the technical scheme is that the method comprises the following steps: S1, creating a page layout template in a content distribution system, configuring layout information for the page layout template, creating a scene code for a scene, establishing association with the page layout template; creating a content distribution strategy according to the scene, associating different unit contents in the content distribution strategy, and associating a corresponding customer group for each unit content; s2, in response to the page demand request, creating a new page, and integrating an SDK (Software Development Kit) provided for the new page and a content distribution system; a scene code is configured for the new page, and the new page obtains a corresponding page layout template and layout information according to the scene code; and S3, performing page drawing on the new page through the SDK according to the returned page layout template and layout information.

Description

Technical Field

[0001] The present invention relates to the technical field of page development, and more specifically, to a method, system and device for dynamic page layout and content distribution. Background Art

[0002] With the rapid development of smart phones, users are gradually replacing offline counters with online financial services, and the banking industry is also vigorously developing mobile technology, providing customers with a variety of online channels such as native APP, H5, and mini programs. In today's highly homogenized business, in order to attract more customers, banks need to frequently change page layouts and presentation forms, increase the exposure of various products, and enhance user attraction and stickiness.

[0003] Every time the page layout is adjusted, it is necessary to change the code for different channels, different terminals, and different pages. There are many types of front-end technical frameworks, including Android, iOS, HTML5, and small programs, which are labor-intensive and costly. In addition, it takes a long time for APP to be put on the market and updated by users, which affects the marketing effect. The content display page of the bank, especially the first-level page, has similar products and content between different pages, and it needs to be reused technically. In order to improve the marketing effect, the page also needs to be "one thousand faces for one thousand people", showing different products and content for different customer groups. If these display elements can be abstracted and the operator is allowed to dynamically manage the page layout, the dynamic rendering and operation of the page can be realized, so that when the page layout or content is adjusted, coding and application market release are no longer required, which greatly reduces the R&D cost and operation efficiency. Therefore, a method and system for dynamic page layout and content distribution are proposed.

[0004] There are some disadvantages in the common technical solutions currently on the market:

[0005] 1) Every time the page layout is adjusted, it is necessary to change the code for different channels and pages, which is labor-intensive and costly.

[0006] 2) There is a high degree of duplication between different pages, and they are developed separately, resulting in low code reuse.

[0007] 3) For pages developed natively for Android and iOS, each adjustment requires market review, which takes too long and results in slow market response.

[0008] 4) How to display different content to different customer groups? The code logic is complex and the flexibility is poor. Summary of the invention

[0009] The purpose of the present invention is to provide a dynamic page layout and content distribution method, system and device, with good system architecture design, which can flexibly expand more components without affecting the rendering of existing pages and provide a good user experience.

[0010] The above technical objectives of the present invention are achieved through the following technical solutions: A dynamic page layout and content distribution method, comprising the following steps:

[0011] S1. Create a page layout template in the content distribution system and configure layout information for the page layout template.

[0012] Creating a scene code for the scene and associating it with the page layout template;

[0013] Create a content distribution strategy based on the scenario, associate different unit contents in the content distribution strategy, and associate each unit content with the corresponding customer group;

[0014] S2. In response to the page demand request, a new page is created and the SDK provided by the new page is integrated with the content distribution system;

[0015] Configure the scene code for the new page. The new page obtains the corresponding page layout template and layout information based on the scene code.

[0016] S3. The new page is drawn through the SDK according to the returned page layout template and layout information.

[0017] As a preferred technical solution of the present invention, S4 is also executed after S3, and the content of S4 is: the SDK locally caches the page layout template and layout information, and when the page is rendered next time, if an interface exception or timeout occurs, the cached data is used to render the page.

[0018] As a preferred technical solution of the present invention, the layout information includes a layout framework, a position and a grouping of each element.

[0019] As a preferred technical solution of the present invention, the unit content includes a button set, a product component, a banner image, and an announcement.

[0020] As a preferred technical solution of the present invention, the new page is: Android, or iOS native page, or HTML5, or mini program page.

[0021] As a preferred technical solution of the present invention, the SDK is used to complete the connection between the new page and the content distribution system and complete the rendering of the new page.

[0022] As a preferred technical solution of the present invention, in S3, during the page drawing process, if an unrecognizable component is encountered, it is skipped and the recognizable component is drawn; if a dynamic component is encountered, the SDK initiates an asynchronous query interface to obtain real-time data before drawing the content.

[0023] A dynamic page layout and content distribution system, characterized by:

[0024] The scene and page layer is used to centrally manage all scenes, set a scene code for each scene, and associate a page layout template with each scene;

[0025] The layout template layer is used to set different page layout templates for different scenarios and configure layout information;

[0026] The distribution strategy layer is used to set one or more content distribution strategies for each scenario;

[0027] The unit content layer is used to configure unit content for the page layout template. The unit content includes display elements, jump links, and customer group codes.

[0028] The basic data layer is used to configure basic data.

[0029] As a preferred technical solution of the present invention, the basic data includes a picture library, an address pool, a label library, a text library, and an underlying component library.

[0030] A dynamic page layout and content distribution device comprises: a processor and a memory, wherein the memory stores a computer program executable by the processor, and the processor implements the above method when executing the computer program.

[0031] In summary, the present invention has the following beneficial effects: it adopts a multi-level, modular design, supports multi-channel operations, and configures independent scenarios according to different pages. Operators can dynamically configure page layout and content distribution management for each scenario. A page can have multiple distribution strategies, and different page contents can be seen at different times and for different customer groups. In terms of architectural design, it basically achieves decoupling from business scenarios, and at the same time provides flexible expansion capabilities, with the advantages of perfect abstraction, flexible configuration, high operational efficiency, and good user experience. By adopting an independent modular design, decoupling from business scenarios can be achieved, and page layout and rendering can be abstracted into SDK to achieve functional reuse. A good system architecture design can flexibly expand more components without affecting the rendering of existing pages, and the user experience is good. When adjustments are made to the page layout and content, they take effect in real time without modifying the code, with small workload, high efficiency, and low cost. Through the control of customer groups, precise marketing can be achieved, with thousands of faces for thousands of people and flexible configuration. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 is a flow chart of the method of the present invention;

[0033] Figure 2 is a system schematic diagram of the present invention;

[0034] Figure 3 It is a page rendering implementation diagram of the present invention. DETAILED DESCRIPTION

[0035] The present invention is further described in detail below in conjunction with the accompanying drawings.

[0036] The present invention provides a dynamic page layout and content distribution method, comprising the following steps:

[0037] like Figure 1 As shown, S1, create a page layout template in the content distribution system, and configure layout information for the page layout template, the layout information including the layout framework, the position and grouping of each element;

[0038] Create a scene code for the scene and associate it with the page layout template; the scene code is the traditional page;

[0039] Create a content distribution strategy based on the scenario, and associate different unit contents in the content distribution strategy. Unit contents include button sets, product components, banner images, and announcements, and associate corresponding customer groups with each unit content.

[0040] S2. In the actual R&D process, R&D personnel create new pages based on actual needs. The new pages can be Android or iOS native pages, or HTML5, or mini-program pages.

[0041] The SDK, or software development kit, is provided for the integration of the new page with the content distribution system. The SDK is used to complete the connection between the new page and the content distribution system and complete the rendering of the new page.

[0042] Configure a scene code for the new page. At this time, the new page sends a request to the content distribution system according to the scene code to obtain the corresponding page layout template and layout information;

[0043] For the entire S2 step, R&D staff only need to create a new page, which results in a small workload. They only need to integrate the corresponding SDK and configure the scenario code, thus minimizing R&D costs.

[0044] S3. The new page is drawn through the SDK according to the page layout template and layout information message returned by the content distribution system.

[0045] Specifically, during the page drawing process, if the SDK has not been upgraded but new modules have been added to the server, there may be components that the SDK cannot recognize. In this case, the rendering of the corresponding content will be skipped, and the recognizable components will continue to be drawn to ensure that the page can be drawn normally. If a dynamic component is encountered, the SDK will initiate an asynchronous query interface to obtain real-time data before drawing the content, thereby completing the content rendering of the dynamic page layout template.

[0046] S4. After the rendering of the current new page is completed, the SDK will cache the page layout template and layout information locally. When the page is rendered next time, if an interface exception or timeout occurs, the cached data will be used to render the page, which can avoid abnormal problems such as white screen, greatly improving the customer experience.

[0047] After all the above steps are completed, if it is an H5 page, the operator can configure the address of the corresponding page to any entrance of the APP, which is convenient for subsequent marketing and business development. For each terminal that has been released, whether it is an APP native page, HTML5 page, or a mini program page, in the subsequent operation process, the operator can adjust the layout, content, customer base, etc. at any time, without the involvement of technical personnel, and it takes effect in real time, responding to market demand in a timely manner, and maximizing operational efficiency.

[0048] Corresponding to the above method, the present invention also provides a dynamic page layout and content distribution system, such as Figure 2 As shown in the figure, the content distribution system abstracts the management of pages into five levels. Hierarchical management can maximize the reuse of basic data and improve the efficiency of daily operations. The content distribution management system also provides a what-you-see-is-what-you-get configuration method, which greatly reduces operating costs in daily use.

[0049] The specific system content includes: basic data layer,

[0050] The basic data layer, i.e. Figure 3 L25 in the layer is used to configure basic data, which is equivalent to various resource pools, so as to facilitate the use of the upper layer, avoid repeated configuration of resources, and reduce the complexity of operations. This layer includes image library, address pool, label library, text library, component library, etc.

[0051] The component library is jointly developed by the channel and the server based on the design effect, and more than one hundred component libraries and the channels supported by these components are initialized in the content distribution system, such as more than ten basic components, more than thirty wealth components, more than twenty loan components, more than thirty marketing components, etc. In the future, more components can be flexibly added as needed.

[0052] The address pool centrally manages all content on the page, including buttons, banners, components, and other links that need to be redirected, which are divided into H5 addresses, APP native addresses, mini-program addresses, etc.

[0053] The tag library is equivalent to user portraits. Different users have different tags. By configuring tags, different exhibits can be displayed to different customer groups to improve marketing effectiveness and business conversion rates.

[0054] The text library can centrally configure different text contents, including: plain text and rich text.

[0055] Unit content layer, i.e. Figure 3 L24 in the page layout template is used to configure unit content, which includes display elements, jump links, and customer group codes. The jump links are selected from the address pool, and the customer group codes are set according to actual needs. The minimized display units that can be used for display include buttons, product components, banners, etc.

[0056] In the unit content layer, the most important content is the product component library, which displays the effect as follows: Figure 3 As shown in the figure, in the content distribution system, when configuring this product content, you need to select the page layout template of this financial management, and configure the corresponding text, product code, jump link, customer group code, etc. in the position of each element of the template. When the page is rendered, the static content configured by the content distribution is displayed. For the display of interest rates, you can asynchronously initiate interest rate queries based on product codes to display the latest deposit interest rates in real time. For button content, you configure a "button" in the content distribution system, select button images and corner marks from the image library, select jump links from the address pool, and select the required customer group from the tag library. This completes the configuration of a button. For announcement content, you configure an "announcement" in the content distribution system, select announcement titles and announcement details from the text library, and you can realize the scrolling playback of announcement titles on the page. When users click on the announcement title, the announcement details can be displayed. Of course, when configuring content, you can also associate tag libraries, which realizes the display of different announcements for different customer groups.

[0057] Distribution strategy layer, i.e. Figure 3 L23 in the example is used to set one or more content distribution strategies for each scenario. A distribution strategy is specified for each scenario. A scenario / page can have multiple distribution strategies. For example, a marketing distribution strategy for a specific holiday can be configured based on a default distribution strategy, and the effective time range can be specified. In this way, users will see different page content on the specified holiday. When configuring the strategy, operators can add different pre-configured "content" as needed according to the template's slots. This completes the filling from the page framework to the content, and realizes the configuration of a complete page.

[0058] Layout template layer, i.e. Figure 3 L22 in is used to set different page layout templates for different scenarios and configure layout information; different page layout templates are designed according to different scenarios to control the position and grouping of different elements on the page, thus realizing the management on the page "framework".

[0059] Scene and page layers, i.e. Figure 3 L21 in it is used to centrally manage all scenarios, set a scenario code for each scenario, and associate a page layout template for each scenario; for example: wealth page, marketing page, etc. When the terminal is running, it needs to pass in this scenario code. The server will perform real-time calculation of the page layout based on this scenario code and return a layout message in JSON format.

[0060] The content distribution system of the present invention adopts a multi-level and modular design in system design, supports multi-channel operation, supports Android and iOS native channels, and also supports H5, mini-programs and other channels. It can also be configured according to actual needs to adapt to other page channels, realizes dynamic layout management and global reuse of components, and operators can dynamically configure a new page at any time; in terms of architectural design, it is decoupled from business scenarios and provides flexible expansion capabilities. It has the advantages of complete abstraction, flexible configuration, high operational efficiency, and good user experience.

[0061] Corresponding to the above method and system, the present invention also provides a dynamic page layout and content distribution device, including: a processor and a memory, the memory stores a computer program executable by the processor, and the processor implements the above S1-S4 methods when executing the computer program.

[0062] As an embodiment of the dynamic page layout method of the present invention, the method steps are as follows:

[0063] The terminal page can be an HTML5 page, Android page, iOS page, mini-program page, etc. It takes the pre-assigned scene code, channel and other information as parameters, calls the content distribution system, and obtains the current page layout template. The content distribution system calculates the content strategy configured by the operator in real time and returns it to the terminal in the form of a JSON message.

[0064] The terminal parses the JSON message according to the parameter settings of the content distribution system, triggers different rendering methods according to the different modules, slots, and components of the layout information center, and finally completes the drawing of the entire page.

[0065] Specifically, most static components can be rendered based on the data configured in the background, but some real-time rendering components, according to the method flow settings, initiate an asynchronous data request interface from the SDK, and complete the internal data display of the component based on the returned data. For example, the wealth component requires an additional query interface to display the deposit interest rate of the product in real time. Similar components include consumer finance components and corporate loan components, which require real-time query of user positions, loan interest rates, etc.

[0066] Specifically, the terminal will cache the layout JSON data returned by the content distribution system each time. If the subsequent page layout interface times out or is abnormal, the client can use the last cached data to render the page to ensure that the user experience is not affected. During the rendering process, if the terminal encounters an "unknown" component, such as a new component added later, it will directly discard the component and continue the subsequent rendering work to ensure that the page can work normally, achieving the "backward compatibility" capability.

[0067] The technical advantages of the method, system and device of the present invention are: adopting a multi-level and modular design, supporting multi-channel operation, configuring independent scenes according to different pages, and operators can dynamically configure page layout and content distribution management for each scene. A page can have multiple distribution strategies, and different page contents can be seen at different times and for different customer groups. In terms of architectural design, it is basically decoupled from business scenarios, and at the same time provides flexible expansion capabilities, with the advantages of perfect abstraction, flexible configuration, high operational efficiency, and good user experience.

[0068] Specifically, the independent modular design can be used to achieve decoupling from business scenarios, abstract page layout and rendering into SDK, and realize functional reuse. A good system architecture design can flexibly expand more components without affecting the rendering of existing pages, and provide a good user experience. When making adjustments to page layout and content, they take effect in real time without modifying the code, with low workload, high efficiency, and low cost. Through the control of customer groups, precise marketing can be achieved, with flexible configuration to meet the needs of each customer.

[0069] The above is only a preferred embodiment of the present invention, and the protection scope of the present invention is not limited to the above embodiments. All technical solutions under the concept of the present invention belong to the protection scope of the present invention. It should be pointed out that for ordinary technicians in this technical field, some improvements and modifications without departing from the principle of the present invention should also be regarded as the protection scope of the present invention.

Claims

1. A dynamic page layout and content distribution method, characterized by: The steps include: S1. Create a page layout template in the content distribution system and configure layout information for the page layout template. Creating a scene code for the scene and associating it with the page layout template; Create a content distribution strategy based on the scenario, associate different unit contents in the content distribution strategy, and associate each unit content with the corresponding customer group; S2. In response to the page demand request, a new page is created and the SDK provided by the new page is integrated with the content distribution system; Configure the scene code for the new page. The new page obtains the corresponding page layout template and layout information based on the scene code. S3. The new page is drawn through the SDK according to the returned page layout template and layout information.

2. A method for dynamic page layout and content distribution according to claim 1, characterized in that: S4 is executed after S3. The content of S4 is: SDK caches the page layout template and layout information locally. When the page is rendered next time, if an interface exception or timeout occurs, the cached data is used to render the page.

3. A method for dynamic page layout and content distribution according to claim 2, characterized in that: The layout information includes a layout framework, a position and a grouping of each element.

4. A method for dynamic page layout and content distribution according to claim 3, characterized in that: The unit content includes button sets, product components, banner images, and announcements.

5. A dynamic page layout and content distribution method according to claim 4, characterized in that: The new page is: Android, or iOS native page, or HTML5, or mini program page.

6. A method for dynamic page layout and content distribution according to claim 5, characterized in that: The SDK is used to complete the connection between the new page and the content distribution system and complete the rendering of the new page.

7. According to the dynamic page layout and content distribution method described in claim 6, its characteristics are: in S3, during the page drawing process, if an unrecognizable component is encountered, it is skipped and the recognizable component is drawn; if a dynamic component is encountered, the SDK initiates an asynchronous query interface to obtain real-time data before drawing the content.

8. A dynamic page layout and content distribution system, characterized by: include: The scene and page layer is used to centrally manage all scenes, set a scene code for each scene, and associate a page layout template with each scene; The layout template layer is used to set different page layout templates for different scenarios and configure layout information; The distribution strategy layer is used to set one or more content distribution strategies for each scenario; The unit content layer is used to configure unit content for the page layout template; The basic data layer is used to configure basic data.

9. A dynamic page layout and content distribution system according to claim 8, characterized in that: The basic data includes a picture library, an address pool, a tag library, a text library, and an underlying component library.

10. A dynamic page layout and content distribution device, characterized in that: include: A processor and a memory, wherein the memory stores a computer program executable by the processor, and when the processor executes the computer program, the method according to any one of claims 1 to 7 is implemented.

Images