To get you up and running and building extensions, we will be using the open-source scaffolding tool, generously provided by Adobe’s Launch engineers to create the necessary files and file structure for your extension package, so all you have left to do is the valuable part: actually write the code.
The installed version of Node.js may be verified by running:
Create a directory where your extension files will live.
$ mkdir example && cd example
package.json file within the directory.
The values provided here are for development purposes only. They will not be
used in the published extension.
@adobe/reactor-scaffold package from NPM.
$ npm install @adobe/reactor-scaffold --save-dev
@adobe/reactor-scaffold to the project’s devDependencies in
Building the Extension
While this could be done manually, this guide utilizes the extension scaffolding tool to build-out the extension structure so developers can quickly begin coding.
Run the scaffold tool.
The scaffold tool will prompt for some initial configuration options as follows:
- Display name - The visible name of the extension
- Version - The version of the extension
- Description - A short description of the extension’s purpose
- Author - The name of the extension’s author
The scaffold tool will then provide options for building the extension structure:
- Extension configuration view - The view, HTML file, through which an extension gathers global settings from an user.
- Event type - Defines an activity for observation. For example, know when a user scrolls rapidly, or a user interacted with a page element. Events can then be utilized in rules to perform actions.
- Condition type - Condition types evaluate whether something is true or false.
For example, this can return if the user’s browser is Chrome, if they’re using an iPad, or if the user is on a specific domain.
- Action type - The action to perform when an event occurs. For example, send an analytics beacon, show an offer, save a cookie, or open a support chat.
- Data element type - A data element type retrieves a piece of data. This data could be in local storage, in a cookie, in a DOM element, or in a custom location.
- Shared module - A shared module is a mechanism by which extensions may communicate with other extensions.
- Views - Each extension feature may provide a view allowing a user to supply settings.
- Subsequent runs of the scaffolding tool will skip over the initial configuration.
- More than one of each event, condition, action, may be added.
- Only one configuration view may exist.