• +1 415-349-3207
  • Contact Us
  • Logout
VWO Logo
Dashboard
Request Demo

Back to All Updates

Introducing code blocks: Take complete control of custom code execution in variations

Thejas Sridhar Thejas Sridhar 6 Min Read

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.

    Code Blocks in VWO

    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.

    Code runs on campaign execution

    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.

    Shine on button code executes when ‘Add to Cart’ button loads

    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.

    Keep applying changes enabled on VWO

    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.

    Changes execute on DOM ready and changes shown on ‘Add to Cart’ button click

    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.

    Information code block executes only after hotspot code executes

    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.

    Promo code runs on home page and reverts when visitor moves away from 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.

    Hiding elements till code runs on VWO

    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.

    [1] A CSS selector is a pattern used to select and style specific elements on a webpage. It tells the browser which HTML elements to apply CSS properties.
    [2] The DOM is ready when the HTML is fully loaded, so you can start changing elements on the page. This happens before all images and other resources are completely loaded.

    Products
    VWO Personalize, VWO Testing, VWO Web Rollouts
    Plans
    Growth, Pro, Enterprise, All
    Tags
    Client Side TestingPersonalizationVisual Editor
    For questions/concerns
    support@vwo.com
    Share

    Subscribe for VWO Product Updates

    Be the first to know. Stay on top of the latest VWO features and releases. You will also be invited to try our exciting beta features in the works!

    A value for this field is required.

    Thank you!

    Check your inbox for the confirmation mail