Visual Edit campaigns allow 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 JS to the page. Just point, click, and edit your site components directly.
Similar to all other campaign types, visual edit changes can be tested against a control group or against other variations, as well as targeted to a specific segment.
Creating a Visual Edit campaign
- Go to Site Personalization › New Campaign and click Visual Edit.
- Enter a name, and add notes and labels (optional).
- Set the Visual Edit Campaign Settings.
- Configure the targeting settings of the experience to determine when, where, and for whom the experience is displayed.
- Click Next and Create Variations to open the editor on the Preview URL.
- The visual editor opens in a new tab. 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, to undo/redo changes, and to edit the page code (CSS and JS). To change an element across your entire site, change the default ‘where’ targeting conditions to all pages. By default, it is 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 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.
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 (e.g. 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.