{"id":2833,"date":"2024-07-23T06:49:21","date_gmt":"2024-07-23T06:49:21","guid":{"rendered":"https:\/\/vwo.com\/product-updates\/?p=2833"},"modified":"2025-03-12T10:57:59","modified_gmt":"2025-03-12T10:57:59","slug":"custom-code-blocks-with-trigger-conditions","status":"publish","type":"post","link":"https:\/\/vwo.com\/product-updates\/custom-code-blocks-with-trigger-conditions\/","title":{"rendered":"Introducing code blocks: Take complete control of custom code execution in variations"},"content":{"rendered":"\n

We\u2019re 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.<\/p>\n\n\n\n

What are code blocks?<\/strong><\/h2>\n\n\n\n

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)<\/em>, you could write a custom JavaScript code block that changes the banner text dynamically, a task not easily done with a visual editor alone.<\/p>\n\n\n\n

Advantages of using code blocks<\/strong><\/h2>\n\n\n\n

1. Get complete control over changes created in a variation <\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

2. Better support for modern single-page applications<\/h3>\n\n\n\n
    \n
  1. <\/li>\n<\/ol>\n\n\n\n

    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\u2019 experience.<\/p>\n\n\n\n

    \"\"\/
    Code Blocks in VWO<\/figcaption><\/figure>\n\n\n\n

    How you can control when code changes are triggered<\/strong> ?<\/h2>\n\n\n\n

    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\u2019s discuss various scenarios and use cases under which you can benefit from this new feature:<\/p>\n\n\n\n

    1. Trigger on campaign execution<\/h3>\n\n\n\n

    This configuration executes your code changes when the campaign loads on the visitor\u2019s browser. It’s perfect for immediate modifications that must be visible once the page loads, like time-sensitive offers or announcements. <\/p>\n\n\n\n

    Example: Display a premium experience pop-up notifying customers of an experience redesign on your webpage.<\/p>\n\n\n\n