Visual Edit campaigns enable you to quickly create changes to any page on your site using a visual editor. The editor enables you to reorder elements and change texts and colors without having to code. More complex changes can be done by applying CSS or JavaScript to the page. Just point, click, and edit your site components directly.
Like our other campaign types, visual edit changes can be tested against a control group or against other variations, and be targeted to a specific audience.
Creating a Visual Edit campaign
- Go to Experience Web › Create Campaign and click Visual Edit.
- Enter a name, and add notes and labels (optional).
- Set the Visual Edit Campaign Settings.
- Configure the experience's targeting settings to determine when, where, and for whom it is displayed.
- Click Next and Create Variations to open the editor on the Preview URL page.
- Select and modify elements on your web page.
- Create a variation and click Save.
- Set the experience allocation method, primary metric, and advanced settings.
- If you are using the A/B Test allocation method, set a control group and measure the experience uplift.
- Click Save Experience.
- Click the plus icon to create an additional targeted experience.
- Click Save and Publish to launch the campaign.
Using the visual editor
When you create a Visual Edit variation, the editor opens on the page specified in the preview URL. This preview enables you to click your page elements and select from the offered editing options.
Use the toolbar to create new variations, undo/redo changes, and edit the page code (CSS and JavaScript). To change an element across your entire site, change the default ‘where’ targeting conditions to all pages. By default, it's set to your preview URL previously configured in your campaign settings.
While you can technically set up to 20 changes for each variation, the more changes each variation contains, the more risk there is of HTML conflicts and unexpected errors. Therefore, we recommend using these campaigns only for minor changes, not to change the entire layout of a page.
Changes supported by Visual Editor:
The Visual Editor supports the following modifications to page elements:
- Edit link: Modify hyperlinks embedded in text and update them to a different destination.
- Reorder: Drag and reposition elements on the page to change their placement.
- Edit text: Modify existing text content.
- Edit style: Adjust text color, background color, and font size.
- Edit HTML: Modify the underlying HTML of an element.
- Remove: Delete an element from the page.
- Change image: Swap out images with new ones.
- Copywriter suggestions: Generate and refine text on the page.
Visual Edit Campaign settings
When creating Visual Edit campaigns, the following settings are applied at the campaign level.
Preview URL
The visual editor will open on your preview URL and will allow you to configure changes directly on the page. To apply your changes across multiple pages (for example, change to a footer link), use the targeting conditions to define where the changes will be applied.
Advanced Settings
- Frequency: Setting the frequency enables you to define how often to apply the changes for each user. Keep the default – once per pageview – to apply changes to all users all the time.
- Track campaign performance in your analytics platform: Fires events for any analytics extensions and custom code you have implemented. If you disable this option, it won't fire events to any of your analytics implementations.
- Serve on Every SPA Event: Relevant for single-page applications that don’t generate a browser refresh with every screen change. If you need the recommendation to relaunch or reevaluate its targeting conditions upon every screen change in your SPA, fire a track_pageview event and enable this option. Learn more about Single-Page Application Implementation (Client Side).
FAQs
How can I create mobile web experiences?
While the visual editor doesn't support a mobile view for editing, the campaigns will work on mobile web. You can resize your browser window to view the page as it would appear on a mobile device while editing the campaign. You can later use the preview and send a preview link to your device to make sure everything looks as expected.