Visual Edit Campaigns

Follow

Visual Edit campaigns allow you to quickly create changes to any one of your site pages using a visual editor. Using the editor, you can reorder elements, change texts, and colors without having to code. More complex changes can be done by applying CSS or JS to the page. Simply point, click and edit your site components directly.

Visual_Edit.png

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

  1. Go to Site Personalization › New Campaign and click Visual Edit. 
  2. Enter a name, and add notes and labels (optional).
  3. Set the Visual Edit Campaign Settings.
  4. Configure the targeting settings of the experience to determine when, where, and for whom the experience is displayed.
  5. Click Next and Create Variations to open the editor on the Preview URL.
  6. The visual editor opens in a new tab. Select and modify elements on your web page.
  7. Create a variation and Click Save
  8. Set the experience allocation method, primary metric, and advanced settings.
  9. If you are using the A/B Test allocation method, set a  control group and measure the experience uplift.
  10. Click Save Experience.
  11. Click the plus icon to create an additional targeted experience.
  12. Click Save and Publish to launch the campaign.

Using the Visual Editor

When you create a Visual Edit variation, the editor will open on the page specified in the preview URL. This preview provides you the ability to click on your page elements and select from the offered editing options.

Visual_Edit_variation.png

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 do not recommend using these campaigns to change the entire layout of a page, but only for minor changes. 

Visual Edit Campaign Settings

When creating Visual Edit campaigns, the following settings are applied at the campaign level.

visual_edit_settings.png

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 allows 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.
  • Fire Google Analytics Event: Only visible if the Google Analytics integration is enabled. This option is enabled by default, but you can disable it to prevent reporting data to Google Analytics about a specific Dynamic Content.
  • Execute custom integrations: Fire a custom JavaScript code when a variation is served. Custom integrations are managed in Settings › Integrations. This option is only visible when a custom integration is enabled.
  • Serve on Every SPA Event: Only applicable for Single Page Applications. If you require the page action to relaunch or re-evaluate its targeting conditions upon each screen change in your single-page application, fire a track_pageview event and enable this option. Learn more about Working with Single Page Applications

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.