Menu Developer Moovweb University

Cloud Management: Marketing Controlled Content/Blobs

Marketing Controlled Content (MCC) allows users to deploy arbitrary content to the cloud without redeploying project code, immediately updating their web properties without engineering changes. When a project has been configured to use MCC, a non-technical user can edit blobs of data without redeploying code or requiring developer hours.

In the Moovweb Control Center, you can set up your controlled content by uploading “Blobs” of content, which are then available during runtime. Examples below illustrate how blobs can be used to hold environment variables, raw JSON objects, or raw HTML.

Blobs are assigned per mode, and enable making minor content changes that can be modified and tested in real time. This article describes how to create and use Blobs in Control Center.

Once active, the blob can be accessed and manipulated inside project code via the env.blob attribute.

Marketing Controlled Content and env.blob is only available for MoovJS projects.


What Are Blobs?

Blobs enable direct control of website content by marketing team personnel, improving your site’s flexibility and your team’s agility.

Blobs can range in complexity from a line of copy (e.g. the header for a landing page banner, or even the text on the checkout button) to a JSON object containing keys and values, to a HTML blob of arbitrary size that can be directly injected into a web page.

Currently, Control Center projects can be assigned one or more Modes, and each mode be assigned a single blob.


Basic Workflow for Using Modes in the Moovweb Cloud

To create and use a blob in your project, perform the following steps:

  1. Log in to the Moovweb Control Center
  2. Navigate to your project => Project Settings => Blobs Admin
  3. Create a new Blob in the Control Center.
  4. Determine in which mode you desire to deliver this blob, and select the blob for the targeted mode.
  5. Test and validate the custom experience in the Moovweb cloud. Newly uploaded blobs will take approximately 5 minutes to take effect.

How to create Blobs

To create a new Blob for your Control Center project, click the “Create New Blob” button located on the Project Settings page > Blobs Admin tab.

Create New Blob Button

Enter a name for your new Blob, the name need to be unique within the project. We recommend using a short descriptive name thus when you have multiple Blobs this will make them easier to manage.

Enter the content you want to make available, then click Upload.

Create New Blob Form

Once you uploaded your new Blob, you will see it listed under the Mode Admin tab on the Project Settings page and the upload status of the blob.

Blob List

Check the content of the uploaded Blob

By clicking the blob name in the list, you can view the content of the blob.

Show Blob

Once a blob is uploaded, it can not be edited. You can always create and upload a new blob with updated content you wish to deliver.


How to assign a Blob for a Mode

After creating a blob, you can choose the blob for any mode. Click the button “Mode Settings” located on Project Settings > Modes Admin for the mode you want to use.

Mode Settings Button

In the mode settings page, there is a drop down for blobs you can choose from. Choose the blob you want and click “Save changes”.

Mode Settings Form

After saving changes, you should be redirect to the mode page, with a table showing the blob you choose.

Mode Page

Accessing Blobs in Project Code

The blob content can be accessed in MoovJS using env.blob.

Example: using a JSON blob in MoovJS:


var blobContent = JSON.parse(env.blob)

Blobs and Local Development

It is a good practice to develop MoovJS code as if the blob content you have in mind is not available, or is subject to change at any time.

Blobs uploaded to the cloud are not available via local development, but blobs can be simulated locally using local files or hard-coding blob values using development-only functions, like fns.assert

While developing, env.blob can be overwritten using a local file or a hard-codeed string for testing and development. We recommend copying the content of an uploaded blob into a local development file.

When used in conjunction with the assert function, you can simulate blob functionality locally. This is because the assert function never “passes” in the cloud, so it can be safely deployed as a wrapper around logic that you only want to execute in a development environment, such as overloading environment variables.

Blobs should be considered extensions of functionality, not replacements. Blobs can be used to override copy text or HTML fragments already present in the page. Any attempt to parse or read keys from a particular blob should be written so that changing the blob for a particular mode does not cause syntax or runtime errors inside MoovJS code.

fns.assert(true, function(){
  env.blob = "a string representation of a JSON object or raw HTML goes here"
});

console.log(env.blob);

Without modifying env.blob locally, the console.log statement will print “undefined”. This is intentional.

Example of using a local json file to simulate a blob in development:

If a JSON file ./scripts/blob.json exists, you can override your local blob with its contents using the following code:

fns.assert(true, function(){
  env.blob = require("/blob.json");
});

This would initialize env.blob locally using the contents of the blob.json file. While the structure of the json file may stay the same, the values assigned to each key can be updated in the Control Center without redeploying code.