Tracking Message Changes

1. Overview
2. Use cases
3. How it works
4. Callback Parameters
5. Content Codes
6. Common Actions
7. Complete Event Chart

Overview

We added a new function to track message changes in the builder. This powerful new feature answers two important questions:

• How can I monitor what my customers do in the builder?
• How can I tell when a message has actually been updated?

When onChange is enabled and your customers edit their message – the callback provides you valuable information on the new content or section, the kind of action that was performed on existing content, and the JSON update (as the entire page, as well as JSON patches).

onChange is also the foundation on which the Undo, Redo & Edit History feature was built on.

Use cases

Usage tracking

In today’s software, knowing how customers use an application is essential if you want to provide a good user experience (UX) and eliminate friction points. It’s also a valuable resource to understand where to invest future development effort and build something that customers love.

onChange tracking gives you – the host application – the opportunity to get this information when your customers are creating designs in the builder.

You can use the onChange callback to:

• Understand if your customers are actively working on the message they opened (or if instead they temporarily abandoned that task to work on something else).
• Discover if they are using one of the great new features that your team recently enabled.
• Dismiss or confirm a bug by reproducing a customer’s steps.

Autosave

So you might be asking: “Isn’t this similar to the existing Autosave feature?” The simple answer is “No!”.

The Autosave function is triggered at regular intervals, whether anything has even changed since the last Autosave event or not, which could result in the user seeing a ‘recovery dialog’ window even if there weren’t any changes between the previously saved message and the most recent automatically saved one.

Now you can invoke the Autosave event only when something has been added or updated, resulting in a better message recovery experience.

History

Why is having a historical log of message changes so important? As with the previous cases, this will allow you to provide a better overall user experience. Creating a good email message or campaign typically involves input from several people or departments before it’s finally ready to send, but that can lead to inadvertent mistakes that might cause hours of work to be lost. Saving the differences between versions of a message created during the email production workflow – and allowing your users to compare & restore them – could be a huge time-saver in those cases.

Content check

When one of your users adds or updates text or images, the onChange callback returns the new input to your application, allowing you to trigger a complementary function based on it.

The use cases change from application-to-application, but the feature is flexible enough to accommodate a wide variety of scenarios. Here are just a few:

• Content suggestions
• Prevent unwanted content
• Link validation
• Link reputation check
• Custom HTML validation
• Set up an alternative workflow when conditional syntax is applied
• …

How it works

To enable changes tracking you need to add in beeConfig:

• The configuration option
• The onChange callback, with the related response function

Configuration

Enable "onChange" Event

trackChanges: true, // boolean

This parameter defines when the tracking is active in the builder.

onChange Event

onChange: function (jsonFile, response) { // do something with response... },

The onChange callback is triggered every time the builder tracks a change in the message. It returns the message JSON and a response JSON which contains all the information needed to handle any of the use cases described above.

Callback response schema

{
    "code": "01", // See content and action codes bellow
    "description": "string",
    "value": "string", // See the chart below
    "patches": {...} // JSON patch formatted object
}

Callback Parameters

Content Codes

Common Actions

Complete Event Chart