By default, every single change is automatically saved. To let you control your changes, in the right-hand sidebar, you will find the “Undo” and “Redo” options.
When you click on Active Changes, a new panel is displayed.
This panel lists all the changes that the current variation contains. It does not contain the Trackers that are listed in the "Trackers" panel and whose scope is “trans-variations” (those apply to the whole campaign).
- Anti-chronological order
- Types & subtypes
- Who & when
- Edit, change selector, rename, duplicate, hide/display or delete
- Batch actions
- Create a variation from selection
- “No additional information”
Changes are listed in anti-chronological order
In order to be clear and consistent, the latest edited change will always be displayed at the top. All changes are listed in anti-chronological order in the panel.
Every time you edit, rename, duplicate or change the selector of a change, the order is updated, and the last edited change is placed at the top. It does not reorder when you hide/display a change.
By default, when a variation contains no change, a default message is displayed to invite users to add changes, whether they are modifications, widgets, JavaScript or CSS code.
Changes prior to the release of this feature don't have last edit date and user information. Instead we display: “No additional Information.”
Change Types & Subtypes
In order to better understand each change, even after having renamed every single one of them, it is important to keep track of the nature of a change.
For each change, you will see an icon, reflecting the type of each respective change:
- M for Modifications
- W for Widgets
- JS for JavaScript
- CSS for CSS
In some types, you can also have subtypes.
- Modifications can be of the following subtypes: Add HTML, Add Image, Add Link, Add Paragraph, Copy & Paste (after), Copy & Paste (before), Copy & Paste (at the end), Cut & Paste (after), Cut & Paste (before), Cut & Paste (at the end), Edit Element Attributes, Edit HTML, Edit Link, Edit on the Fly, Edit Style, Edit Text, Hide Content of the Element, Hide Element, Hide Same Class Elements, Reorder Elements, Replace Background Image, Replace Image, Replace Responsive Image
- Widgets have as many subtypes as there are widgets
- There can be two types of JavaScript: Variation JavaScript or Element JavaScript. We have a dedicated article that lists the different ways to add JavaScript code in AB Tasty.
- CSS does not have subtypes. It is only CSS and its scope is at the variation level.
When you hover over the icon, you will always see the type and subtype of this change. This comes in handy when you rename a change and the new name no longer contains the notion of type or subtype.
Who & When
As changes are listed in anti-chronological order, we also display the date and time of the latest edition. We do not display the year but the year is taken into account when ordering the changes.
When hovering over the user icon, the email address of the user is displayed in a tooltip. This way, you can always know who the last person was to make a change.
Edit, Change Selector, Rename, Duplicate, Hide/Display or Delete
Depending on its type or subtype, each change allows for different actions.
“Edit” is the capacity to reopen the dedicated change modal so you can edit this change's parameters again.
For example, a modification such as “Add Text” can be edited again. The text you added can be edited (changed) by adding, removing words. On the other hand, a modification such as “Reorder Elements” cannot be edited. You will have to delete it and redo it if you want to edit it.
“Change selector” is the capacity to modify the “scope” of the modification.
You can define if, for example, an “Edit Style” (such as padding increase or a decreased line-height) will be affected to a single <div>, to the whole <body> element, or any parent/child element in between.
“Rename” lets users give a more detailed name to a change than the default name. It is very convenient if you have several changes of the same kind without any specific way to differentiate them.
The default name of a change is based on the subtype of the modification, the widget name, the type of JavaScript change (Variation JavaScript or Element JavaScript) or just “CSS”. If the new name is longer than 35 characters, it will be accepted but truncated with an ellipsis when displayed. Names longer than 300 characters will be rejected by the platform.
“Duplicate” only works for widgets. Essentially, it duplicates a whole configured widget in the variation. By default, the duplicated widget has the same name and is appended with (duplicated) at the end.
“Delete” is available for all types and subtypes of changes. When deleting a change, a confirmation prompt pops up in the Active Changes panel and awaits for a confirmation or a cancellation.
“Hide/Display” only applies to the editor level. If a user hides or displays a change, it has no impact on production; it is only here to help you see an element hidden below another one or the space it may take when displayed.
|
|
Edit |
Rename |
Duplicate |
Change selector |
Delete |
|
CSS |
x |
x |
|
|
x |
|
Element JavaScript |
x |
x |
|
x |
x |
|
Variation JavaScript |
x |
x |
|
|
x |
|
Widget - $WidgetName |
x |
x |
x |
|
x |
|
Add HTML |
x |
x |
|
x |
x |
|
Add Image |
x |
x |
|
x |
x |
|
Add Link |
x |
x |
|
x |
x |
|
Add Text |
x |
x |
|
x |
x |
|
Copy & Paste (after) |
|
x |
|
|
x |
|
Copy & Paste (before) |
|
x |
|
|
x |
|
Copy & Paste (at the end) |
|
x |
|
|
x |
|
Cut & Paste (after) |
|
x |
|
|
x |
|
Cut & Paste (before) |
|
x |
|
|
x |
|
Cut & Paste (at the end) |
|
x |
|
|
x |
|
Edit Element Attributes |
x |
x |
|
x |
x |
|
Edit HTML |
x |
x |
|
x |
x |
|
Edit Link |
x |
x |
|
x |
x |
|
Edit on the Fly |
x |
x |
|
x |
x |
|
Edit Style |
x |
x |
|
x |
x |
|
Edit Text |
x |
x |
|
x |
x |
|
Hide Content of the Element |
|
x |
|
x |
x |
|
Hide Element |
|
x |
|
x |
x |
|
Hide Same Class Elements |
|
x |
|
x |
x |
|
Reorder Elements |
|
x |
|
|
x |
|
Replace Background Image |
x |
x |
|
x |
x |
|
Replace Image |
x |
x |
|
x |
x |
|
Replace Responsive Image |
x |
x |
|
x |
x |
Batch Actions: Hide/Display or Delete
You can select one or more changes to hide/display or delete. Select the changes you want to make by checking the checkboxes when you hover over each change and hide/display them or delete them by clicking on the respective buttons.
If one or more changes cannot be deleted, they will be bordered in red for 3 seconds, and a notification will display informing you about the number of changes that were not deleted. If this happens, it can be related to a momentarily unavailable API route, as we invite you to try again later.
Error notification
If you have created a modification on a selector that no longer exists, or is no longer present on the page displayed in the editor, we display a hovering warning message to inform you that your changes probably won’t work in production. The modification line is also displayed in yellow for better readability.
Create a variation from a selection
One of the most interesting features of this panel is the capacity to create a new variation from a selection of changes.
It is very easy. Select the changes you would like to see in the duplicated variation and click on the “Create Variation from Selection” button on the bottom bar.
The variation is created. The changes are injected in the variation, and you are redirected to the variation.
This feature is not available for campaigns with dynamic allocation that have been put in “play” mode at least once, nor is it available for personalization campaigns.