We’re excited to introduce custom code blocks in our visual editor for web optimization campaigns. Within these blocks, you can incorporate your modifications and use the trigger configurations to control the precise execution timing of these changes. Let’s explore the feature in more detail to discover how it enhances your workflow.
What are code blocks?
Code blocks are discrete sections designed to organize and manage your code changes in web testing, personalization, and rollout campaigns. In VWO, custom code blocks let you write JavaScript, CSS, and HTML to create and manage variations in your experiments. The trigger configurations in code blocks allow you to dictate exactly when the code changes must be executed. For example, to test different discount banners based on the day of the week (higher discount percentage on weekdays and lower discount percentage on weekends), you could write a custom JavaScript code block that changes the banner text dynamically, a task not easily done with a visual editor alone.
Advantages of using code blocks
1. Get complete control over changes created in a variation
Custom code blocks let you control the timing and order of changes. Each block has a trigger dropdown to specify when to execute code as the variation loads for visitors. These controls enable precise and advanced campaign management.
2. Better support for modern single-page applications
While working with single-page applications (SPAs), timing when variations changes are applied is critical to delivering a good user experience. Custom code blocks and trigger configurations help you ensure that changes within the code blocks are triggered at the right time without affecting visitors’ experience.
How you can control when code changes are triggered ?
You can create multiple code blocks within a campaign, each with its own triggers and configurations, to control when the code executes after the campaign goes live. Similar to variations, code blocks can be renamed, cloned, or deleted, providing flexibility and precision in managing your code modifications. Let’s discuss various scenarios and use cases under which you can benefit from this new feature:
1. Trigger on campaign execution
This configuration executes your code changes when the campaign loads on the visitor’s browser. It’s perfect for immediate modifications that must be visible once the page loads, like time-sensitive offers or announcements.
Example: Display a premium experience pop-up notifying customers of an experience redesign on your webpage.
2. Trigger changes on element loaded
Execute changes when a specific element on the page, identified by its CSS selector [1] loads. This method allows you to target and apply changes to specific elements based on their attributes, classes, or IDs. Targeted changes ensure that modifications apply only when the element is present.
Let’s say you want to add a shine or a glowing effect across your ‘Add to Cart’ button to attract attention and increase click-through rates. You can select this configuration to execute on the button’s load instead of the page load.
Sometimes, web pages revert to their original state and do not display the changes made through experimentation or personalization software editors. This is especially common with single-page applications. You can now turn on the ‘Keep applying changes’ toggle to fix it. When enabled, VWO will reapply your changes every time the element is reloaded on the page, ensuring visitors always see your campaign modifications.
3. Trigger changes on DOM ready
Apply changes once the page’s structure (DOM) is ready [2]. The configuration ensures all elements are ready, making it perfect for complex changes that depend on the complete page structure. This is great for modifications that require the entire page to be fully loaded.
For example, if you want to change an ‘Add to cart’ button and show a bundle pop-up when clicked, you can set it up so your changes happen on DOM ready. Then, when a visitor clicks the button, the pop-up will appear as expected.
4. Execute code blocks in a sequential order
Order the execution sequence of multiple code blocks to control the flow of changes. The configuration enables structured and sequential modifications and allows for complex interactions and dependencies between changes. This is ideal for dependent changes that need to occur one after another.
For example, you want to display a tooltip message on hover for a new product only after loading a blinking hotspot indicator. Sequential execution enables this.
5. Trigger changes on navigating away from a campaign page
Use this trigger configuration to revert changes when a visitor moves from a campaign page to a non-campaign page. For example, show a promo code on the campaign page, like the home page, and remove it when the visitor navigates to a different page. This is especially useful for single-page applications, ensuring changes on the campaign page are undone when the visitor leaves. Without this, visitors might see altered elements on other pages, creating a poor and disjointed experience.
Example: Let’s say you want to show a promo code section only on your app’s home page. When users go to other non-campaign pages, you want this section to disappear. Use the campaign exit trigger to add code that reverses changes and hides the promo code section when visitors leave the campaign page.
6. Ensure particular elements show only after the page load
To provide a seamless experience for your visitors, VWO offers the ‘Hide element(s) until code runs’ feature. This ensures that specific elements are only displayed once all changes are fully loaded, preventing any brief display of original content before your campaign changes take effect.
Ready to dive in?
Custom code blocks and their trigger configurations are available across all plans of VWO Testing, VWO Personalize, and VWO Rollouts for Data360-enabled accounts. Using custom code blocks, you can immediately start making even more sophisticated campaign changes and triggering them just as per your business need and custom use case. Refer to our knowledge base article for more about using custom code blocks.
If you have any questions, drop a line to support@vwo.com. We are happy to help.
